0.2.4 • Published 5 months ago
@fluid-app/ui v0.2.4
@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