Examples

Build complete surfaces from small components.

Explore application layouts composed from April UI primitives. Copy the structure, then make it yours.

Dashboard

A responsive workspace with navigation, metrics, activity, and recent sales.

Dashboard example
Component Code 
<div class="overflow-hidden rounded-xl border bg-background shadow-sm">
    <april:sidebar-layout>
        <april:sidebar collapsible="none" class="border-r">
            <slot:header>
                <div class="flex items-center gap-2 px-2 py-1">
                    <div class="flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground">
                        <x-lucide-layers-3 class="h-4 w-4" />
                    </div>
                    <span class="font-semibold">April UI</span>
                </div>
            </slot:header>
            <slot:content>
                <april:sidebar-group>
                    <april:sidebar-group-label>Workspace</april:sidebar-group-label>
                    <april:sidebar-group-content>
                        <april:sidebar-menu>
                            <april:sidebar-menu-item>
                                <april:sidebar-menu-button-link href="#" :active="true">
                                    <x-lucide-layout-dashboard />
                                    <span>Overview</span>
                                </april:sidebar-menu-button-link>
                            </april:sidebar-menu-item>
                            <april:sidebar-menu-item>
                                <april:sidebar-menu-button-link href="#">
                                    <x-lucide-inbox />
                                    <span>Inbox</span>
                                    <april:sidebar-menu-badge>12</april:sidebar-menu-badge>
                                </april:sidebar-menu-button-link>
                            </april:sidebar-menu-item>
                            <april:sidebar-menu-item>
                                <april:sidebar-menu-button-link href="#">
                                    <x-lucide-calendar />
                                    <span>Calendar</span>
                                </april:sidebar-menu-button-link>
                            </april:sidebar-menu-item>
                        </april:sidebar-menu>
                    </april:sidebar-group-content>
                </april:sidebar-group>
                <april:sidebar-group>
                    <april:sidebar-group-label>Manage</april:sidebar-group-label>
                    <april:sidebar-group-content>
                        <april:sidebar-menu>
                            <april:sidebar-menu-item>
                                <april:sidebar-menu-button-link href="#">
                                    <x-lucide-users />
                                    <span>Team</span>
                                </april:sidebar-menu-button-link>
                            </april:sidebar-menu-item>
                            <april:sidebar-menu-item>
                                <april:sidebar-menu-button-link href="#">
                                    <x-lucide-settings />
                                    <span>Settings</span>
                                </april:sidebar-menu-button-link>
                            </april:sidebar-menu-item>
                        </april:sidebar-menu>
                    </april:sidebar-group-content>
                </april:sidebar-group>
            </slot:content>
            <slot:footer>
                <div class="flex items-center gap-2 px-2 py-1">
                    <div
                        class="flex h-8 w-8 items-center justify-center rounded-full border bg-muted text-xs font-medium">
                        PD</div>
                    <div class="min-w-0 text-sm">
                        <p class="truncate font-medium">Pedro Duarte</p>
                        <p class="truncate text-xs text-muted-foreground">pedro@example.com</p>
                    </div>
                </div>
            </slot:footer>
        </april:sidebar>
 
        <april:sidebar-inset>
            <header class="flex h-14 items-center justify-between border-b px-4 lg:px-6">
                <div class="flex items-center gap-2">
                    <april:sidebar-trigger />
                    <span class="text-sm text-muted-foreground">Overview</span>
                </div>
                <april:button size="sm">
                    <x-lucide-plus class="mr-2 h-4 w-4" />
                    New project
                </april:button>
            </header>
 
            <main class="space-y-6 p-4 lg:p-6">
                <div>
                    <h2 class="text-2xl font-semibold tracking-tight">Good morning, Pedro</h2>
                    <p class="text-sm text-muted-foreground">Here is a summary of your workspace.</p>
                </div>
 
                <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                    <april:card>
                        <slot:title class="text-sm font-medium">Total revenue</slot:title>
                        <slot:content>
                            <div class="text-2xl font-bold">$45,231.89</div>
                            <p class="text-xs text-muted-foreground">+20.1% from last month</p>
                        </slot:content>
                    </april:card>
                    <april:card>
                        <slot:title class="text-sm font-medium">Subscriptions</slot:title>
                        <slot:content>
                            <div class="text-2xl font-bold">+2,350</div>
                            <p class="text-xs text-muted-foreground">+180.1% from last month</p>
                        </slot:content>
                    </april:card>
                    <april:card>
                        <slot:title class="text-sm font-medium">Sales</slot:title>
                        <slot:content>
                            <div class="text-2xl font-bold">+12,234</div>
                            <p class="text-xs text-muted-foreground">+19% from last month</p>
                        </slot:content>
                    </april:card>
                    <april:card>
                        <slot:title class="text-sm font-medium">Active now</slot:title>
                        <slot:content>
                            <div class="text-2xl font-bold">+573</div>
                            <p class="text-xs text-muted-foreground">+201 since last hour</p>
                        </slot:content>
                    </april:card>
                </div>
 
                <div class="grid gap-4 lg:grid-cols-7">
                    <april:card class="lg:col-span-4">
                        <slot:title>Recent activity</slot:title>
                        <slot:description>Your team shipped 12 updates this week.</slot:description>
                        <slot:content>
                            <div class="space-y-4">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="flex h-8 w-8 items-center justify-center rounded-full border bg-muted text-xs font-medium">
                                        AM</div>
                                    <div class="flex-1 text-sm">
                                        <p class="font-medium">Alex Morgan</p>
                                        <p class="text-muted-foreground">Updated the billing flow</p>
                                    </div>
                                    <span class="text-xs text-muted-foreground">2m ago</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <div
                                        class="flex h-8 w-8 items-center justify-center rounded-full border bg-muted text-xs font-medium">
                                        JP</div>
                                    <div class="flex-1 text-sm">
                                        <p class="font-medium">Jamie Park</p>
                                        <p class="text-muted-foreground">Published a new component</p>
                                    </div>
                                    <span class="text-xs text-muted-foreground">1h ago</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <div
                                        class="flex h-8 w-8 items-center justify-center rounded-full border bg-muted text-xs font-medium">
                                        SR</div>
                                    <div class="flex-1 text-sm">
                                        <p class="font-medium">Sam Rivera</p>
                                        <p class="text-muted-foreground">Invited a new teammate</p>
                                    </div>
                                    <span class="text-xs text-muted-foreground">3h ago</span>
                                </div>
                            </div>
                        </slot:content>
                    </april:card>
                    <april:card class="lg:col-span-3">
                        <slot:title>Recent sales</slot:title>
                        <slot:description>You made 265 sales this month.</slot:description>
                        <slot:content>
                            <div class="space-y-4">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="flex h-8 w-8 items-center justify-center rounded-full border bg-muted text-xs font-medium">
                                        OM</div>
                                    <div class="min-w-0 flex-1">
                                        <p class="truncate text-sm font-medium">Olivia Martin</p>
                                        <p class="truncate text-xs text-muted-foreground">olivia@example.com</p>
                                    </div><span class="text-sm font-medium">+$1,999.00</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <div
                                        class="flex h-8 w-8 items-center justify-center rounded-full border bg-muted text-xs font-medium">
                                        JL</div>
                                    <div class="min-w-0 flex-1">
                                        <p class="truncate text-sm font-medium">Jackson Lee</p>
                                        <p class="truncate text-xs text-muted-foreground">jackson@example.com</p>
                                    </div><span class="text-sm font-medium">+$39.00</span>
                                </div>
                                <div class="flex items-center gap-3">
                                    <div
                                        class="flex h-8 w-8 items-center justify-center rounded-full border bg-muted text-xs font-medium">
                                        IW</div>
                                    <div class="min-w-0 flex-1">
                                        <p class="truncate text-sm font-medium">Isabella Wong</p>
                                        <p class="truncate text-xs text-muted-foreground">isabella@example.com</p>
                                    </div><span class="text-sm font-medium">+$299.00</span>
                                </div>
                            </div>
                        </slot:content>
                    </april:card>
                </div>
            </main>
        </april:sidebar-inset>
    </april:sidebar-layout>
</div>

Sign-in form

A focused authentication surface with inputs, actions, and supporting copy.

Sign-in form example
Component Code 
<div class="flex min-h-[520px] items-center justify-center bg-muted/20 p-6">
    <april:card class="w-full max-w-md">
        <slot:title>Welcome back</slot:title>
        <slot:description>Enter your email to sign in to your account.</slot:description>
        <slot:content>
            <form class="space-y-5">
                <div class="space-y-2">
                    <april:label for="example-email">Email</april:label>
                    <april:input id="example-email" type="email" autocomplete="email" placeholder="you@example.com"
                        class="w-full" />
                </div>
                <div class="space-y-2">
                    <div class="flex items-center justify-between">
                        <april:label for="example-password">Password</april:label>
                        <april:button-link href="#" variant="link" size="none" class="text-xs">Forgot
                            password?</april:button-link>
                    </div>
                    <april:input id="example-password" type="password" autocomplete="current-password" class="w-full" />
                </div>
                <div class="flex items-center gap-2">
                    <april:checkbox id="example-remember" />
                    <april:label for="example-remember" class="text-sm font-normal">Remember me</april:label>
                </div>
                <april:button class="w-full" type="button">Sign in</april:button>
            </form>
            <div class="relative my-6">
                <april:separator />
                <span
                    class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-2 text-xs text-muted-foreground">
                    or continue with
                </span>
            </div>
            <april:button variant="outline" class="w-full" type="button">
                <x-lucide-github class="mr-2 h-4 w-4" /> GitHub
            </april:button>
        </slot:content>
        <slot:footer class="justify-center text-xs text-muted-foreground">
            By continuing, you agree to our Terms of Service and Privacy Policy.
        </slot:footer>
    </april:card>
</div>

Settings

Organize account preferences with tabs, form controls, and clear save actions.

Settings example
Component Code 
<div class="bg-muted/20 p-4 md:p-8">
    <april:tabs defaultValue="account" class="mx-auto w-full max-w-3xl">
        <slot:list class="grid w-full grid-cols-3">
            <april:tabs-trigger value="account">Account</april:tabs-trigger>
            <april:tabs-trigger value="notifications">Notifications</april:tabs-trigger>
            <april:tabs-trigger value="appearance">Appearance</april:tabs-trigger>
        </slot:list>
 
        <april:tabs-content value="account">
            <april:card class="mt-4">
                <slot:title>Account</slot:title>
                <slot:description>Update your account details and public profile.</slot:description>
                <slot:content class="space-y-4">
                    <div class="grid gap-4 md:grid-cols-2">
                        <div class="space-y-2">
                            <april:label for="settings-name">Name</april:label>
                            <april:input id="settings-name" value="Pedro Duarte" />
                        </div>
                        <div class="space-y-2">
                            <april:label for="settings-username">Username</april:label>
                            <april:input id="settings-username" value="@peduarte" />
                        </div>
                    </div>
                    <div class="space-y-2">
                        <april:label for="settings-bio">Bio</april:label>
                        <april:textarea id="settings-bio" class="w-full" placeholder="Tell us a little about yourself.">
                            Product designer and Laravel artisan.</april:textarea>
                    </div>
                </slot:content>
                <slot:footer>
                    <april:button type="button">Save changes</april:button>
                </slot:footer>
            </april:card>
        </april:tabs-content>
 
        <april:tabs-content value="notifications">
            <april:card class="mt-4">
                <slot:title>Notifications</slot:title>
                <slot:description>Choose which updates you want to receive.</slot:description>
                <slot:content class="space-y-5">
                    <div class="flex items-center justify-between gap-4">
                        <div>
                            <april:label for="email-updates" class="font-medium">Email updates</april:label>
                            <p class="text-sm text-muted-foreground">Receive product
                                and account updates.</p>
                        </div>
                        <april:switch id="email-updates" />
                    </div>
                    <april:separator />
                    <div class="flex items-center justify-between gap-4">
                        <div>
                            <april:label for="weekly-digest" class="font-medium">Weekly digest</april:label>
                            <p class="text-sm text-muted-foreground">Get a summary
                                of workspace activity.</p>
                        </div>
                        <april:switch id="weekly-digest" />
                    </div>
                </slot:content>
                <slot:footer>
                    <april:button type="button">Save preferences</april:button>
                </slot:footer>
            </april:card>
        </april:tabs-content>
 
        <april:tabs-content value="appearance">
            <april:card class="mt-4">
                <slot:title>Appearance</slot:title>
                <slot:description>Set the visual style for your workspace.</slot:description>
                <slot:content class="space-y-4">
                    <div class="space-y-2">
                        <april:label for="settings-theme">Theme</april:label>
                        <april:select id="settings-theme">
                            <option>System</option>
                            <option>Light</option>
                            <option>Dark</option>
                        </april:select>
                    </div>
                    <div class="space-y-2">
                        <april:label for="settings-density">Density</april:label>
                        <april:select id="settings-density">
                            <option>Comfortable</option>
                            <option>Compact</option>
                        </april:select>
                    </div>
                </slot:content>
                <slot:footer>
                    <april:button type="button">Update appearance</april:button>
                </slot:footer>
            </april:card>
        </april:tabs-content>
    </april:tabs>
</div>

Command center

Pair command menus with quick actions for dense application workflows.

Command center example
Component Code 
<div class="bg-muted/20 p-4 md:p-8">
    <div class="mx-auto grid max-w-3xl gap-4 md:grid-cols-[1.35fr_1fr]">
        <april:command class="rounded-lg border shadow-sm">
            <slot:input placeholder="Search commands..." />
            <slot:empty>No commands found.</slot:empty>
            <slot:list>
                <april:command-group heading="Suggestions">
                    <april:command-item><x-lucide-plus class="mr-2 h-4 w-4" />Create
                        project<april:command-shortcut>⌘N</april:command-shortcut></april:command-item>
                    <april:command-item><x-lucide-search class="mr-2 h-4 w-4" />Search
                        workspace<april:command-shortcut>⌘K</april:command-shortcut></april:command-item>
                    <april:command-item><x-lucide-upload class="mr-2 h-4 w-4" />Import data</april:command-item>
                </april:command-group>
                <april:command-separator />
                <april:command-group heading="Navigation">
                    <april:command-item><x-lucide-layout-dashboard class="mr-2 h-4 w-4" />Overview</april:command-item>
                    <april:command-item><x-lucide-settings class="mr-2 h-4 w-4" />Settings</april:command-item>
                </april:command-group>
            </slot:list>
        </april:command>
        <div class="space-y-4">
            <april:card>
                <slot:title>Quick actions</slot:title>
                <slot:description>Keep frequent tasks close at hand.</slot:description>
                <slot:content class="grid gap-2">
                    <april:button variant="outline" class="justify-start" type="button"><x-lucide-plus
                            class="mr-2 h-4 w-4" />New project</april:button>
                    <april:button variant="outline" class="justify-start" type="button"><x-lucide-user-plus
                            class="mr-2 h-4 w-4" />Invite teammate</april:button>
                </slot:content>
            </april:card>
            <april:alert>
                <slot:icon><x-lucide-lightbulb class="h-4 w-4" /></slot:icon>
                <slot:title>Keyboard friendly</slot:title>
                <slot:description>Use ⌘K to open this command center from anywhere.</slot:description>
            </april:alert>
        </div>
    </div>
</div>

Activity feed

A compact feed using avatars, badges, alerts, and separators.

Activity feed example
Component Code 
<div class="bg-muted/20 p-4 md:p-8">
    <div class="mx-auto max-w-2xl space-y-4">
        <april:alert>
            <slot:icon><x-lucide-check-circle-2 class="h-4 w-4" /></slot:icon>
            <slot:title>All caught up</slot:title>
            <slot:description>Your team has no unread activity.</slot:description>
        </april:alert>
        <april:card>
            <slot:title>Recent activity</slot:title>
            <slot:description>Updates from your workspace.</slot:description>
            <slot:content class="space-y-5">
                @foreach ([
                    ['initials' => 'AM', 'name' => 'Alex Morgan', 'action' => 'updated the billing flow', 'time' => '2m ago', 'badge' => 'Billing'],
                    ['initials' => 'JP', 'name' => 'Jamie Park', 'action' => 'published a new component', 'time' => '1h ago', 'badge' => 'Components'],
                    ['initials' => 'SR', 'name' => 'Sam Rivera', 'action' => 'invited a new teammate', 'time' => '3h ago', 'badge' => 'Team'],
                ] as $activity)
                <div class="flex items-start gap-3">
                    <april:avatar size="sm"><slot:fallback>{{$activity['initials']}}</slot:fallback></april:avatar>
                    <div class="min-w-0 flex-1">
                        <p class="text-sm"><span class="font-medium">{{$activity['name']}}</span> {{$activity['action']}}</p>
                        <div class="mt-1 flex items-center gap-2"><april:badge variant="secondary">{{$activity['badge']}}</april:badge><span
                                class="text-xs text-muted-foreground">{{$activity['time']}}</span></div>
                    </div>
                </div>
                @if (!$loop->last)<april:separator />@endif
                @endforeach
            </slot:content>
        </april:card>
    </div>
</div>

Analytics overview

Metric cards, responsive charts, and a focused channel breakdown.

Analytics growth overview example
Component Code 
@php
    $traffic = [
        ['month' => 'Jan', 'visitors' => 1860, 'conversions' => 420],
        ['month' => 'Feb', 'visitors' => 2230, 'conversions' => 540],
        ['month' => 'Mar', 'visitors' => 1980, 'conversions' => 510],
        ['month' => 'Apr', 'visitors' => 2780, 'conversions' => 720],
        ['month' => 'May', 'visitors' => 3250, 'conversions' => 860],
        ['month' => 'Jun', 'visitors' => 3010, 'conversions' => 810],
    ];
 
    $trafficConfig = [
        'visitors' => ['label' => 'Visitors', 'color' => 'var(--chart-1)'],
        'conversions' => ['label' => 'Conversions', 'color' => 'var(--chart-2)'],
    ];
@endphp
 
<div class="bg-muted/20 p-4 md:p-8">
    <div class="mx-auto max-w-5xl space-y-5">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <div>
                <p class="text-sm font-medium text-primary">Analytics</p>
                <h3 class="text-xl font-semibold tracking-tight">Growth overview</h3>
            </div>
            <div class="flex gap-2">
                <april:button variant="outline" size="sm" type="button"><x-lucide-download class="mr-2 h-4 w-4" />Export</april:button>
                <april:button size="sm" type="button">View report</april:button>
            </div>
        </div>
 
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            @foreach ([['Revenue', '$45,231.89', '+20.1%', 'text-emerald-600'], ['Active users', '2,350', '+18.2%', 'text-emerald-600'], ['Conversion rate', '3.42%', '+0.6%', 'text-emerald-600'], ['Avg. session', '4m 32s', '-2.1%', 'text-destructive']] as [$label, $value, $change, $changeClass])
                <april:card>
                    <slot:title class="text-sm font-medium">{{$label}}</slot:title>
                    <slot:content>
                        <p class="text-2xl font-bold tracking-tight">{{$value}}</p>
                        <p class="mt-1 text-xs text-muted-foreground"><span class="{{$changeClass}}">{{$change}}</span> from last month</p>
                    </slot:content>
                </april:card>
            @endforeach
        </div>
 
        <div class="grid gap-4 lg:grid-cols-5">
            <april:chart label="Traffic and conversions" :data="$traffic" :config="$trafficConfig" xKey="month" type="area" class="lg:col-span-3">
                <slot:header>
                    <h4 class="font-semibold">Traffic and conversions</h4>
                    <p class="text-sm text-muted-foreground">A six-month view of acquisition performance.</p>
                </slot:header>
            </april:chart>
            <april:card class="lg:col-span-2">
                <slot:title>Top channels</slot:title>
                <slot:description>Where new visitors came from this month.</slot:description>
                <slot:content class="space-y-5">
                    @foreach ([['Direct', '42%', 'bg-primary'], ['Organic search', '31%', 'bg-chart-2'], ['Referral', '18%', 'bg-chart-3'], ['Social', '9%', 'bg-chart-4']] as [$channel, $share, $color])
                        <div class="space-y-2">
                            <div class="flex items-center justify-between text-sm"><span>{{$channel}}</span><span class="font-medium">{{$share}}</span></div>
                            <div class="h-2 overflow-hidden rounded-full bg-muted"><div class="h-full rounded-full {{$color}}" style="width: {{$share}}"></div></div>
                        </div>
                    @endforeach
                </slot:content>
            </april:card>
        </div>
    </div>
</div>

Team directory

An interactive member list built with the April data table, avatars, and status states.

Team directory example
Component Code 
@php
    $people = [
        ['id' => 1, 'name' => 'Olivia Martin', 'email' => 'olivia@example.com', 'role' => 'Owner', 'status' => 'Active', 'initials' => 'OM'],
        ['id' => 2, 'name' => 'Jackson Lee', 'email' => 'jackson@example.com', 'role' => 'Engineering', 'status' => 'Active', 'initials' => 'JL'],
        ['id' => 3, 'name' => 'Isabella Nguyen', 'email' => 'isabella@example.com', 'role' => 'Design', 'status' => 'Invited', 'initials' => 'IN'],
        ['id' => 4, 'name' => 'William Kim', 'email' => 'william@example.com', 'role' => 'Support', 'status' => 'Active', 'initials' => 'WK'],
        ['id' => 5, 'name' => 'Sofia Davis', 'email' => 'sofia@example.com', 'role' => 'Marketing', 'status' => 'Away', 'initials' => 'SD'],
    ];
 
    $columns = [
        ['key' => 'name', 'label' => 'Member', 'sortable' => true],
        ['key' => 'role', 'label' => 'Role', 'sortable' => true],
        ['key' => 'status', 'label' => 'Status'],
    ];
@endphp
 
<div class="bg-muted/20 p-4 md:p-8">
    <april:card class="mx-auto max-w-5xl">
        <slot:title class="flex items-center justify-between gap-4">Team members <april:button size="sm" type="button"><x-lucide-user-plus class="mr-2 h-4 w-4" />Invite member</april:button></slot:title>
        <slot:description>Manage who can access your workspace and their role.</slot:description>
        <slot:content>
            <april:data-table :data="$people" :columns="$columns" searchable selectable paginated :per-page="3">
                <slot:cell-name>
                    <div class="flex min-w-48 items-center gap-3">
                        <april:avatar size="sm"><slot:fallback x-text="row.initials"></slot:fallback></april:avatar>
                        <div class="min-w-0"><p class="truncate font-medium" x-text="row.name"></p><p class="truncate text-xs text-muted-foreground" x-text="row.email"></p></div>
                    </div>
                </slot:cell-name>
                <slot:cell-status>
                    <span class="inline-flex items-center gap-1.5 text-sm"><span class="size-1.5 rounded-full" :class="row.status === 'Active' ? 'bg-emerald-500' : row.status === 'Invited' ? 'bg-amber-500' : 'bg-muted-foreground'"></span><span x-text="row.status"></span></span>
                </slot:cell-status>
                <slot:actions><april:button variant="ghost" size="sm" type="button" aria-label="More actions"><x-lucide-ellipsis class="h-4 w-4" /></april:button></slot:actions>
            </april:data-table>
        </slot:content>
    </april:card>
</div>

Daily planner

Pair the calendar with task cards to make a compact planning workspace.

Daily planner example
Component Code 
<div class="bg-muted/20 p-4 md:p-8">
    <div class="mx-auto grid max-w-5xl gap-4 lg:grid-cols-[auto_1fr]">
        <april:calendar selected="2026-08-24" />
        <april:card>
            <slot:title class="flex items-center justify-between">Monday, August 24 <april:button size="sm" type="button"><x-lucide-plus class="mr-2 h-4 w-4" />New task</april:button></slot:title>
            <slot:description>Three tasks are scheduled for today.</slot:description>
            <slot:content class="space-y-3">
                @foreach ([['09:30', 'Design critique', 'Review the onboarding prototype with the product team.', 'Design', 'bg-violet-500'], ['13:00', 'Customer interview', 'Listen in on the Acme discovery call.', 'Research', 'bg-sky-500'], ['16:30', 'Weekly planning', 'Prioritize the next release and assign owners.', 'Planning', 'bg-amber-500']] as [$time, $title, $description, $tag, $color])
                    <div class="flex gap-4 rounded-lg border p-3 transition-colors hover:bg-muted/50">
                        <span class="w-10 pt-0.5 text-xs font-medium text-muted-foreground">{{$time}}</span>
                        <span class="mt-1.5 size-2 shrink-0 rounded-full {{$color}}"></span>
                        <div class="min-w-0 flex-1"><p class="font-medium">{{$title}}</p><p class="mt-1 text-sm text-muted-foreground">{{$description}}</p><april:badge variant="secondary" class="mt-2">{{$tag}}</april:badge></div>
                        <april:button variant="ghost" size="sm" type="button" aria-label="Task options"><x-lucide-ellipsis class="h-4 w-4" /></april:button>
                    </div>
                @endforeach
            </slot:content>
        </april:card>
    </div>
</div>

Conversation workspace

A lightweight message thread that combines bubbles, avatars, badges, and a reply composer.

Conversation workspace example
Component Code 
<div class="bg-muted/20 p-4 md:p-8">
    <april:card class="mx-auto max-w-3xl overflow-hidden">
        <slot:title class="flex items-center gap-3"><april:avatar size="sm"><slot:fallback>AM</slot:fallback></april:avatar><span>Alex Morgan</span><april:badge variant="secondary" class="ml-auto">Online</april:badge></slot:title>
        <slot:description>Product design · #onboarding</slot:description>
        <slot:content class="border-y bg-muted/20 py-5">
            <april:bubble-group>
                <april:bubble variant="secondary">The latest onboarding prototype is ready for review.</april:bubble>
                <april:bubble variant="secondary">I moved the account step before team setup so the path feels shorter.</april:bubble>
                <april:bubble align="end">That makes sense. The empty-state copy reads much better now too.<slot:reactions><april:bubble-reactions>👍 2</april:bubble-reactions></slot:reactions></april:bubble>
                <april:bubble variant="secondary">Great. I will share the final link before the design critique.</april:bubble>
            </april:bubble-group>
        </slot:content>
        <slot:footer class="block">
            <div class="flex items-end gap-2"><april:textarea class="min-h-20 flex-1" placeholder="Write a reply..."></april:textarea><april:button type="button" size="icon" aria-label="Send message"><x-lucide-send class="h-4 w-4" /></april:button></div>
        </slot:footer>
    </april:card>
</div>

Used across these examples

Sidebar
Card
Button
Input
Tabs
Command
Avatar
Badge
Alert
Chart
Data Table
Calendar
Bubble