https://github.com/bacali95/tw-react-components
A set of React components build with TailwindCSS to make a nice dashboard.
https://github.com/bacali95/tw-react-components
react
Last synced: 2 months ago
JSON representation
A set of React components build with TailwindCSS to make a nice dashboard.
- Host: GitHub
- URL: https://github.com/bacali95/tw-react-components
- Owner: bacali95
- License: mit
- Created: 2022-10-18T16:53:06.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-21T09:58:26.000Z (7 months ago)
- Last Synced: 2024-10-21T14:24:00.079Z (7 months ago)
- Topics: react
- Language: TypeScript
- Homepage: https://bacali95.github.io/tw-react-components/
- Size: 8.57 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# TailwindCSS React Components
[](https://codecov.io/gh/bacali95/tw-react-components)
A comprehensive library of React components built with TailwindCSS for creating beautiful and responsive dashboards.
## Demo
Check out the [live demo](https://bacali95.github.io/tw-react-components) to see the components in action.
## Features
- 🎨 Beautiful UI components built with TailwindCSS
- 🌙 Light and dark mode support
- 📱 Fully responsive design
- ♿ Accessible components using Radix UI
- 🧩 Customizable and extensible
- 🧪 Well-tested with comprehensive test coverage
## Installation
```bash
# Using npm
npm install tw-react-components
# Using yarn
yarn add tw-react-components
# Using pnpm
pnpm add tw-react-components
```
## Requirements
- React 18 or later
- TailwindCSS 3
## Setup
### 1. Configure TailwindCSS
Add the required plugins to your `tailwind.config.js`:
```js
module.exports = {
content: [
// ...
'./node_modules/tw-react-components/**/*.{js,ts,jsx,tsx}',
],
plugins: [
require('@tailwindcss/forms'),
require('tailwindcss-animate'),
// Include the custom plugin from tw-react-components (optional)
require('tw-react-components/tailwindcss-plugin'),
],
};
```
### 2. Import the CSS
Add the following import to your main CSS file:
```css
@import 'tw-react-components/index.css';
```
## Available Components
This library provides a wide range of components:
- **Layout:** Building blocks for page layouts
- `Layout` - Main container for your application
- `Flex` - Flexible box layout component
- `Block` - Block-level layout component
- `Card` - Container with styling and functionality
- **Navigation:**
- `Navbar` - Top navigation bar
- `Sidebar` - Side navigation component
- `Tabs` - Tabbed interface component
- **Data Display:**
- `Table` - Regular table component
- `DataTable` - Advanced data table with sorting and filtering
- `List` - Displaying lists of data
- `ListSorter` - Sortable list component
- `Badge` - Small status indicator
- **Input & Form:**
- `Button` - Various button styles
- `Form` - Form controls and helpers
- `Switch` - Toggle switch component
- **Feedback & Overlay:**
- `Dialog` - Modal dialog boxes
- `Popover` - Content that appears over the UI
- `Tooltip` - Information shown on hover
- `Sheet` - Slide-in panels
- `Skeleton` - Loading placeholders
- `Spinner` - Loading indicator
- `Hint` - Contextual hints and tips
- **Utilities:**
- `Separator` - Visual dividers
- `Collapsible` - Expandable/collapsible content
- `DropdownMenu` - Menu that appears on click
- `Pagination` - Navigate through pages of content
- `ThemeSelector` - Toggle between light and dark themes
## Usage
```jsx
import React from 'react';
import { Button, Card, Flex } from 'tw-react-components';
function MyComponent() {
return (
Card Title
Card content goes here
Cancel
Submit
);
}
```
## Development
This project uses [Nx](https://nx.dev) as a build system and [Yarn](https://yarnpkg.com/) as a package manager.
```bash
# Install dependencies
yarn
# Start the development server
yarn start
# Build the library
yarn build
# Run tests
yarn test
# Lint the code
yarn lint
# Format the code
yarn prettier:fix
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the LICENSE file for details.