Package Exports

braid-ui-components

Readme

@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

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

braid-ui-components