Prism Design System

A modern, accessible, and customizable React component library built with Tailwind CSS by Uprock.

Features

• 🎨 Comprehensive Component Library: Button, Card, Input, Modal, Radio, Select, Sidebar, Switch, Table, Tabs, and more
• 🎯 Accessibility First: Built with accessibility in mind using Radix UI primitives
• 🎨 Themeable: Customizable colors and styles
• 📦 TypeScript Support: Fully typed components
• 🎨 Tailwind CSS: Built with Tailwind for consistent styling
• 📚 Storybook Documentation: Interactive component documentation

Installation

npm install @uprock/prism-ui

Quick Start

1. Import the styles in your app's entry point (e.g., App.tsx or main.tsx):

import '@uprock/prism-ui/style';

2. Use the components in your app:

import { Button, Card, Input } from '@uprock/prism-ui';

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Card>
        <Card.Title>Welcome</Card.Title>
        <Card.Content>This is a card</Card.Content>
      </Card>
      <Input label="Enter text" />
    </div>
  );
}

Components

Basic Components

• Avatar - User avatar component
• Banner - Notification banner component
• Breadcrumb - Navigation breadcrumb component
• Button - Versatile button component with multiple variants
• Card - Flexible card component for content display
• Divider - Horizontal/vertical divider component
• Input - Form input component with validation support
• Loading - Loading spinner component
• Modal - Dialog/modal component
• Pagination - Pagination component
• Progress - Progress bar component
• Radio - Radio button component
• Select - Dropdown select component
• Sidebar - Navigation sidebar
• Switch - Toggle switch component
• Table - Data table component
• Tabs - Tabbed interface component

Styling

Prism uses Tailwind CSS for styling. You can customize the theme by:

1. Extending the Tailwind config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        // Your custom colors
      },
    },
  },
}

2. Importing the base styles:

import '@uprock/prism-ui/style';

Development

Setup

1. Clone the repository
2. Install dependencies:

npm install

3. Start Storybook:

npm run storybook

Building Storybook

npm run build-storybook

Since this build don't change anything on the package behavior, should be committed using the flag chore or docs, so the publishing process is not triggered.

Publishing

The publishing process is automated using GitHub Actions.

To publish a new feature or a bugfix use conventional commits to trigger the workflow, feat/feature for new features and fix/bugfix for bug fixes.

After the workflow is triggered, it will build and publish the package to npm and automatically create a minor or patch release on GitHub Releases and use the commit messages as changelog, so it should be descriptive enough.

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT © Uprock Prism