@offlinemediainc/offline-ui

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

Installation

pnpm add @offlinemediainc/offline-ui

Setup

1. Import the styles

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

// 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:

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

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

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

3. Use components

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

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: "[email protected]" }}
      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

AI/LLM Usage

When implementing with this design system, refer to the Storybook documentation 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

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

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

Build the library

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