https://github.com/alex289/tailed-ui
A simple component library built with React and TailwindCSS
https://github.com/alex289/tailed-ui
library react rollup tailwindcss typescript
Last synced: 9 months ago
JSON representation
A simple component library built with React and TailwindCSS
- Host: GitHub
- URL: https://github.com/alex289/tailed-ui
- Owner: alex289
- License: mit
- Created: 2022-12-19T17:13:03.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-13T17:03:13.000Z (over 2 years ago)
- Last Synced: 2024-12-21T19:46:43.958Z (over 1 year ago)
- Topics: library, react, rollup, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://tailed-ui.vercel.app
- Size: 1.49 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Tailed-ui
### Installation
Install the package with your favorite package manager:
```
npm install tailed-ui
yarn add tailed-ui
pnpm install tailed-ui
```
### Usage
#### Stylesheet
First, you'll need to import the `index.css` CSS file distributed by the package. This should be done at the root of your project (in `index.js` or `App.tsx` of your React app) and will look like:
```tsx
import 'tailed-ui/index.css';
```
If you use Tailwindcss you can also add the tailed-ui to the contents of the tailwind configuration:
```tsx
import type { Config } from 'tailwindcss';
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/tailed-ui/dist/**/*.{js,ts,jsx,tsx,mdx}',
],
};
export default config;
```
#### Components
Usage of components (after the library installed as a dependency into another project) will look like:
```TSX
import { Button } from "tailed-ui/Button";
const App = () => (
<>
Hello I'm consuming the component library
Hello World!
>
);
export default App;
```
### Storybook
To run a live-reload Storybook server on your local machine:
```
npm run storybook
```
To export your Storybook as static files:
```
npm run storybook:export
```
You can then serve the files under `storybook-static` using S3, GitHub pages, Express etc. I've hosted this library at: https://tailed-ui.vercel.app