Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/paalamugan/paalan-tailwind-ui
This is a collection of React components and hooks that used tailwindcss as CSS framework.
https://github.com/paalamugan/paalan-tailwind-ui
formatter internationl locale locales-translation package react react-hooks storybook storybook-ui tailwind tailwindcss tailwindui
Last synced: about 5 hours ago
JSON representation
This is a collection of React components and hooks that used tailwindcss as CSS framework.
- Host: GitHub
- URL: https://github.com/paalamugan/paalan-tailwind-ui
- Owner: paalamugan
- License: mit
- Created: 2023-11-27T13:29:49.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-02-25T05:32:26.000Z (9 months ago)
- Last Synced: 2024-10-28T00:06:03.269Z (23 days ago)
- Topics: formatter, internationl, locale, locales-translation, package, react, react-hooks, storybook, storybook-ui, tailwind, tailwindcss, tailwindui
- Language: TypeScript
- Homepage: https://tailwind-ui-storybook.paalamugan.com
- Size: 4.87 MB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Paalan Tailwind UI
This is a collection of React components and hooks that used tailwindcss as CSS framework. You can checkout storybook website in [here](https://tailwind-ui-storybook.paalamugan.com/).
## Pre Requisites
- [Node.js](https://nodejs.org/en/) `version >= 16.0.0` is required. We recommend using [nvm](https://www.freecodecamp.org/news/node-version-manager-nvm-install-guide/) to install the node version.
```bash
nvm install 18 && nvm use 18
```
- [tailwindcss](https://tailwindcss.com/docs/guides/vite) `version >= 3.0.0` is required.
```bash
npm install -D tailwindcss postcss autoprefixer
```
## Installation
- Install the package using npm. This package has peer dependencies on `react`, `react-dom` and `react-router-dom`.
```bash
npm install @paalan/tailwind-ui
```
## Quick Links
- [Layouts](https://tailwind-ui-storybook.paalamugan.com/?path=/docs/layouts-box--docs)
- [Components](https://tailwind-ui-storybook.paalamugan.com/?path=/docs/components-accordion--docs)
- [Icons](https://tailwind-ui-storybook.paalamugan.com/?path=/docs/icons-all-icons--docs)
- [Colors](https://tailwind-ui-storybook.paalamugan.com/?path=/docs/system-colors--docs)
- [Hooks](https://tailwind-ui-storybook.paalamugan.com/?path=/docs/hooks-state-management-usecallbackref--documentation)
- [Providers](https://tailwind-ui-storybook.paalamugan.com/?path=/docs/providers-themeprovider--docs)
## Usage
- Import the `tailwindConfig` configuration from `@paalan/tailwind-ui/config` in your application. Copy the below content and paste it in your application `tailwind.config.js` file.
**Note: If the `tailwind.config.js` file is not exist in your root folder then create one, before paste the below content.**
```js
import { tailwindConfig } from '@paalan/tailwind-ui/config';
/** @type {import('tailwindcss').Config} */
const config = {
presets: [tailwindConfig],
// override tailwind config here if needed
theme: {},
};
export default config;
```
- Import the styles css file from `@paalan/tailwind-ui/styles.css` in your application. Copy the below content and paste it in your application `index.css` file.
**Note: If the `index.css` file is not exist in your `src` folder then create one, before paste the below content.**
```css
@import '@paalan/tailwind-ui/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;
```
- Import the `ThemeProvider` component from `@paalan/tailwind-ui/providers` and wrap your application with it.
```jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from '@paalan/tailwind-ui/providers';
import { App } from './App';
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('root')!);
const Root = () => {
return (
);
};
root.render();
```
- Import the components you need from `@paalan/tailwind-ui/components`.
```jsx
import React, { useState } from 'react';
import { Button } from '@paalan/tailwind-ui/components';
import { useCounter } from '@paalan/tailwind-ui/hooks';
import { Box, Text } from '@paalan/tailwind-ui/layouts';
export const App = () => {
const [count, { increment, decrement }] = useCounter(0);
return (
Count: {count}
increment()} variant="outline" mr="2">
Increment
decrement()} variant="outline">
Decrement
);
};
```
## How to import the provider hooks
- Import the provider hooks you need from `@paalan/tailwind-ui/providers`.
```jsx
import React from 'react';
import { Box, Text } from '@paalan/tailwind-ui/layouts';
import { useTheme } from '@paalan/tailwind-ui/providers';
export const App = () => {
const { theme } = useTheme();
return (
Current theme is {theme}
);
};
```
## How to import the general hooks
- Import the hooks you need from `@paalan/tailwind-ui/hooks`.
```jsx
import React from 'react';
import { Button } from '@paalan/tailwind-ui/components';
import { useToggle } from '@paalan/tailwind-ui/hooks';
import { Box, Text } from '@paalan/tailwind-ui/layouts';
export const App = () => {
const [isOn, toggle] = useToggle();
return (
Current state is {isOn ? 'on' : 'off'}
Toggle
);
};
```
## How to import the icons
- Import the icons you need from `@paalan/tailwind-ui/icons`.
```jsx
import { AccessibilityIcon } from '@paalan/tailwind-ui/icons';
;
```