# tw-elements-react

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

Latest version **1.0.0-alpha-end** (published 2024-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install tw-elements-react
pnpm add tw-elements-react
yarn add tw-elements-react
bun add tw-elements-react
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha-end |
| Published | 2024-06-03 |
| First published | 2023-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | juujisai |

## Links

- npm: https://www.npmjs.com/package/tw-elements-react
- npm.io page: https://npm.io/package/tw-elements-react

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^18.2.0
- [ts-node](https://npm.io/package/ts-node.md) ^10.9.1
- [chart.js](https://npm.io/package/chart.js.md) ^3.7.1
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.3.1
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [react-popper](https://npm.io/package/react-popper.md) ^2.3.0
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.11.8
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.11.1
- [chartjs-plugin-datalabels](https://npm.io/package/chartjs-plugin-datalabels.md) ^2.0.0

## Recent versions

- 1.0.0-alpha-end (latest) — 2024-06-03
- 1.0.0-alpha2 — 2023-10-30
- 1.0.0-alpha1 — 2023-06-26

## README

# TW Elements React [<img src="https://tecdn.b-cdn.net/img/logo/te-react-logo.webp" width="45" align="right" alt="tw-elements">](https://tw-elements.com/docs/react/)<a href="https://www.npmjs.com/package/tw-elements-react"><img src="https://img.shields.io/npm/dt/tw-elements-react.svg" alt="Total Downloads"></a> <a href="https://github.com/mdbootstrap/TW-Elements-React/releases"><img src="https://img.shields.io/npm/v/tw-elements-react.svg" alt="Latest Release"></a> <a href="https://twitter.com/intent/tweet/?text=Thanks+@TWElement+for+creating+an+amazing+collection+of+open+source+components+for+@tailwindcss%20https://tw-elements.com/docs/react/&hashtags=tailwindCSS,bootstrap,webdesign,react,100DaysOfCode,DevCommunity"><img src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social&label=Let%20us%20know%20you%20were%20here%21&"></a>

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

 <table>
    <tbody>
    <tr>
      <td>
          <a href="https://tw-elements.com/docs/react/" alt="TW Elements tutorials" rel="dofollow">
          		<img width="600" src="https://tecdn.b-cdn.net/img/react-big.jpg">
          </a>
      </td>
      <td>    
        <ul>
         <li>500+ UI components</li>
         <li>Dark mode support</li>      
         <li>Easy theming & customization</li>
         <li>Simple, 1 minute install</li>    
         <li>Free for personal & commercial use</li>
        </ul>
        <p><b><a href="https://tw-elements.com/docs/react/getting-started/quick-start/">Get started with TW Elements React now!</a></b></p>
      </td>
    </tr>
   </tbody>
  </table>

---

## Table of Contents

- [Table of Contents](#table-of-contents)
- [License](#license)
- [Coming soon](#coming-soon)
- [Components](#components)
- [Installation](#installation)

---

## License

TWE React Alpha licensing information is available at the license file

---

## Coming soon

Check out the upcoming features - watch our **[social profiles](https://twitter.com/TailwindElement/)** to **get early access**!

 <table>
  <tr>
    <td>
        <a href="#">
            <img alt="Builder" src="https://mdbootstrap.com/img/tw-demo/drag-and-drop.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Templates" src="https://mdbootstrap.com/img/tw-demo/templates.webp">
        </a>
    </td> 
    <td>
        <a href="#">
            <img alt="Design blocks" src="https://mdbootstrap.com/img/tw-demo/design-blocks.webp">
        </a>
    </td> 
  </tr>
  <tr>
    <td align="center"><b>Drag & drop builder</b></td>
    <td align="center"><b>Templates</b></td>
    <td align="center"><b>Design blocks</b></td>
  </tr>
</table>

---

## 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.

<table>
  <tr>
    <td>
        <a href="#">
            <img alt="Datepicker" src="https://mdbootstrap.com/img/tw-demo/datepicker.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Dropdown" src="https://mdbootstrap.com/img/tw-demo/dropdown.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/modal/">
            <img alt="Modal" src="https://mdbootstrap.com/img/tw-demo/modal.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Datepicker (coming soon)</b></td>
    <td align="center"><b>Dropdown (coming soon)</b></td>
    <td align="center"><b>Modal</b></td>
  </tr>
  
  <tr>
    <td>
        <a href="#">
            <img alt="Charts" src="https://mdbootstrap.com/img/tw-demo/charts.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Tooltips" src="https://mdbootstrap.com/img/tw-demo/tooltips-1.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Carousel" src="https://mdbootstrap.com/img/tw-demo/carousel.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Charts (coming soon)</b></td>
    <td align="center"><b>Tooltips (coming soon)</b></td>
    <td align="center"><b>Carousel (coming soon)</b></td>
  </tr>
  
  <tr>
    <td>
        <a href="https://tw-elements.com/docs/react/components/accordion/">
            <img alt="Accordion" src="https://mdbootstrap.com/img/tw-demo/accordion.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/navigation/tabs/">
            <img alt="Tabs" src="https://mdbootstrap.com/img/tw-demo/tabs.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Stepper" src="https://mdbootstrap.com/img/tw-demo/stepper.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Accordion</b></td>
    <td align="center"><b>Tabs</b></td>
    <td align="center"><b>Stepper (coming soon)</b></td>
  </tr>
  <tr>
    <td>
        <a href="#">
            <img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/img/tw-demo/timepicker.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/navigation/footer/">
            <img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/img/tw-demo/footer.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/img/tw-demo/navbar.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Timepicker (coming soon)</b></td>
    <td align="center"><b>Footer</b></td>
    <td align="center"><b>Navbar (coming soon)</b></td>
  </tr>
  <!--New row-->
    <tr>
    <td>
        <a href="#">
            <img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/alert-1.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/avatar/">
            <img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/avatar.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/badges/">
            <img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/badge-1.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Alerts (coming soon)</b></td>
    <td align="center"><b>Avatar</b></td>
    <td align="center"><b>Badges</b></td>
  </tr>
  <!--New row-->
  <tr>
    <td>
        <a href="https://tw-elements.com/docs/react/components/button-group/">
            <img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-group-1.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/buttons/">
            <img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/button-2.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/cards/">
            <img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/card-1.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Button group</b></td>
    <td align="center"><b>Buttons</b></td>
    <td align="center"><b>Cards</b></td>
  </tr>
<!--New row-->
  <tr>
    <td>
        <a href="#">
            <img alt="Tailwind CSS Time picker" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/chips.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/collapse/">
            <img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/collapse-1.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Tailwind CSS Navbar" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/lightbox.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Chips (coming soon)</b></td>
    <td align="center"><b>Collapse</b></td>
    <td align="center"><b>Gallery (coming soon)</b></td>
  </tr>
  <!--New row-->
  <tr>
    <td>
        <a href="#">
            <img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/header-1.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/link/">
            <img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/link.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/listgroup/">
            <img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/list-group-1.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Jumbotron (coming soon)</b></td>
    <td align="center"><b>Link</b></td>
    <td align="center"><b>List group</b></td>
  </tr>
  <!--New row-->
  <tr>
    <td>
        <a href="#">
            <img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/notification.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/paragraphs/">
            <img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/paragraphs.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/placeholders/">
            <img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/placeholder-1.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Notifications (coming soon)</b></td>
    <td align="center"><b>Paragraphs</b></td>
    <td align="center"><b>Placeholders</b></td>
  </tr>
  <!--New row-->
  <tr>
    <td>
        <a href="#">
            <img alt="Tailwind CSS Time picker" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/popover-1.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/progress/">
            <img alt="Tailwind CSS Tables" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/progress-1.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/rating/">
            <img alt="Tailwind CSS Navbar" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/rating-1.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Popover (coming soon)</b></td>
    <td align="center"><b>Progress</b></td>
    <td align="center"><b>Rating</b></td>
  </tr>
  <!--New row-->
  <tr>
    <td>
        <a href="https://tw-elements.com/docs/react/components/scroll-back-to-top-button/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/scroll-back-to-top.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/social-buttons/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/social-media.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/components/spinners/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/spinner-1.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Scroll to top</b></td>
    <td align="center"><b>Social buttons</b></td>
    <td align="center"><b>Spinners</b></td>
  </tr>
  <!--New row-->
  <tr>
    <td>
        <a href="https://tw-elements.com/docs/react/components/timeline/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/timeline.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/toast-1.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/tooltip-1.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Timeline</b></td>
    <td align="center"><b>Toast (coming soon)</b></td>
    <td align="center"><b>Tooltip (coming soon)</b></td>
  </tr>
  <!--New row-->
  <tr>
    <td>
        <a href="#">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/video-carousel.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/forms/checkbox/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/checkbox-1.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Video (coming soon)</b></td>
    <td align="center"><b>Video carousel (coming soon)</b></td>
    <td align="center"><b>Checkbox</b></td>
  </tr>
  <!--New row-->
  <tr>
    <td>
        <a href="https://tw-elements.com/docs/react/forms/file-input/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/file-upload.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/input-group.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/forms/login-form/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/login-form.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>File input</b></td>
    <td align="center"><b>Input group (coming soon)</b></td>
    <td align="center"><b>Login form</b></td>
  </tr>  
  <!--New row-->
  <tr>
    <td>
        <a href="https://tw-elements.com/docs/react/forms/radio/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/radio-1.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/forms/range/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/range-1.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/forms/registration-form/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/registration-form.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Radio</b></td>
    <td align="center"><b>Range</b></td>
    <td align="center"><b>Registration form</b></td>
  </tr>
  <!--New row-->
  <tr>
    <td>
        <a href="https://tw-elements.com/docs/react/forms/search/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/search-1.webp">
        </a>
    </td>
    <td>
        <a href="#">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-pro/select-1.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/forms/switch/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/switch.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Search</b></td>
    <td align="center"><b>Select (coming soon)</b></td>
    <td align="center"><b>Switch</b></td>
  </tr>
  <!--New row-->
  <tr>
    <td>
        <a href="#">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/textarea.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/data/tables/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/table-1.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/methods/ripple/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/ripple.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Textarea (coming soon)</b></td>
    <td align="center"><b>Tables</b></td>
    <td align="center"><b>Ripple</b></td>
  </tr>
<!--New row-->
  <tr>
    <td>
        <a href="#">
            <img alt="Tailwind Component" src="https://mdbcdn.b-cdn.net/wp-content/themes/mdbootstrap4/content/en/_mdb5/standard/pro/demo-new/assets/images/animations2.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/content-styles/mask/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/mask-1.webp">
        </a>
    </td>
    <td>
        <a href="https://tw-elements.com/docs/react/content-styles/shadows/">
            <img alt="Tailwind Component" src="https://mdbootstrap.com/docs/standard/pro/demo/assets/images/components-free/shadow-1.webp">
        </a>
    </td>
  </tr>
  <tr>
    <td align="center"><b>Animations (coming soon)</b></td>
    <td align="center"><b>Masks</b></td>
    <td align="center"><b>Shadows</b></td>
  </tr>
  
</table>

---

## Installation

##### NPM

1. Before starting the project make sure to install [Node.js (LTS)](https://nodejs.org/en/ "Node.js (LTS)") version 14+, 16+ and [TailwindCSS](https://tailwindcss.com/ "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
```

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

```javascript
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:

```javascript
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:

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

---
_Source: https://npm.io/package/tw-elements-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._