@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

pnpm add @segmentify/ui
# or
npm install @segmentify/ui
# or
yarn add @segmentify/ui

Peer Dependencies

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

Usage

Import components directly from the package:

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

function App() {
  return <Button onClick={() => console.log('Clicked!')}>Click Me</Button>;
}

Styling

Import the CSS in your main entry file and wrap your application (or the part using the library) with the ui-lib-root class to ensure styles are correctly applied and do not conflict with your own Tailwind CSS:

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

function App() {
  return <div className="ui-lib-root">{/* your app components */}</div>;
}

Development

Scripts

• 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.

Configuration

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

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

Process

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