mdbootstrap/tw-elements

★ 13,127JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((repo))
    What it does
      UI component library
      Tailwind CSS addon
      Dark mode ready
    Components
      Date pickers
      Modals
      Carousels
      Navigation menus
    Blocks
      Page sections
      100 plus presets
    Setup
      npm install
      Init snippet

mindmap root((repo)) What it does UI component library Tailwind CSS addon Dark mode ready Components Date pickers Modals Carousels Navigation menus Blocks Page sections 100 plus presets Setup npm install Init snippet

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Drop a pre-built date picker, modal, or carousel into a Tailwind CSS project without building it from scratch

USE CASE 2

Assemble a landing page quickly using 100+ pre-built section blocks

USE CASE 3

Add dark mode to a Tailwind-based site using components that include dark mode support out of the box

Tech stack

JavaScriptTailwind CSSnpm

Getting it running

Difficulty · easy Time to first run · 5min

Requires an existing Tailwind CSS project setup before adding TW Elements.

Free to use in personal and commercial projects with no restrictions, just keep the copyright notice.

In plain English

TW Elements is a large collection of free, pre-built UI components designed to work with Tailwind CSS. Tailwind CSS is a popular styling toolkit that lets you build web interfaces by combining small, single-purpose style classes in your HTML. TW Elements adds ready-made components on top of it, so you do not have to build common interface pieces from scratch. The collection includes more than 500 individual components and over 100 design blocks (larger pre-assembled page sections). You get things like date pickers, dropdowns, modals, navigation menus, carousels, accordion panels, tooltips, forms, cards, and many others. All components include dark mode support and can be customized through Tailwind configuration. Installation takes one step: add the package via npm and include a small initialization snippet. After that, you reference component classes in your HTML just as you would with any Tailwind class. No heavy framework or build system is required beyond a standard Tailwind setup. Everything in the collection is released under the MIT license, which means it is free to use in both personal and commercial projects with no royalties or restrictions. The project is maintained by MDBootstrap, the team behind the older MDB UI Kit for Bootstrap. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1

Show me how to add a TW Elements modal dialog to my Tailwind CSS page, include the npm install step and the HTML markup needed

Prompt 2

I need a date picker in my Tailwind CSS project, walk me through using the TW Elements date picker component from install to render

Prompt 3

How do I enable dark mode for TW Elements components in a Tailwind CSS project?

Prompt 4

Give me the HTML for a TW Elements navigation menu with a dropdown that works in both light and dark mode

Open on GitHub → Explain another repo

← mdbootstrap on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.