@orsetra/shared-ui

Shared UI components library for Orsetra platform, built with React, Radix UI, and Tailwind CSS.

Installation

npm install @orsetra/shared-ui
# or
pnpm add @orsetra/shared-ui
# or
yarn add @orsetra/shared-ui

Peer Dependencies

This package requires the following peer dependencies:

npm install react react-dom

Usage

import { Button } from '@orsetra/shared-ui'
import { cn } from '@orsetra/shared-ui/lib/utils'

function App() {
  return (
    <Button variant="default" size="lg">
      Click me
    </Button>
  )
}

Components

This library includes pre-built components based on Radix UI:

• Button - Customizable button component
• Dialog - Modal dialog component
• Dropdown Menu - Dropdown menu component
• Select - Select input component
• Tabs - Tab navigation component
• Toast - Toast notification component
• Tooltip - Tooltip component
• And many more...

Utilities

cn - Class Name Utility

Merge Tailwind CSS classes with proper precedence:

import { cn } from '@orsetra/shared-ui/lib/utils'

const className = cn('px-4 py-2', 'bg-blue-500', 'hover:bg-blue-600')

Styling

This library uses Tailwind CSS. Make sure to configure your tailwind.config.js:

import sharedConfig from '@orsetra/shared-config/tailwind'

export default {
  ...sharedConfig,
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './node_modules/@orsetra/shared-ui/**/*.{js,ts,jsx,tsx}',
  ],
}

License

MIT

Repository

GitHub