mdbootstrap / tw-elements-react

TW Elements for React - 𝙃𝙪𝙜𝙚 collection of Tailwind + React components, sections and templates 😎

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

tw-elements-react's Issues

Cards, Placeholders

Headers, Jumbotron

Headings, Icons, Images

Fix scroll back to top demo in documentation

Charts - component

Update App.jsx in starter

Ripple - when element inside has margin, the ripple has wrong size

Alert - component

Tooltip - component

Modal - component

Popover - component

Rating, Spinners, Checkbox

Textarea - add TETextarea in Contact form example in Form Templates

https://tailwind-elements.com/docs/standard/forms/form-templates/#contact

Accordion page

Scrollspy - component

Update notes about required node version after latest vite release

Textarea - component and useInput hook

Collapse - component

Input - label width doesn't update on init (?)

Add prettier config

Stepper - component

Scroll back to top button

Switch, Tables

Add jsx lang to prism

Colors, Dividers, Figures

Fix demo-iframe shortcode height

Darkmode in iframes

Ripple - component

Shadows, Typography, Breadcrumbs

Toast - component

Form templates, Login form, Registration form

List Group, Paragraphs, Progress

Update front page graphics (shadows)

File Input, Radio, Range

Animations - component

Buttons, Button group

Update About page

Pagination, Avatar, Badges

Fix treeshaking issues

Inputs - component

Tabs - component

Pills - component

Social Buttons, Timeline

Add Readme, contributing guilde, issue template

Footer, Search

Dropdown - component

Hover Effects, Masks, Link

Carousel - component

Notifications page

Site/static - move react static files to new directory