A collection of reusable React UI components built with Tailwind CSS and Radix UI
npm install @segmentify/uiA collection of reusable React UI components built with Tailwind CSS and Radix UI.
- 🎨 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.
``bash`
pnpm add @segmentify/uior
npm install @segmentify/uior
yarn add @segmentify/ui
Make sure you have react, react-dom, and tailwindcss installed in your project.
Import components directly from the package:
`tsx
import { Button } from '@segmentify/ui';
function App() {
return ;
}
`
Don't forget to import the CSS in your main entry file:
`tsx`
import '@segmentify/ui/dist/ui.css';
- 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.
This project uses Changesets for versioning and releases.
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
1. Create a Changeset: Run pnpm changeset and follow the prompts to document your changes.pnpm version-packages
2. Version Packages: Run to update versions and the changelog.pnpm release` to publish the new version to npm.
3. Publish: Run
MIT