Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mdbootstrap/tw-elements-react
TW Elements for React - 𝙃𝙪𝙜𝙚 collection of Tailwind + React components, sections and templates 😎
https://github.com/mdbootstrap/tw-elements-react
component components components-library javascript react react-template reactjs reactjs-components tailwind-css tailwind-css-template tailwind-template tailwind-ui tailwindcss tailwindcss-plugin template templates theme themes ui-components uikit
Last synced: 8 days ago
JSON representation
TW Elements for React - 𝙃𝙪𝙜𝙚 collection of Tailwind + React components, sections and templates 😎
- Host: GitHub
- URL: https://github.com/mdbootstrap/tw-elements-react
- Owner: mdbootstrap
- License: mit
- Created: 2023-05-17T10:31:14.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-06-03T12:54:39.000Z (4 months ago)
- Last Synced: 2024-09-22T14:02:31.156Z (13 days ago)
- Topics: component, components, components-library, javascript, react, react-template, reactjs, reactjs-components, tailwind-css, tailwind-css-template, tailwind-template, tailwind-ui, tailwindcss, tailwindcss-plugin, template, templates, theme, themes, ui-components, uikit
- Language: HTML
- Homepage: https://tw-elements.com/docs/react/
- Size: 3.74 MB
- Stars: 140
- Watchers: 7
- Forks: 28
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: license.txt
Awesome Lists containing this project
README
# TW Elements React [
](https://tw-elements.com/docs/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](#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**!
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)](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:[email protected]/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";
```