13.2K ·GitHub
What is this?
TW Elements is a huge, free collection of 500+ Tailwind CSS UI components and 117+ design blocks (forms, cards, navbars, modals, carousels and more) that you can drop into any project.
TW Elements is a huge, free collection of 500+ Tailwind CSS UI components and 117+ design blocks (forms, cards, navbars, modals, carousels and more) that you can drop into any project.Is this a standalone framework or an add-on for Tailwind?It is a component library built on top of Tailwind CSS, not a replacement for it — you keep your Tailwind setup and TW Elements adds ready-made components and design blocks on top.
It is a component library built on top of Tailwind CSS, not a replacement for it — you keep your Tailwind setup and TW Elements adds ready-made components and design blocks on top.How do I add it to my project?TW Elements advertises a 'Simple, 1 minute install' — you add the package (and its Tailwind plugin) to an existing Tailwind CSS project and start using components like Modal, Carousel, Datepicker or Navbar right away.
TW Elements advertises a 'Simple, 1 minute install' — you add the package (and its Tailwind plugin) to an existing Tailwind CSS project and start using components like Modal, Carousel, Datepicker or Navbar right away.Do I need Tailwind CSS already set up?Yes — TW Elements is a component set for Tailwind CSS, so a working Tailwind build is required before adding its components and classes.
Yes — TW Elements is a component set for Tailwind CSS, so a working Tailwind build is required before adding its components and classes.Does it work with just CSS, or do I need the JS too?Interactive pieces like Modal, Carousel, Dropdown and Datepicker depend on TW Elements' JavaScript, not Tailwind classes alone, so you need to include its JS bundle alongside Tailwind CSS.
Interactive pieces like Modal, Carousel, Dropdown and Datepicker depend on TW Elements' JavaScript, not Tailwind classes alone, so you need to include its JS bundle alongside Tailwind CSS.Does it work with React or Vue, not just vanilla HTML/JS?Yes — besides the core vanilla JS/HTML version, the project maintains React and Vue variants (reflected in its tailwind-react and tailwind-vue builds).
Yes — besides the core vanilla JS/HTML version, the project maintains React and Vue variants (reflected in its tailwind-react and tailwind-vue builds).Is this really free to use commercially?Yes, TW Elements is MIT licensed and explicitly stated to be free for both personal and commercial use.
Yes, TW Elements is MIT licensed and explicitly stated to be free for both personal and commercial use.What components and design blocks are included?500+ components such as Datepicker, Modal, Carousel, Navbar, Accordion, Tabs, Timepicker, Tooltips and Toasts, plus 117+ ready-made design blocks for things like login forms and galleries.
500+ components such as Datepicker, Modal, Carousel, Navbar, Accordion, Tabs, Timepicker, Tooltips and Toasts, plus 117+ ready-made design blocks for things like login forms and galleries.Does it support dark mode out of the box?Yes, every component ships with built-in dark mode support along with easy theming and customization options.
Yes, every component ships with built-in dark mode support along with easy theming and customization options.How is it different from Tailwind UI?Unlike Tailwind UI's paid component sets, TW Elements is completely free and MIT licensed, which has made it one of the most popular 3rd-party Tailwind CSS UI kits with over 13k GitHub stars.
Unlike Tailwind UI's paid component sets, TW Elements is completely free and MIT licensed, which has made it one of the most popular 3rd-party Tailwind CSS UI kits with over 13k GitHub stars.What are similar projects?daisyui, hyperui, mdb-ui-kit, tabler, chakra-ui, materialize, tamagui, galaxy
daisyui, hyperui, mdb-ui-kit, tabler, chakra-ui, materialize, tamagui, galaxyWhich topics is it in?tailwind-css, front-end-development, tailwind, uikit, design-systems, front-end, ui-kit, react-components, material-design, tailwindcss, component-library, vue
tailwind-css, front-end-development, tailwind, uikit, design-systems, front-end, ui-kit, react-components, material-design, tailwindcss, component-library, vue