# mdbootstrap/TW-Elements

𝙃𝙪𝙜𝙚 collection of Tailwind MIT licensed (free) components, sections and templates 😎

Repository: https://github.com/mdbootstrap/TW-Elements
Canonical: https://ross.abutalabs.com/products/tw-elements
Homepage: https://tw-elements.com
Language: JavaScript
License: MIT
License Family: permissive
Topics: tailwindcss, design-systems, frontend, front-end, front-end-development, tailwind-css, tailwind, tailwindui, tailwindcss-plugin, css, html, javascript, material-design, tailwind-admin, tailwind-template, dashboard-templates, tailwind-react, tailwind-vue, ui-components, uikit
Last push: 2026-03-27T13:59:01+00:00

## Health v2 (maintenance only)
Score: 56/100 (v2, computed 2026-09-02T17:46:02.011165+00:00)
- activity 74, release rhythm 8, longevity 100
- inputs: {"age_days": 5048, "days_push": 159, "days_rel": null, "gap_med": null, "n_releases_24m": 0}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 13158, forks 1578 (observed 2026-08-28T04:11:02.326569+00:00)

## What it is
TW Elements is a free, MIT-licensed collection of 500+ interactive UI components, design blocks, and templates built on Tailwind CSS, with a 'Material Minimal' design system and dark mode support. It ships as a Tailwind plugin with vanilla JavaScript (ES/UMMD formats) plus dedicated React packages and integrations for frameworks like Vue, Angular, Svelte, Django, and Laravel.

## Use cases
- find free tailwind css components for my website
- add modals dropdowns and forms to a tailwind project
- build a dashboard with tailwind templates
- add dark mode toggle to tailwind site
- use tailwind ui components in react
- copy-paste responsive design blocks for a landing page
- customize a material-style design system with tailwind

## When to choose
- you use Tailwind CSS and want a large free component library with MIT licensing
- you need interactive components (modals, dropdowns, selects) without building JS from scratch
- you want dark mode and theming built into every component
- you need tree-shakeable ES modules to keep bundle size small

## When to avoid
- your project does not use Tailwind CSS
- you need a full application framework rather than a component library
- you require premium components or templates beyond the free core kit
- you need guaranteed long-term support or commercial SLAs from an open-source project

## Facets
- artifact type: library
- maturity: active
- function: ui-components, css-framework, frontend-framework, theme
- domain: web-development, frontend, web-design
- platform: cross-platform
- tags: tailwindcss, tailwind-plugin, ui-kit, design-system, material-design, dark-mode, react, vue, components-library, templates, web-server, nodejs

## Member repositories
- mdbootstrap/TW-Elements (main) score 56

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:11:02.326569+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:13:29.530143+00:00, confidence not recorded.
  - readme: https://github.com/mdbootstrap/TW-Elements (fetched 2026-08-28T04:11:02.326569+00:00, sha ccdf008d8edc)
  - homepage: https://tw-elements.com (fetched 2026-08-29T08:12:30.441105+00:00, sha bc42a32e4129)
  - site_page: https://tw-elements.com/docs/react (fetched 2026-08-29T08:12:30.450663+00:00, sha 80d88a77b6fb)
  - site_page: https://tw-elements.com/docs/standard/getting-started/quick-start (fetched 2026-08-29T08:12:30.454476+00:00, sha 02ca63fc12a7)
  - site_page: https://tw-elements.com/docs/standard/getting-started/local-installation (fetched 2026-08-29T08:12:30.456680+00:00, sha 4fe7380cbbb6)
  - site_page: https://tw-elements.com/docs/standard/getting-started/optimization (fetched 2026-08-29T08:12:30.458408+00:00, sha 8f37fcb50ca2)
  - site_page: https://tw-elements.com/docs/standard/getting-started/dark-mode (fetched 2026-08-29T08:12:30.460075+00:00, sha 9922af08d5e9)
  - site_page: https://tw-elements.com/docs/standard/getting-started/theming (fetched 2026-08-29T08:12:30.461889+00:00, sha 996ad0631e49)
  - site_page: https://tw-elements.com/docs/standard/getting-started/changelog (fetched 2026-08-29T08:12:30.463844+00:00, sha 9b06c35d8666)
  - registry_npm: https://registry.npmjs.org/tw-elements (fetched 2026-08-29T08:12:30.466314+00:00, sha eba982b788de)
- Data as of 2026-08-30T08:39:29.467469+00:00.