@segmentify/ui 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# @segmentify/ui
|
|
2
|
+
|
|
3
|
+
A collection of reusable React UI components built with Tailwind CSS and Radix UI.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🎨 **Tailwind CSS**: Styled using Tailwind CSS for easy customization.
|
|
8
|
+
- 🧩 **Radix UI**: Built on top of Radix UI primitives for accessibility and reliability.
|
|
9
|
+
- 🎭 **Storybook**: Integrated Storybook for component development and documentation.
|
|
10
|
+
- 📦 **TypeScript**: Fully typed for a great developer experience.
|
|
11
|
+
- 🚀 **Vite**: Fast build and development workflow.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add @segmentify/ui
|
|
17
|
+
# or
|
|
18
|
+
npm install @segmentify/ui
|
|
19
|
+
# or
|
|
20
|
+
yarn add @segmentify/ui
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Peer Dependencies
|
|
24
|
+
|
|
25
|
+
Make sure you have `react`, `react-dom`, and `tailwindcss` installed in your project.
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
Import components directly from the package:
|
|
30
|
+
|
|
31
|
+
```tsx
|
|
32
|
+
import { Button } from '@segmentify/ui';
|
|
33
|
+
|
|
34
|
+
function App() {
|
|
35
|
+
return (
|
|
36
|
+
<Button onClick={() => console.log('Clicked!')}>
|
|
37
|
+
Click Me
|
|
38
|
+
</Button>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Styling
|
|
44
|
+
|
|
45
|
+
Don't forget to import the CSS in your main entry file:
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import '@segmentify/ui/dist/index.css';
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Development
|
|
52
|
+
|
|
53
|
+
### Scripts
|
|
54
|
+
|
|
55
|
+
- `pnpm dev`: Start the Vite development server.
|
|
56
|
+
- `pnpm build`: Build the library using Vite and generate TypeScript declarations.
|
|
57
|
+
- `pnpm storybook`: Start Storybook for component development.
|
|
58
|
+
- `pnpm build-storybook`: Build the Storybook documentation.
|
|
59
|
+
- `pnpm lint`: Run ESLint to check for code quality issues.
|
|
60
|
+
- `pnpm format`: Format the codebase using Prettier.
|
|
61
|
+
- `pnpm release`: Publish the package using Changesets.
|
|
62
|
+
|
|
63
|
+
### Creating Changesets
|
|
64
|
+
|
|
65
|
+
This project uses Changesets for versioning and releases. To create a new version:
|
|
66
|
+
|
|
67
|
+
1. Run `pnpm changeset`.
|
|
68
|
+
2. Select the packages to version and the type of change (patch, minor, major).
|
|
69
|
+
3. Provide a brief description of the changes.
|
|
70
|
+
4. Commit the generated changeset file.
|
|
71
|
+
|
|
72
|
+
## License
|
|
73
|
+
|
|
74
|
+
MIT
|