TW Elements React

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

500+ UI components Dark mode support Easy theming & customization Simple, 1 minute install Free for personal & commercial use Get started with TW Elements React now!

Table of Contents

• Table of Contents
• Community
• Coming soon
• Components
• Installation

Community

TW Elements is a community-driven project. We invite you to track our live progress 👁️ on the upcoming release.

In the meantime you can also:

• Motivate us with some words of encouragament ❤️
• Share your ideas & feature requests 💡
• Aks for help & help others in our community support 🙏
• Engage, discuss & have fun in our open-source community 💬

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

• Share via Dev.to
• Share via Twitter
• Share via Facebook
• Share via LinkedIn
• Share via Pinterest
• Share via Reddit
• Share via StumbleUpon
• Share via Vkontakte
• Share via Weibo
• Share via Hackernews
• Share via Gmail
• Share via email

Thank you!

Coming soon

Check out the upcoming features - watch our social profiles to get early access!

Drag & drop builder	Templates	Design blocks

Components

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

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

Installation

NPM

1. Before starting the project make sure to install Node.js (LTS) version 14+, 16+ and TailwindCSS.

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

npm install tw-elements-react

3. Add the TW Elements React css file to your main js/tsx file

import "tw-elements-react/dist/css/tw-elements-react.min.css";

4. 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: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/tw-elements-react/dist/js/**/*.js",
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [require("tw-elements-react/dist/plugin.cjs")],
};

5. Components will work after importing the package:

import { TECollapse } from "tw-elements-react";

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

2. Log into the CLI using your MDB account:

mdb login

3. Initialize a project and choose TW Elements React from the list:

mdb init tw-elements-react

4. Install the dependencies (inside the project directory):

npm install

5. Run the app:

npm start

6. Publish when you're ready:

mdb publish