@segmentify/ui

A collection of reusable React UI components built with Tailwind CSS and Radix UI.

Features

- 🎨 Tailwind CSS: Styled using Tailwind CSS for easy customization.
- 🧩 Radix UI: Built on top of Radix UI primitives for accessibility and reliability.
- 🎭 Storybook: Integrated Storybook for component development and documentation.
- 📦 TypeScript: Fully typed for a great developer experience.
- 🚀 Vite: Fast build and development workflow.

Installation

``bash
pnpm add @segmentify/ui


or

npm install @segmentify/ui

or

yarn add @segmentify/ui
`

$3

Make sure you have react, react-dom, and tailwindcss installed in your project.

Usage

Import components directly from the package:

`tsx
import { Button } from '@segmentify/ui';

function App() {
return console.log('Clicked!')}>Click Me;
}
`

$3

Don't forget to import the CSS in your main entry file:

`tsx
import '@segmentify/ui/dist/ui.css';
`

Development

$3

- pnpm dev: Start the Vite development server.
- pnpm build: Build the library using Vite and generate TypeScript declarations.
- pnpm storybook: Start Storybook for component development.
- pnpm build-storybook: Build the Storybook documentation.
- pnpm lint: Run ESLint to check for code quality issues.
- pnpm format: Format the codebase using Prettier.
- pnpm release: Publish the package using Changesets.

Releasing

This project uses Changesets for versioning and releases.

$3

To publish new releases, you must have an .npmrc file in the root of the project with a valid npm authToken:

`text
@segmentify:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=YOUR_NPM_AUTH_TOKEN
`

$3

1. Create a Changeset: Run pnpm changeset and follow the prompts to document your changes.
2. Version Packages: Run pnpm version-packages to update versions and the changelog.
3. Publish: Run pnpm release` to publish the new version to npm.

License

MIT