Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/erfanetoon/react-tailwind-ui
Tailwind ui components for reactjs
https://github.com/erfanetoon/react-tailwind-ui
react tailwind
Last synced: 14 days ago
JSON representation
Tailwind ui components for reactjs
- Host: GitHub
- URL: https://github.com/erfanetoon/react-tailwind-ui
- Owner: erfanetoon
- Created: 2023-02-07T10:04:16.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-30T13:55:47.000Z (about 1 month ago)
- Last Synced: 2025-01-16T19:26:35.155Z (18 days ago)
- Topics: react, tailwind
- Language: TypeScript
- Homepage: https://erfanetoon.github.io/react-tailwind-ui-docs/
- Size: 152 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Tailwind Ui Components
### Getting Started
react-tailwind-ui is working with Tailwind CSS classes - Tailwind CSS Installation.
1. Install `@erfanetoon/react-tailwind-ui`.
```bash
npm i @erfanetoon/react-tailwind-ui
```
2. Once you install @erfanetoon/react-tailwind-ui you need to wrap your tailwind css configurations with the `withTailwind()` function coming from @erfanetoon/react-tailwind-ui.
```js
const { withTailwind } = require("@erfanetoon/react-tailwind-ui/withTailwind");
module.exports = withTailwind({
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
});
```
3. @erfanetoon/react-tailwind-ui comes with a theme provider that set's the default theme/styles for components or to provide your own theme/styles to your components. You need to wrap your entire application with the `ThemeProvider` coming from @erfanetoon/react-tailwind-ui.
```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "@erfanetoon/react-tailwind-ui";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
,
);
```
4. Congratulations 🥳, you did it, now you're ready to use @erfanetoon/react-tailwind-ui.
```jsx
import { Button } from "@erfanetoon/react-tailwind-ui";
export default function Example() {
return Button;
}
```
```jsx
import { Chip } from "@erfanetoon/react-tailwind-ui";
export default function Example() {
return Chip;
}
```
```jsx
import { CodeInput } from "@erfanetoon/react-tailwind-ui";
export default function Example() {
return CodeInput;
}
```
```jsx
import { Dropdown } from "@erfanetoon/react-tailwind-ui";
export default function Example() {
return Dropdown;
}
```
```jsx
import { Hint } from "@erfanetoon/react-tailwind-ui";
export default function Example() {
return Hint;
}
```
```jsx
import { IconButton } from "@erfanetoon/react-tailwind-ui";
export default function Example() {
return IconButton;
}
```
```jsx
import { Input } from "@erfanetoon/react-tailwind-ui";
export default function Example() {
return Input;
}
```
```jsx
import { PasswordInput } from "@erfanetoon/react-tailwind-ui";
export default function Example() {
return PasswordInput;
}
```
```jsx
import { Textarea } from "@erfanetoon/react-tailwind-ui";
export default function Example() {
return Textarea;
}
```
```jsx
import { Tooltip } from "@erfanetoon/react-tailwind-ui";
export default function Example() {
return Tooltip;
}
```
## Colors
Our color palette is same as tailwindcss - Tailwind CSS Colors., but we add 3 new colors as `primary (default is blue)` `secondary (default is pink)` `tertiary (default is emerald)` that you can modify and assign your color spectrum to them, we use `primary` as our default color in all component, you can change it in themeProvider global object
```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { ThemeProvider } from "@erfanetoon/react-tailwind-ui";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
,
);
```
You can modify our colors as same as example that we provided here, you can use Hihayk Color Generator for generate color spectrum
```jsx
theme: {
extend: {
colors: {
primary: {
50: "",
100: "",
200: "",
300: "",
400: "",
500: "",
600: "",
700: "",
800: "",
900: "",
}
}
},
},
```
## Breakpoints
We add new breakpoint size as `xs`, this will help you to handle responsive design better
```jsx
xs: "480px",
sm: "640px",
md: "768px",
lg: "1024px",
xl: "1280px",
"2xl": "1536px",
```
You can override screens in `tailwind.config.js`
```jsx
theme: {
screens: {
// your values
},
},
```
## Direction (rtl support)
We handle rtl and ltr design, you can put your ideal direction on `ThemeProvider` and you can use it with this pattern `rtl:text-left ltr:text-right`
```jsx
```
## Font Sizes
We define new font size values
```jsx
xs: ["0.625rem", "0.75rem"],
sm: ["0.75rem", "1rem"],
base: ["0.875rem", "1.25rem"],
lg: ["1rem", "1.5rem"],
xl: ["1.125rem", "1.75rem"],
"2xl": ["1.25rem", "1.75rem"],
"3xl": ["1.5rem", "2rem"],
"4xl": ["1.875rem", "2.25rem"],
"5xl": ["2.25rem", "2.5rem"],
"6xl": ["3rem", "1rem"],
"7xl": ["3.75rem", "1rem"],
"8xl": ["4.5rem", "1rem"],
"9xl": ["6rem", "1rem"],
"10xl": ["8rem", "1rem"],
```
You can override fontSize in `tailwind.config.js`
```jsx
theme: {
fontSize: {
// your values
},
},
```
## Box Shadows
We define new box shadow values
```jsx
sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
DEFAULT: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
none: "0 0 rgb(0, 0 / 0, 0)",
```
You can override boxShadow in `tailwind.config.js`
```jsx
theme: {
boxShadow: {
// your values
},
},
```
## Hooks
We provide some hooks to help you code better
#### useResponsive
This hook help you to calculate the active window system and the values that return to us are sync with `breakpoints` in tailwind config
```jsx
import { useResponsive } from "@erfanetoon/react-tailwind-ui";
const AppComponent = () => {
const { is2xs, isXs, isSm, isMd, isLg, isXl, is2xl } = useResponsive();
return;
<>
is2xs: {is2xs}
isXs: {isXs}
isSm: {isSm}
isMd: {isMd}
isLg: {isLg}
isXl: {isXl}
is2xl: {is2xl}
>;
};
export default AppComponent;
```
## Typescript
This library is based on `typescript ^v5` and every section of it has own types and all available types return to use theme
## Contribute
For contribute in this library you must create an issue first and describe all of your changes there and after that fork this library and apply your changes and then creat ea pull request and notice me on that issue,
```
Don't forget to add your name in `CONTRIBUTORS.md` file
```