Documentation

Welcome to C-Comic UI! Learn how to install and use our comic-style component library in your Next.js and React applications. Get perfectly bold, playful, and accessible UI elements right out of the box.

Installation & User Guide

Install the package via npm or yarn. This will inject the core styles, comic variables, and radices into your project.

npm install c-comic-ui

After installing, wrap your application in the ThemeProvider (if applicable) and start importing components directly.

import { Button } from "c-comic-ui";

export default function App() {
  return (
    <Button variant="default">CLASH!</Button>
  );
}

Component Usage & Code Snippets

Here is the code to implement each component.

Aspect Ratio New

A layout structure component that displays content within a desired ratio.

import { AspectRatio } from "c-comic-ui";
  
  export default function App() {
    return (
      <>
        <AspectRatio />
      </>
    );
  }

Breadcrumb New

Shows hierarchy and navigation path in a comic-themed chunky style.

import { Breadcrumb } from "c-comic-ui";
  
  export default function App() {
    return (
      <>
        <Breadcrumb />
      </>
    );
  }

Button Group New

A layout wrapper to automatically group buttons together in a single row without duplicate borders.

import { ButtonGroup } from "c-comic-ui";
  
  export default function App() {
    return (
      <>
        <ButtonGroup />
      </>
    );
  }

Calendar New

A customized, neo-brutalist date picker with interactive styling, overriding the traditional dull grid.

import { Calendar } from "c-comic-ui";
  
  export default function App() {
    return (
      <>
        <Calendar />
      </>
    );
  }

Carousel New

A native scroll-snap based horizontal gallery wrapper with custom prev/next comic buttons.

import { Carousel } from "c-comic-ui";
  
  export default function App() {
    return (
      <>
        <Carousel />
      </>
    );
  }

Chart New

A themed Recharts container and tooltip for displaying bold, high-contrast data visualizations.

import { Chart } from "c-comic-ui";
  
  export default function App() {
    return (
      <>
        <Chart />
      </>
    );
  }

Hover Card New

Pop-up preview content activated on hover, heavily bordered with pop-out shadows.

import { HoverCard } from "c-comic-ui";
  
  export default function App() {
    return (
      <>
        <HoverCard />
      </>
    );
  }

Radio Group New

Stylized radial toggles that feel interactive and responsive.

import { RadioGroup } from "c-comic-ui";
  
  export default function App() {
    return (
      <>
        <RadioGroup />
      </>
    );
  }

Scroll Area New

Custom cross-browser scrollbar area with comic aesthetics.

import { ScrollArea } from "c-comic-ui";
  
  export default function App() {
    return (
      <>
        <ScrollArea />
      </>
    );
  }

Toggle New

A stylized two-state button component with neo-brutalist interaction hints.

import { Toggle } from "c-comic-ui";
  
  export default function App() {
    return (
      <>
        <Toggle />
      </>
    );
  }

Empty State Polished UI

Keep users smiling even when there's no data.

import { Button } from "c-comic-ui";
import { Ghost, Plus } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Error Pages (404/500) Polished UI

Turn frustration into a fun storytelling moment.

import { Button } from "c-comic-ui";
import { MapIcon, Home, RefreshCcw } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Onboarding Flow Polished UI

In-app guided tours with comic-style tooltips.

import { Button } from "c-comic-ui";
import { Sparkles, ArrowRight } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Keyboard Shortcuts UI Polished UI

Power user tooltips showing keybindings in style.

// Import your components from "c-comic-ui";
import { Keyboard, Command } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      
    </>
  );
}

Theme Switcher Polished UI

Loud, chunky toggle for dark/light/system modes.

import { Button } from "c-comic-ui";
import { Sun, Moon, Monitor } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Accessibility Helpers Polished UI

Oversized focus rings & screen reader indications.

import { Button } from "c-comic-ui";
import { MousePointerClick, Accessibility, Eye, User } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Multi-Step Wizard Advanced Forms

Break complex forms into fun, bite-sized comic panels.

import { Label, Input, Button } from "c-comic-ui";
import { Check, MapPin, ArrowRight } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Label />
      <Input />
      <Button />
    </>
  );
}

Form Validation Advanced Forms

In-your-face validation states with bold colors and icons.

import { Label, Input } from "c-comic-ui";
import { AlertTriangle, CheckCircle, Check } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Label />
      <Input />
    </>
  );
}

File Upload Zone Advanced Forms

A playful drag & drop target that feels interactive.

import { Button } from "c-comic-ui";
import { UploadCloud, FileText, CheckCircle, Trash2 } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Date & Time Picker Advanced Forms

Custom date selector bypassing default browser inputs.

import { Button } from "c-comic-ui";
import { ChevronRight, Clock } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Rich Text Editor Advanced Forms

WYSIWYG layout combining a bold toolbar and content area.

import { Button } from "c-comic-ui";
import { Bold, Italic, Heading1, Heading2, ListIcon, Link2, ImageIcon, Code } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Autosave & Drafts Advanced Forms

Continuous save badges that provide peace of mind.

import { Label, Input, Button } from "c-comic-ui";
import { Cloud, Loader2 } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Label />
      <Input />
      <Button />
    </>
  );
}

Breadcrumbs Navigation & Discovery

Fun, heavily bordered block-style breadcrumbs.

// Import your components from "c-comic-ui";
import { Home, ChevronRight } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      
    </>
  );
}

Command Palette Navigation & Discovery

Cmd+K interface for global navigation and actions.

import { Badge } from "c-comic-ui";
import { Search, Calendar, Folder, Settings2 } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Badge />
    </>
  );
}

Global Search Navigation & Discovery

Search bar with live preview dropdown.

import { Input, Button, Avatar, AvatarFallback } from "c-comic-ui";
import { Search, FileBox } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Input />
      <Button />
      <Avatar />
      <AvatarFallback />
    </>
  );
}

Collapsible Sidebar Navigation & Discovery

A fun, chunky sidebar navigation for dashboards.

import { Button, Badge } from "c-comic-ui";
import { AlignLeft, Home, Compass, Star, Folder, Users, Settings2 } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
      <Badge />
    </>
  );
}

Mega Menu Navigation & Discovery

Large dropdown menu for complex site structures.

import { Button } from "c-comic-ui";
import { ChevronRight, ArrowRight, Zap, Users, ShieldCheck } from "lucide-react";
import { BarChart } from "recharts";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Login / Sign Up Auth & Security

Classic comic-style login form with social providers and hard shadows.

import { Button, Label, Input } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
      <Label />
      <Input />
    </>
  );
}

Forgot Password Auth & Security

Password recovery flow using strong borders.

import { Input, Button } from "c-comic-ui";
import { Lock, ArrowRight } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Input />
      <Button />
    </>
  );
}

Email Verification Auth & Security

A fun inbox-checking prompt.

import { Button } from "c-comic-ui";
import { Mail } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

2FA / OTP Input Auth & Security

Six-digit verification code entry.

import { Input, Button } from "c-comic-ui";
import { ShieldCheck } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Input />
      <Button />
    </>
  );
}

Device Management Auth & Security

Active sessions and connected devices list.

import { Badge, Button } from "c-comic-ui";
import { Laptop, Smartphone, Monitor } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Badge />
      <Button />
    </>
  );
}

Pricing Table SaaS & Billing

Clear and bold pricing tiers that grab the user's attention.

import { Button } from "c-comic-ui";
import { Check } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Subscription Management SaaS & Billing

Account overview panel showing current plan, dates, and upgrade paths.

import { Badge, Button } from "c-comic-ui";
import { Zap } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Badge />
      <Button />
    </>
  );
}

Billing History & Invoices SaaS & Billing

Invoice history table with comic-styled download actions.

import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Badge, Button } from "c-comic-ui";
import { Download } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Table />
      <TableHeader />
      <TableRow />
      <TableHead />
      <TableBody />
      <TableCell />
      <Badge />
      <Button />
    </>
  );
}

API Usage Meter SaaS & Billing

Visual indicator for tracking quota consumption.

import { Progress } from "c-comic-ui";
import { AlertCircle } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Progress />
    </>
  );
}

Team Roles & Permissions SaaS & Billing

Manage organization members with styled Selects and Avatars.

import { Button, Avatar, AvatarFallback, Badge, Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectItem } from "c-comic-ui";
import { Users, Trash2 } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
      <Avatar />
      <AvatarFallback />
      <Badge />
      <Select />
      <SelectTrigger />
      <SelectValue />
      <SelectContent />
      <SelectGroup />
      <SelectItem />
    </>
  );
}

API Key Management SaaS & Billing

Panel to reveal, revoke, or generate new API credentials.

import { Badge, Input, Button } from "c-comic-ui";
import { Key, Copy, Plus } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Badge />
      <Input />
      <Button />
    </>
  );
}

Model Switcher AI & LLM

A playful, heavy-bordered dropdown to select active LLM models.

import { Select, SelectTrigger, SelectValue, SelectContent, SelectGroup, SelectLabel, SelectItem } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Select />
      <SelectTrigger />
      <SelectValue />
      <SelectContent />
      <SelectGroup />
      <SelectLabel />
      <SelectItem />
    </>
  );
}

Chat Bubbles AI & LLM

Action-packed text bubbles distinguishing User and Assistant.

// Import your components from "c-comic-ui";
import { User, Bot } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      
    </>
  );
}

Code Block (with copy) AI & LLM

Syntax highlighting block with a comic-style copy button.

// Import your components from "c-comic-ui";
import { Copy } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      
    </>
  );
}

Prompt Templates AI & LLM

Grid of starting prompts for user discovery.

// Import your components from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      
    </>
  );
}

Conversation Sidebar AI & LLM

History list for AI chats with bold active states.

// Import your components from "c-comic-ui";
import { Plus, MessageSquare } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      
    </>
  );
}

Streaming Text & Indicators AI & LLM

Loading states and token usage specifically designed for LLMs.

import { Badge } from "c-comic-ui";
import { Hash } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Badge />
    </>
  );
}

Regenerate/Edit Prompt Actions AI & LLM

Pill-shaped toolbars below assistant messages for quick actions.

import { Button } from "c-comic-ui";
import { RefreshCcw, SquarePen } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Loaders & Progress Feedback

Indicate loading state with spinners, skeletons, or progress bars.

import { Progress, Skeleton } from "c-comic-ui";
import { Loader2 } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Progress />
      <Skeleton />
    </>
  );
}

Toast Notifications Feedback

Brief, non-interruptive notifications that slide in.

import { Button } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Alerts Feedback

Important messages that deserve the user's attention.

import { Alert, AlertTitle, AlertDescription } from "c-comic-ui";
import { Terminal, AlertCircle, CheckCircle2 } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Alert />
      <AlertTitle />
      <AlertDescription />
    </>
  );
}

Confirmation Dialog Feedback

Interruptive dialog for destructive actions.

import { AlertDialog, AlertDialogTrigger, Button, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <AlertDialog />
      <AlertDialogTrigger />
      <Button />
      <AlertDialogContent />
      <AlertDialogHeader />
      <AlertDialogTitle />
      <AlertDialogDescription />
      <AlertDialogFooter />
      <AlertDialogCancel />
      <AlertDialogAction />
    </>
  );
}

Inline Validation Forms

Show validation errors inline with form inputs.

import { Label, Input } from "c-comic-ui";
import { AlertCircle } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Label />
      <Input />
    </>
  );
}

Data Table Complex Data

Highly structured table for sorting, filtering, and pagination.

import { Table, TableCaption, TableHeader, TableRow, TableHead, TableBody, TableCell, Badge } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Table />
      <TableCaption />
      <TableHeader />
      <TableRow />
      <TableHead />
      <TableBody />
      <TableCell />
      <Badge />
    </>
  );
}

List View (Activity) Complex Data

Virtualization-ready list style for tracking activity or generic data.

import { Avatar, AvatarFallback } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Avatar />
      <AvatarFallback />
    </>
  );
}

Stats / KPI Block Complex Data

Important high-level metrics for dashboard homepages.

// Import your components from "c-comic-ui";
import { Target } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      
    </>
  );
}

Bar Chart Complex Data

Integrated charts (recharts) with bold comic colors.

// Import your components from "c-comic-ui";
import { ResponsiveContainer, BarChart, XAxis, Tooltip, Bar } from "recharts";

export default function App() {
  return (
    // the corresponding elements
    <>
      
    </>
  );
}

Empty State Complex Data

Playful empty states for lists with no data.

import { Button } from "c-comic-ui";
import { FileBox } from "lucide-react";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Accordion Layout/Structure

A vertically stacked set of interactive headings that each reveal a section of content.

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Accordion />
      <AccordionItem />
      <AccordionTrigger />
      <AccordionContent />
    </>
  );
}

Tabs Layout/Structure

A set of layered sections of content, displayed one at a time.

import { Tabs, TabsList, TabsTrigger, TabsContent, Button } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Tabs />
      <TabsList />
      <TabsTrigger />
      <TabsContent />
      <Button />
    </>
  );
}

Sheet / Side Panel Layout/Structure

Extends from the edges of the window to display mobile panels, drawers, or dialogs.

import { Sheet, SheetTrigger, Button, SheetContent, SheetHeader, SheetTitle, SheetDescription, Label, Input, SheetFooter } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Sheet />
      <SheetTrigger />
      <Button />
      <SheetContent />
      <SheetHeader />
      <SheetTitle />
      <SheetDescription />
      <Label />
      <Input />
      <SheetFooter />
    </>
  );
}

Resizable Panels Layout/Structure

Accessible resizable panel groups and layouts.

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <ResizablePanelGroup />
      <ResizablePanel />
      <ResizableHandle />
    </>
  );
}

Drawer (Mobile Panel) Layout/Structure

A drawer component for React, typically used on mobile for bottom-up dialogs.

import { Drawer, DrawerTrigger, Button, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerClose, DrawerFooter } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Drawer />
      <DrawerTrigger />
      <Button />
      <DrawerContent />
      <DrawerHeader />
      <DrawerTitle />
      <DrawerDescription />
      <DrawerClose />
      <DrawerFooter />
    </>
  );
}

Button Core/General

Displays a button or a component that looks like a button.

import { Button } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Button />
    </>
  );
}

Input Forms

Displays a form input field or a component that looks like an input field.

import { Input, Button } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Input />
      <Button />
    </>
  );
}

Badge Data Display

Displays a badge or a component that looks like a badge.

import { Badge } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Badge />
    </>
  );
}

Avatar Data Display

An image element with a fallback for representing the user.

import { Avatar, AvatarImage, AvatarFallback } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Avatar />
      <AvatarImage />
      <AvatarFallback />
    </>
  );
}

Checkbox & Label Forms

A control that allows the user to toggle between checked and not checked.

import { Checkbox, Label } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Checkbox />
      <Label />
    </>
  );
}

Switch Forms

A control that allows the user to toggle between checked and not checked.

import { Switch, Label } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Switch />
      <Label />
    </>
  );
}

Separator Core/General

Visually or semantically separates content.

import { Separator } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Separator />
    </>
  );
}

Skeleton Feedback

Use to show a placeholder while content is loading.

import { Skeleton } from "c-comic-ui";

export default function App() {
  return (
    // the corresponding elements
    <>
      <Skeleton />
    </>
  );
}

Timeline CLI component

npx c-comic add timeline

Token Usage Indicator CLI component

npx c-comic add token-usage

Rich Card CLI component

npx c-comic add rich-card

Code Snippet:

import { RichCard } from "@/components/comic-ui/rich-card";
import { Button } from "@/components/comic-ui/button";

export default function App() {
  return (
    <RichCard title="Super Card" description="Look at this bold UI!" image="path/to/img.png">
      <Button>Action</Button>
    </RichCard>
  );
}

Code Snippet:

import { TokenUsage } from "@/components/comic-ui/token-usage";

export default function App() {
  return (
    <TokenUsage promptTokens={420} responseTokens={1337} maxTokens={2000} />
  );
}

Code Snippet:

import { Timeline, TimelineItem } from "@/components/comic-ui/timeline";

export default function App() {
  return (
    <Timeline>
      <TimelineItem title="Started" time="10:00 AM">Started process</TimelineItem>
      <TimelineItem title="Finished" time="11:30 AM" active>Finished process!</TimelineItem>
    </Timeline>
  );
}

Components

Below is a brief description of the core components currently available in our library:

Buttons & Badges: The classic interactive elements with bold comic hover states.
Forms: Inputs, Labels, Switches, and Checkboxes with high-contrast borders.
Layouts: Accordions, Tabs, Resizable Panels, Drawers, and Sheets.
Feedback: Toast notifications (Sonner), Alerts, Alert Dialogs, Skeletons, and Progress Bars.
Complex Data: Tables, Data Lists, Data Dashboards (Recharts integration), and Empty states.

View All Component Demos