@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

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

Usage

Import components directly from the package:

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 and tailwind-merge for styling. Use the exported cn utility function to merge class names safely:

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

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

Component Examples

Button

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

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

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