@braid/ui-components

A collection of reusable UI components built with React, TypeScript, and Tailwind CSS. This package provides a comprehensive set of modern, accessible, and customizable components for building React applications.

Features

• 🎨 Modern Design: Clean, modern components with beautiful styling
• ♿ Accessible: Built with accessibility in mind using Radix UI primitives
• 🎯 TypeScript: Full TypeScript support with type definitions
• 🎨 Tailwind CSS: Styled with Tailwind CSS for easy customization
• 📦 Tree Shakeable: Import only the components you need
• 🔧 Customizable: Easy to customize with CSS variables and Tailwind classes

Installation

npm install @braid/ui-components

Usage

import { Button, Card, CardContent, CardHeader, CardTitle } from '@braid/ui-components'

function App() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Button>Click me</Button>
      </CardContent>
    </Card>
  )
}

Available Components

Layout & Structure

• Card - Container for content
• Separator - Visual divider
• AspectRatio - Maintain aspect ratio
• Resizable - Resizable panels
• Sidebar - Sidebar navigation

Navigation

• NavigationMenu - Main navigation
• Menubar - Menu bar
• Breadcrumb - Breadcrumb navigation
• Pagination - Page navigation

Forms & Input

• Button - Clickable button
• Input - Text input field
• Textarea - Multi-line text input
• Select - Dropdown selection
• Checkbox - Checkbox input
• RadioGroup - Radio button group
• Switch - Toggle switch
• Slider - Range slider
• InputOTP - One-time password input
• Form - Form components with validation

Data Display

• Table - Data table
• Badge - Status badge
• Avatar - User avatar
• Skeleton - Loading skeleton
• Progress - Progress indicator
• Chart - Data visualization

Feedback

• Alert - Alert message
• Toast - Toast notifications
• Dialog - Modal dialog
• AlertDialog - Confirmation dialog
• Sheet - Slide-out panel
• Drawer - Mobile drawer
• Popover - Floating content
• Tooltip - Hover tooltip
• HoverCard - Hover card

Interactive

• Accordion - Collapsible content
• Collapsible - Show/hide content
• Tabs - Tabbed interface
• Command - Command palette
• Calendar - Date picker
• Carousel - Image/content carousel
• Toggle - Toggle button
• ToggleGroup - Group of toggles

Overlays

• DropdownMenu - Dropdown menu
• ContextMenu - Right-click menu
• ScrollArea - Custom scrollbar

Hooks

• useToast - Toast notifications
• useIsMobile - Mobile detection

Utilities

• cn - Class name utility (clsx + tailwind-merge)

Requirements

This package requires the following peer dependencies:

• React 18+
• React DOM 18+
• Tailwind CSS
• Various Radix UI packages (see package.json dependencies)

Styling

The components are styled with Tailwind CSS. Make sure to include Tailwind CSS in your project and configure it properly. The components use CSS variables for theming, which you can customize in your CSS:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... more variables */
}

License

MIT