TW Elements is a huge collection of free, interactive components for Tailwind CSS.


Keywords
css, dashboard-templates, design-systems, front-end, front-end-development, frontend, html, javascript, material-design, tailwind, tailwind-admin, tailwind-css, tailwind-react, tailwind-template, tailwind-vue, tailwindcss, tailwindcss-plugin, tailwindui, ui-components, uikit
License
LPL-1.02
Install
npm install tw-elements@2.0.0

Documentation

TW Elements tw-elementsTotal Downloads Latest Release

TW Elements is a huge collection of free, interactive components for Tailwind CSS.

  • 500+ UI components
  • 117+ design blocks
  • Dark mode support
  • Easy theming & customization
  • Simple, 1 minute install
  • Free for personal & commercial use

Get started with TW Elements now!


Table of Contents


Community

If you want to help the project grow, start by simply sharing it with your peers!

Thank you!


Coming soon

Check out the upcoming features - make sure to join the waiting list in order to get early access!

Design blocks Templates
Drag & drop builder Templates

Components

A collection of stunning components made with attention to the smallest details. Forms, cards, buttons, and hundreds of others – in TW Elements you will find all the essential elements necessary for every project.

Datepicker Dropdown Modal
Datepicker Dropdown Modal
Charts Tooltips Carousel
Charts Tooltips Carousel
Accordion Tabs Stepper
Accordion Tabs Stepper
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Timepicker Footer Navbar
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Alerts Avatar Badges
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Button group Buttons Cards
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Chips Collapse Gallery
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Jumbotron Link List group
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Notifications Paragraphs Placeholders
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Popover Progress Rating
Tailwind Component Tailwind Component Tailwind Component
Scroll to top Social buttons Spinners
Tailwind Component Tailwind Component Tailwind Component
Timeline Toast Tooltip
Tailwind Component Tailwind Component Tailwind Component
Video Video carousel Checkbox
Tailwind Component Tailwind Component Tailwind Component
File input Input group Login form
Tailwind Component Tailwind Component Tailwind Component
Radio Range Registration form
Tailwind Component Tailwind Component Tailwind Component
Search Select Switch
Tailwind Component Tailwind Component Tailwind Component
Textarea Tables Ripple
Tailwind Component Tailwind Component Tailwind Component
Animations Masks Shadows
Tailwind Component Tailwind Component Tailwind Component
Datatables Lightbox Rating
Tailwind Component Tailwind Component Logo Clouds
Scrollbar Popconfirm More coming soon

Design blocks

Responsive Landing page blocks built with Tailwind CSS. Plenty of design blocks examples such as Teams, services, projects, faq, and many more.

Hero Pricing Call to action
Hero Pricing Call to action
Features Contact News/blog
Features Contact News/blog
Team Tabs Stepper
Team Stats Testimonials
Content Newsletter Projects
Content Newsletter Projects
Headers FAQ Logo Clouds
Headers FAQ Logo Clouds
Headers FAQ Logo Clouds
Banners Mega Menu More coming soon

Integrations

TW Elements integrations with popular technologies.


Installation

NPM
  1. Before starting the project make sure to install Node.js (LTS) and TailwindCSS.

  2. Run the following command to install the package via NPM:

npm install tw-elements
  1. TW Elements is a plugin and should be included inside the tailwind.config.js file. It is also recommended to extend the content array with a js file that loads dynamic component classes:
module.exports = {
  content: ["./src/**/*.{html,js}", "./node_modules/tw-elements/js/**/*.js"],
  plugins: [require("tw-elements/plugin.cjs")],
  darkMode: "class",
};
  1. Dynamic components will work after adding the js file:
<script src="./TW-ELEMENTS-PATH/js/tw-elements.umd.min.js"></script>

Alternatively, you can import it in the following way (bundler version):

import 'tw-elements';
MDB GO / CLI

Create, deploy and host anything with a single command.

  1. To start using MDB GO / CLI install it with one command:
npm install -g mdb-cli
  1. Log into the CLI using your MDB account:
mdb login
  1. Initialize a project and choose Tailwind Elements from the list:
mdb init tailwind-elements-free
  1. Install the dependencies (inside the project directory):
npm install
  1. Run the app:
npm start
  1. Publish when you're ready:
mdb publish
CDN

You can easily test TW Elements by adding CDN scripts to your classic HTML template without the need for installing any packages.

Add the stylesheet files below in the head section:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/css/tw-elements.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    darkMode: "class",
    theme: {
      fontFamily: {
        sans: ["Roboto", "sans-serif"],
        body: ["Roboto", "sans-serif"],
        mono: ["ui-monospace", "monospace"],
      },
    },
    corePlugins: {
      preflight: false,
    },
  };
</script>

Require the js bundled file right before the body closing tag:

<script src="https://cdn.jsdelivr.net/npm/tw-elements/js/tw-elements.umd.min.js"></script>