Skip to content

TW Elements for React - 𝙃π™ͺπ™œπ™š collection of Tailwind + React components, sections and templates 😎

License

Notifications You must be signed in to change notification settings

mdbootstrap/TW-Elements-React

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

TW Elements React tw-elementsTotal Downloads Latest Release

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


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!

Builder Templates Design blocks
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 Dropdown Modal
Datepicker (coming soon) Dropdown (coming soon) Modal
Charts Tooltips Carousel
Charts (coming soon) Tooltips (coming soon) Carousel (coming soon)
Accordion Tabs Stepper
Accordion Tabs Stepper (coming soon)
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Timepicker (coming soon) Footer Navbar (coming soon)
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Alerts (coming soon) 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 (coming soon) Collapse Gallery (coming soon)
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Jumbotron (coming soon) Link List group
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Notifications (coming soon) Paragraphs Placeholders
Tailwind CSS Time picker Tailwind CSS Tables Tailwind CSS Navbar
Popover (coming soon) Progress Rating
Tailwind Component Tailwind Component Tailwind Component
Scroll to top Social buttons Spinners
Tailwind Component Tailwind Component Tailwind Component
Timeline Toast (coming soon) Tooltip (coming soon)
Tailwind Component Tailwind Component Tailwind Component
Video (coming soon) Video carousel (coming soon) Checkbox
Tailwind Component Tailwind Component Tailwind Component
File input Input group (coming soon) Login form
Tailwind Component Tailwind Component Tailwind Component
Radio Range Registration form
Tailwind Component Tailwind Component Tailwind Component
Search Select (coming soon) Switch
Tailwind Component Tailwind Component Tailwind Component
Textarea (coming soon) Tables Ripple
Tailwind Component Tailwind Component Tailwind Component
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:ACCESS_TOKEN@git.mdbootstrap.com/mdb/twe-react/prd/twe-react-pro-essential
  1. Add the TW Elements React css file to your main js/tsx file
import "tw-elements-react/dist/css/tw-elements-react.min.css";
  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: [
    "./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")],
};
  1. Components will work after importing the package:
import { TECollapse } from "tw-elements-react";