TW Elements React

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
• License
• Coming soon
• Components
• Installation

---

License

TWE React Alpha licensing information is available at the license file

---

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 i git+https://oauth2:[email protected]/mdb/twe-react/prd/twe-react-pro-essential

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";