npm package: @fluid-app/ui
Description: A comprehensive UI component library for Fluid Commerce applications, built on top of React and Radix UI primitives with a focus on accessibility and design consistency.
Latest version: 0.2.5

# @fluid-app/ui

A comprehensive UI component library for Fluid Commerce applications, built on top of React and Radix UI primitives with a focus on accessibility and design consistency.

## Installation

```bash
npm install @fluid-app/ui
# or
yarn add @fluid-app/ui
# or
pnpm add @fluid-app/ui
```

## Usage

Import components directly from the package:

```tsx
import { Button, Card, Tabs } from "@fluid-app/ui";

function MyComponent() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Card Title</Card.Title>
        <Card.Description>Card Description</Card.Description>
      </Card.Header>
      <Card.Content>
        <p>Card content goes here</p>
        <Button>Click Me</Button>
      </Card.Content>
    </Card>
  );
}
```

## Available Components

### Layout Components

- **Card**: A container for content with header, content, and footer sections
- **AspectRatio**: Maintains a consistent width-to-height ratio
- **Sheet**: A panel that slides in from the edge of the screen
- **Tabs**: Organizes content into separate views

### Form Components

- **Button**: Interactive button with various styles and states
- **Input**: Text input field
- **Select**: Dropdown selection component
- **Switch**: Toggle between two states
- **Label**: Accessible form labels
- **Form**: Form validation and submission components
- **Slider**: Input for selecting a value from a range

### Data Display

- **Table**: Structured data presentation
- **Accordion**: Collapsible content panels

### Feedback

- **Toast**: Non-disruptive notifications

## Styling

The components use [class-variance-authority](https://cva.style/docs) and [tailwind-merge](https://github.com/dcastil/tailwind-merge) for styling. Use the exported `cn` utility function to merge class names safely:

```tsx
import { cn } from "@fluid-app/ui";

function MyComponent({ className }) {
  return <div className={cn("base-class", className)}>Content</div>;
}
```

## Component Examples

### Button

```tsx
import { Button } from "@fluid-app/ui";

// Default button
<Button>Click Me</Button>

// Button variants
<Button variant="default">Default</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Link</Button>

// Button sizes
<Button size="default">Default Size</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>

// Disabled state
<Button disabled>Disabled</Button>
```

### Card

```tsx
import { Card } from "@fluid-app/ui";

<Card>
  <Card.Header>
    <Card.Title>Card Title</Card.Title>
    <Card.Description>Card Description</Card.Description>
  </Card.Header>
  <Card.Content>
    <p>Content goes here</p>
  </Card.Content>
  <Card.Footer>
    <p>Footer content</p>
  </Card.Footer>
</Card>;
```

### Tabs

```tsx
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@fluid-app/ui";

<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Account settings content</TabsContent>
  <TabsContent value="password">Password settings content</TabsContent>
</Tabs>;
```

## License

MIT © [Fluid Commerce](https://fluid.app)