npm package: @offlinemediainc/offline-ui
Description: Offline Media design system components
Latest version: 0.3.3

# @offlinemediainc/offline-ui

Offline Media design system components built with React, Radix UI, and Tailwind CSS.

## Installation

```bash
pnpm add @offlinemediainc/offline-ui
```

## Setup

### 1. Import the styles

Add the theme CSS to your app's entry point:

```tsx
// app/layout.tsx or _app.tsx
import '@offlinemediainc/offline-ui/styles.css';
```

### 2. Configure Tailwind

The package uses Tailwind CSS classes that need to be generated by your app's Tailwind build.

**Tailwind CSS v4** - Add to your CSS:

```css
@import "tailwindcss";
@source "../node_modules/@offlinemediainc/offline-ui/dist/**/*.js";
```

**Tailwind CSS v3** - Add to your `tailwind.config.ts`:

```ts
export default {
  content: [
    // ... your existing content paths
    "./node_modules/@offlinemediainc/offline-ui/dist/**/*.{js,cjs}",
  ],
  // ...
}
```

### 3. Use components

```tsx
import { Button, Card, Dialog, Badge } from '@offlinemediainc/offline-ui';

export function MyComponent() {
  return (
    <Card>
      <Badge variant="success">Active</Badge>
      <Button>Click me</Button>
    </Card>
  );
}
```

## Components

### Core Components
- `Avatar`, `AvatarImage`, `AvatarFallback`
- `Badge` - with variants: default, secondary, destructive, success, warning, outline, link
- `Button` - with variants: default, destructive, outline, secondary, ghost, link
- `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`
- `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`
- `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`
- `DropdownMenu` and sub-components
- `Input`
- `Item`, `ItemGroup`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`
- `Label`
- `Separator`
- `Sheet` and sub-components
- `Sidebar` and sub-components (SidebarProvider, SidebarMenu, SidebarMenuItem, etc.)
- `Skeleton`
- `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`
- `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider`

### Next.js Components

The following components require Next.js (uses `next/image`, `next/link`, `next/navigation`):

- `OfflineSidebar` - Full application sidebar layout with Offline branding

```tsx
import { OfflineSidebar } from '@offlinemediainc/offline-ui';
import { LayoutDashboard, Settings } from 'lucide-react';

export default function Layout({ children }) {
  return (
    <OfflineSidebar
      workspace={{ name: "My App", subtitle: "Offline" }}
      user={{ name: "John Doe", email: "john@example.com" }}
      navGroups={[
        {
          label: "Main",
          items: [
            { title: "Dashboard", url: "/dashboard", icon: LayoutDashboard },
            { title: "Settings", url: "/settings", icon: Settings },
          ]
        }
      ]}
      onLogout={() => signOut()}
    >
      {children}
    </OfflineSidebar>
  );
}
```

### Utilities

- `cn()` - Class name utility (clsx + tailwind-merge)
- `useIsMobile()` - Hook for mobile breakpoint detection

## Storybook

View the component documentation: [Storybook](https://your-chromatic-url.chromatic.com)

## AI/LLM Usage

When implementing with this design system, refer to the [Storybook documentation](https://your-chromatic-url.chromatic.com) for:

- **Component usage patterns** - Each component has stories showing correct implementation
- **Design decisions** - Story descriptions document constraints and guidelines
- **Variants and props** - Interactive examples of all component options
- **Composition patterns** - How components work together (e.g., Sidebar + Breadcrumb)

The Storybook is the source of truth for how components should be used.

---

## Development

### Quick Start

```bash
# Install dependencies
pnpm install

# Start Storybook
pnpm storybook
```

Storybook will be available at http://localhost:6006

### Build the library

```bash
pnpm build:lib
```

### Project Structure

```
offline-style-guide/
├── src/                 # Library source (published to npm)
│   ├── components/      # UI components
│   ├── hooks/           # React hooks
│   ├── lib/             # Utilities
│   └── styles/          # Theme CSS
├── components/ui/       # Original components + stories
├── stories/theme/       # Theme documentation stories
├── .storybook/          # Storybook configuration
├── dist/                # Built library output
└── app/                 # Next.js demo app
```

### Tech Stack

- **Framework**: Next.js 16 + React 19
- **Styling**: Tailwind CSS v4 with CSS variables
- **Component Primitives**: Radix UI
- **Icons**: Lucide React
- **Documentation**: Storybook 10
- **Build**: tsup