Zaidan

https://zaidan.carere.dev/docs
Admin
Zaidan is a collection of accessible UI components and blocks for SolidJS built around the shadcn...
Tokens:416,578
Snippets:2,752
Trust Score:5.4
Update:1 month ago
Show doc for...
Tokens:
Raw
### Install with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/dropdown-menu

Install the @zaidan/dropdown-menu component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/dropdown-menu
```

--------------------------------

### Install with npx

Source: https://zaidan.carere.dev/docs/components/kobalte/dropdown-menu

Install the @zaidan/dropdown-menu component using npx.

```bash
npx shadcn@latest add @zaidan/dropdown-menu
```

--------------------------------

### Install with yarn

Source: https://zaidan.carere.dev/docs/components/kobalte/dropdown-menu

Install the @zaidan/dropdown-menu component using yarn.

```bash
yarn dlx shadcn@latest add @zaidan/dropdown-menu
```

--------------------------------

### Install with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/menubar

Install the @zaidan/menubar component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/menubar
```

--------------------------------

### Install with npx

Source: https://zaidan.carere.dev/docs/components/kobalte/menubar

Install the @zaidan/menubar component using npx.

```bash
npx shadcn@latest add @zaidan/menubar
```

--------------------------------

### Install with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/progress

Install the progress component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/progress
```

--------------------------------

### Install with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/native-select

Install the NativeSelect component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/native-select
```

--------------------------------

### Install with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/context-menu

Install the @zaidan/context-menu component using bunx.

```bash
bunx --bun shadcn@latest add @zaidan/context-menu
```

--------------------------------

### Install with yarn

Source: https://zaidan.carere.dev/docs/components/kobalte/menubar

Install the @zaidan/menubar component using yarn.

```bash
yarn dlx shadcn@latest add @zaidan/menubar
```

--------------------------------

### Install with pnpm

Source: https://zaidan.carere.dev/docs/components/kobalte/dropdown-menu

Install the @zaidan/dropdown-menu component using pnpm.

```bash
pnpm dlx shadcn@latest add @zaidan/dropdown-menu
```

--------------------------------

### Install with npm

Source: https://zaidan.carere.dev/docs/components/kobalte/context-menu

Install the @zaidan/context-menu component using npx.

```bash
npx shadcn@latest add @zaidan/context-menu
```

--------------------------------

### Install with pnpm

Source: https://zaidan.carere.dev/docs/components/kobalte/menubar

Install the @zaidan/menubar component using pnpm.

```bash
pnpm dlx shadcn@latest add @zaidan/menubar
```

--------------------------------

### Install with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/input-group

Install the input-group component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/input-group
```

--------------------------------

### Install with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/empty

Installs the @zaidan/empty component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/empty
```

--------------------------------

### Install with npm

Source: https://zaidan.carere.dev/docs/components/kobalte/progress

Install the progress component using npm.

```bash
npx shadcn@latest add @zaidan/progress
```

--------------------------------

### Install with yarn

Source: https://zaidan.carere.dev/docs/components/kobalte/progress

Install the progress component using yarn.

```bash
yarn dlx shadcn@latest add @zaidan/progress
```

--------------------------------

### Install with npm

Source: https://zaidan.carere.dev/docs/components/kobalte/empty

Installs the @zaidan/empty component using npm.

```bash
npx shadcn@latest add @zaidan/empty
```

--------------------------------

### Install with pnpm

Source: https://zaidan.carere.dev/docs/components/kobalte/empty

Installs the @zaidan/empty component using pnpm.

```bash
pnpm dlx shadcn@latest add @zaidan/empty
```

--------------------------------

### Install with pnpm

Source: https://zaidan.carere.dev/docs/components/kobalte/progress

Install the progress component using pnpm.

```bash
pnpm dlx shadcn@latest add @zaidan/progress
```

--------------------------------

### Install with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/checkbox

Install the @zaidan/checkbox component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/checkbox
```

--------------------------------

### Install Toggle with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/toggle

Install the Toggle component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/toggle
```

--------------------------------

### Install with yarn

Source: https://zaidan.carere.dev/docs/components/kobalte/empty

Installs the @zaidan/empty component using yarn.

```bash
yarn dlx shadcn@latest add @zaidan/empty
```

--------------------------------

### Install with npx

Source: https://zaidan.carere.dev/docs/components/kobalte/checkbox

Install the @zaidan/checkbox component using npx.

```bash
npx shadcn@latest add @zaidan/checkbox
```

--------------------------------

### Install Textarea with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/textarea

Install the @zaidan/textarea component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/textarea
```

--------------------------------

### Sidebar Implementation Example

Source: https://zaidan.carere.dev/docs/components/kobalte/sidebar

A complete example showing the import structure and sample navigation data for a Sidebar component.

```typescript
1
import { GalleryVerticalEnd } from "lucide-solid";
2
import type { JSX } from "solid-js";
3
import { For, Show } from "solid-js";
4
import {
5
  Breadcrumb,
6
  BreadcrumbItem,
7
  BreadcrumbLink,
8
  BreadcrumbList,
9
  BreadcrumbPage,
10
  BreadcrumbSeparator,
11
} from "~/components/ui/breadcrumb";
12
import { Separator } from "~/components/ui/separator";
13
import {
14
  Sidebar,
15
  SidebarContent,
16
  SidebarGroup,
17
  SidebarHeader,
18
  SidebarInset,
19
  SidebarMenu,
20
  SidebarMenuButton,
21
  SidebarMenuItem,
22
  SidebarMenuSub,
23
  SidebarMenuSubButton,
24
  SidebarMenuSubItem,
25
  SidebarProvider,
26
  SidebarTrigger,
27
} from "~/components/ui/sidebar";
28

29
// Sample data
30
const data = {
31
  navMain: [
32
    {
33
      title: "Getting Started",
34
      url: "#",
35
      items: [
36
        { title: "Installation", url: "#" },
37
        { title: "Project Structure", url: "#" },
38
      ],
39
    },
40
    {
41
      title: "Building Your Application",
42
      url: "#",
43
      items: [
44
        { title: "Routing", url: "#" },
45
        { title: "Data Fetching", url: "#", isActive: true },
46
        { title: "Rendering", url: "#" },
47
        { title: "Caching", url: "#" },
48
        { title: "Styling", url: "#" },
49
        { title: "Optimizing", url: "#" },
50
        { title: "Configuring", url: "#" },
51
        { title: "Testing", url: "#" },
52
        { title: "Authentication", url: "#" },
53
        { title: "Deploying", url: "#" },
54
        { title: "Upgrading", url: "#" },
55
        { title: "Examples", url: "#" },
56
      ],
57
    },
58
    {
59
      title: "API Reference",
60
      url: "#",
61
      items: [
62
        { title: "Components", url: "#" },
63
        { title: "File Conventions", url: "#" },
64
        { title: "Functions", url: "#" },
65
        { title: "next.config.js Options", url: "#" },
66
        { title: "CLI", url: "#" },
67
        { title: "Edge Runtime", url: "#" },
68
      ],
69
    },
70
    {
71
      title: "Architecture",
72
      url: "#",
73
      items: [
74
        { title: "Accessibility", url: "#" },
75
        { title: "Fast Refresh", url: "#" },
76
        { title: "Next.js Compiler", url: "#" },
77
        { title: "Supported Browsers", url: "#" },
78
        { title: "Turbopack", url: "#" },
79
      ],
80
    },
81
    {
82
      title: "Community",
83
      url: "#",
84
      items: [{ title: "Contribution Guide", url: "#" }],
85
    },
86
  ],
87
};
```

--------------------------------

### NavProjects component initialization

Source: https://zaidan.carere.dev/docs/components/kobalte/sidebar

Initial setup for the NavProjects component, including the useSidebar hook.

```tsx
function NavProjects(props: {
  projects: { name: string; url: string; icon: Component<ComponentProps<"svg">> }[];
}) {
  const { isMobile } = useSidebar();
```

--------------------------------

### Install Sidebar with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/sidebar

Use this command to add the sidebar component to your project using bun.

```bash
bunx --bun shadcn@latest add @zaidan/sidebar
```

--------------------------------

### Install Sidebar with pnpm

Source: https://zaidan.carere.dev/docs/components/kobalte/sidebar

Use this command to add the sidebar component to your project using pnpm.

```bash
pnpm dlx shadcn@latest add @zaidan/sidebar
```

--------------------------------

### Install Sidebar with npm

Source: https://zaidan.carere.dev/docs/components/kobalte/sidebar

Use this command to add the sidebar component to your project using npm.

```bash
npx shadcn@latest add @zaidan/sidebar
```

--------------------------------

### Install Sidebar with yarn

Source: https://zaidan.carere.dev/docs/components/kobalte/sidebar

Use this command to add the sidebar component to your project using yarn.

```bash
yarn dlx shadcn@latest add @zaidan/sidebar
```

--------------------------------

### SidebarInset implementation

Source: https://zaidan.carere.dev/docs/components/kobalte/sidebar

A complete example of a SidebarInset layout featuring a header with breadcrumbs and a right-aligned sidebar with navigation items.

```jsx
export default function SidebarInsetExample() {
  return (
    <SidebarProvider>
      <SidebarInset>
        <header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem class="hidden md:block">
                <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator class="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
          <SidebarTrigger class="-mr-1 ml-auto rotate-180" />
        </header>
        <div class="flex flex-1 flex-col gap-4 p-4">
          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
            <div class="aspect-video rounded-xl bg-muted/50" />
            <div class="aspect-video rounded-xl bg-muted/50" />
            <div class="aspect-video rounded-xl bg-muted/50" />
          </div>
          <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
        </div>
      </SidebarInset>
      <Sidebar variant="inset" side="right">
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <For each={data.navMain}>
                  {(item) => (
                    <SidebarMenuItem>
                      <SidebarMenuButton as="a" href={item.url} class="font-medium">
                        {item.title}
                      </SidebarMenuButton>
                      <Show when={item.items?.length}>
                        <SidebarMenuSub>
                          <For each={item.items}>
                            {(subItem) => (
                              <SidebarMenuSubItem>
                                <SidebarMenuSubButton
                                  as="a"
                                  href={subItem.url}
                                  isActive={subItem.isActive}
                                >
                                  {subItem.title}
                                </SidebarMenuSubButton>
                              </SidebarMenuSubItem>
                            )}
                          </For>
                        </SidebarMenuSub>
                      </Show>
                    </SidebarMenuItem>
                  )}
                </For>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
        <SidebarRail />
      </Sidebar>
    </SidebarProvider>
  );
}
```

--------------------------------

### Sidebar component imports and setup

Source: https://zaidan.carere.dev/docs/components/kobalte/sidebar

Imports the necessary icons, SolidJS utilities, and UI components including the Sidebar and its subcomponents. This is the foundation for building a sidebar with navigation groups, collapsible sections, and user menu.

```tsx
import type { LucideIcon } from "lucide-solid";
import {
  AudioWaveform,
  BadgeCheck,
  Bell,
  BookOpen,
  Bot,
  ChevronRight,
  ChevronsUpDown,
  Command,
  CreditCard,
  Folder,
  Forward,
  Frame,
  GalleryVerticalEnd,
  LogOut,
  MapIcon,
  MoreHorizontal,
  PieChart,
  Plus,
  Settings2,
  Sparkles,
  SquareTerminal,
  Trash2,
} from "lucide-solid";
import { createSignal, For, Show } from "solid-js";
import { Dynamic } from "solid-js/web";
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "~/components/ui/collapsible";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  type SidebarProps,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
  useSidebar,
} from "~/components/ui/sidebar";
```

--------------------------------

### MessageScroller Animation Setup

Source: https://zaidan.carere.dev/docs/blocks/kobalte/message-scroller

Imports and initialization for the MessageScroller animation example, including the scripted chat setup and animation preset management.

```typescript
import { ArrowUpIcon, MessageCircleDashedIcon, RotateCwIcon } from "lucide-solid";
import { createSignal, For, Show } from "solid-js";
import { MessageScroller } from "@/registry/kobalte/blocks/message-scroller";
import { Button } from "~/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import {
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
} from "~/components/ui/empty";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "~/components/ui/select";
import {
  createScript,
  createScriptedChat,
  MESSAGE_ANIMATIONS,
  MessageAnimated,
  type MessageAnimationId,
  type MessageAnimationPreset,
} from "./message-scroller-utils";

const animationScript = createScript("animation", [
  {
    question: "Can user messages pop in like iMessage without breaking anchoring?",
    answer:
      "Yes. Animate the user row with transform and opacity, and let the assistant response stream normally below it.\n\nThat keeps the row measurement predictable while still giving the newly sent bubble a more tactile entrance.",
  },
  {
    question: "What makes the animation feel more like iMessage?",
    answer:
      "Use a quick spring from the trailing edge: a little scale, a small upward move, and no layout animation.\n\nThe bubble feels tactile, but the measured row stays predictable, so anchoring and auto-scroll do not have to fight a changing layout.",
  },
  {
    question: "Can I switch between presets while testing the same thread?",
    answer:
      "Yes. Keep the conversation in place while you change the preset, then send the next message to compare the new entrance against the same context.\n\nThat makes it easier to judge the difference between a subtle fade, a snappy pop, and a more dramatic 3D tilt without rebuilding the scenario each time.",
  },
]);

const animationPresets = Object.values(MESSAGE_ANIMATIONS);

export default function MessageScrollerAnimation() {
  const chat = createScriptedChat({ delayMs: 15, initialCount: 0, script: animationScript });
  const [presetId, setPresetId] = createSignal<MessageAnimationId>("fade");
  const preset = () => MESSAGE_ANIMATIONS[presetId()];
```

--------------------------------

### Floating Sidebar Implementation

Source: https://zaidan.carere.dev/docs/components/kobalte/sidebar

An example of a floating sidebar layout using SidebarProvider, Sidebar with the floating variant, and SidebarInset for content management.

```tsx
export default function SidebarFloatingExample() {
  return (
    <SidebarProvider
      style={
        {
          "--sidebar-width": "19rem",
        } as JSX.CSSProperties
      }
    >
      <Sidebar variant="floating">
        <SidebarHeader>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton size="lg" as="a" href="#">
                <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                  <GalleryVerticalEnd class="size-4" />
                </div>
                <div class="flex flex-col gap-0.5 leading-none">
                  <span class="font-medium">Documentation</span>
                  <span class="">v1.0.0</span>
                </div>
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarMenu class="gap-2">
              <For each={data.navMain}>
                {(item) => (
                  <SidebarMenuItem>
                    <SidebarMenuButton as="a" href={item.url} class="font-medium">
                      {item.title}
                    </SidebarMenuButton>
                    <Show when={item.items?.length}>
                      <SidebarMenuSub class="ml-0 border-l-0 px-1.5">
                        <For each={item.items}>
                          {(subItem) => (
                            <SidebarMenuSubItem>
                              <SidebarMenuSubButton
                                as="a"
                                href={subItem.url}
                                isActive={subItem.isActive}
                              >
                                {subItem.title}
                              </SidebarMenuSubButton>
                            </SidebarMenuSubItem>
                          )}
                        </For>
                      </SidebarMenuSub>
                    </Show>
                  </SidebarMenuItem>
                )}
              </For>
            </SidebarMenu>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header class="flex h-16 shrink-0 items-center gap-2 px-4">
          <SidebarTrigger class="-ml-1" />
          <Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem class="hidden md:block">
                <BreadcrumbLink href="#">Building Your Application</BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator class="hidden md:block" />
              <BreadcrumbItem>
                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <div class="flex flex-1 flex-col gap-4 p-4 pt-0">
          <div class="grid auto-rows-min gap-4 md:grid-cols-3">
            <div class="aspect-video rounded-xl bg-muted/50" />
            <div class="aspect-video rounded-xl bg-muted/50" />
            <div class="aspect-video rounded-xl bg-muted/50" />
          </div>
          <div class="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
        </div>
      </SidebarInset>
    </SidebarProvider>
  );
}
```

--------------------------------

### Sidebar Icon Collapse Implementation

Source: https://zaidan.carere.dev/docs/components/kobalte/sidebar

This snippet includes the necessary imports, sample data structure, and the initial setup for a TeamSwitcher component within a sidebar.

```typescript
import {
  AudioWaveform,
  BadgeCheck,
  Bell,
  BookOpen,
  Bot,
  ChevronRight,
  ChevronsUpDown,
  Command,
  CreditCard,
  Folder,
  Forward,
  Frame,
  GalleryVerticalEnd,
  LogOut,
  Map as MapIcon,
  MoreHorizontal,
  PieChart,
  Plus,
  Settings2,
  Sparkles,
  SquareTerminal,
  Trash2,
} from "lucide-solid";
import type { Component, ComponentProps } from "solid-js";
import { createSignal, For, Show } from "solid-js";
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "~/components/ui/breadcrumb";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "~/components/ui/collapsible";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import { Kbd } from "~/components/ui/kbd";
import { Separator } from "~/components/ui/separator";
import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarTrigger,
  useSidebar,
} from "~/components/ui/sidebar";

// Sample data
const data = {
  user: {
    name: "shadcn",
    email: "m@example.com",
    avatar: "/avatars/shadcn.jpg",
  },
  teams: [
    {
      name: "Acme Inc",
      logo: GalleryVerticalEnd,
      plan: "Enterprise",
    },
    {
      name: "Acme Corp.",
      logo: AudioWaveform,
      plan: "Startup",
    },
    {
      name: "Evil Corp.",
      logo: Command,
      plan: "Free",
    },
  ],
  navMain: [
    {
      title: "Playground",
      url: "#",
      icon: SquareTerminal,
      isActive: true,
      items: [
        { title: "History", url: "#" },
        { title: "Starred", url: "#" },
        { title: "Settings", url: "#" },
      ],
    },
    {
      title: "Models",
      url: "#",
      icon: Bot,
      items: [
        { title: "Genesis", url: "#" },
        { title: "Explorer", url: "#" },
        { title: "Quantum", url: "#" },
      ],
    },
    {
      title: "Documentation",
      url: "#",
      icon: BookOpen,
      items: [
        { title: "Introduction", url: "#" },
        { title: "Get Started", url: "#" },
        { title: "Tutorials", url: "#" },
        { title: "Changelog", url: "#" },
      ],
    },
    {
      title: "Settings",
      url: "#",
      icon: Settings2,
      items: [
        { title: "General", url: "#" },
        { title: "Team", url: "#" },
        { title: "Billing", url: "#" },
        { title: "Limits", url: "#" },
      ],
    },
  ],
  projects: [
    { name: "Design Engineering", url: "#", icon: Frame },
    { name: "Sales & Marketing", url: "#", icon: PieChart },
    { name: "Travel", url: "#", icon: MapIcon },
  ],
};

// Team Switcher component
function TeamSwitcher(props: {
  teams: { name: string; logo: Component<ComponentProps<"svg">>; plan: string }[];
}) {
  const { isMobile } = useSidebar();
  const [activeTeam, setActiveTeam] = createSignal(props.teams[0]);
```

--------------------------------

### Message Scroller Implementation

Source: https://zaidan.carere.dev/docs/blocks/kobalte/message-scroller

An example demonstrating the setup of a message scroller with a script of messages and associated UI components.

```typescript
import { For } from "solid-js";
import { MessageScroller, useMessageScroller } from "@/registry/kobalte/blocks/message-scroller";
import { Bubble, BubbleContent } from "~/components/ui/bubble";
import { Button } from "~/components/ui/button";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "~/components/ui/dropdown-menu";
import { Message, MessageContent } from "~/components/ui/message";
import { createScript, type DemoMessage, splitParagraphs } from "./message-scroller-utils";

const script = createScript("command", [
  {
    questionId: "command-activation",
    question:
      "We're seeing activation dip after workspace creation. Can you help me find the likely step?",
    answer:
      "The sharpest drop is between creating the workspace and inviting the first teammate.\n\nWorkspace creation is still healthy, but the invite step is where users pause. That suggests the product is asking for collaboration before the user has enough confidence in the workspace.",
  },
  {
    questionId: "command-compare",
    question: "What should I compare before we change the onboarding flow?",
    answer:
      "Compare three cohorts:\n\n1. Users who choose a template before inviting teammates.\n2. Users who start from a blank workspace.\n3. Users who skip invites and return within 24 hours.\n\nIf template users invite faster, the fix is probably better first-run guidance rather than a louder invite prompt.",
  },
  {
    questionId: "command-experiment",
    question: "Can you turn that into an experiment?",
    answer:
      "Yes. Create a variant that shows a short checklist after workspace creation:\n\n- Pick a template.\n- Add one project detail.\n- Invite a teammate when the workspace has context.\n\nMeasure first invite completion, 24-hour return rate, and whether teams create a second project.",
  },
  {
    questionId: "command-risk",
    question: "What's the risk if we delay the invite prompt?",
    answer:
      "The main risk is reducing team creation for accounts that already know who they want to invite.\n\nTo protect that path, keep the invite action visible in the header and only change the primary empty-state guidance. That gives confident teams a direct route without forcing uncertain users through the invite step too early.",
  },
]);
```

--------------------------------

### Implement Automatic Detection and SSR

Source: https://zaidan.carere.dev/docs/dark-mode

Example of using TanStack Start utilities to detect color mode on the server and client.

```javascript
import { createIsomorphicFn } from "@tanstack/solid-start";
import { getCookie } from "@tanstack/solid-start/server";
import { getClientColorMode, ZAIDAN_COLOR_MODE_COOKIE_KEY } from "@components/color-mode";

// Tanstack Start provides powerful utilities to create function that work on server & client
const getColorMode = createIsomorphicFn()
  .server(() => getCookie(ZAIDAN_COLOR_MODE_COOKIE_KEY) ?? "light") // Use your framework's cookie parsing utility to read the color mode from cookies
  .client(() => getClientColorMode());

function RootComponent() {
  const colorMode = getColorMode();

  return (
    <html lang="en" class={colorMode}>
      <head>{/* ... */}</head>
      <body>
        <ColorModeProvider initialColorMode={colorMode}>
          {/* Your app */}
        </ColorModeProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Bubble Alignment Example

Source: https://zaidan.carere.dev/docs/components/kobalte/bubble

Shows how to set the `align` prop on `Bubble` to align bubbles to the start (default) or end of the conversation. The example includes two bubbles: one with default alignment and one with `align="end"` for user messages.

```tsx
import { Bubble, BubbleContent } from "~/components/ui/bubble";

export default function BubbleAlignment() {
  return (
    <div class="flex w-full max-w-sm flex-col gap-8 py-12">
      <Bubble variant="muted">
        <BubbleContent>
          This bubble is aligned to the start. This is the default alignment.
        </BubbleContent>
      </Bubble>
      <Bubble align="end">
        <BubbleContent>
          This bubble is aligned to the end. Use this for user messages.
        </BubbleContent>
      </Bubble>
    </div>
  );
}
```

--------------------------------

### Questionnaire Multiple Selection Implementation

Source: https://zaidan.carere.dev/docs/blocks/kobalte/questionnaire

This example shows a questionnaire setup where the 'multiple' prop is applied to a 'Questionnaire.Item' to allow multiple selections. It includes a submission handler that retrieves all selected values using 'FormData.getAll'.

```tsx
import { toast } from "solid-sonner";
import { Questionnaire } from "@/registry/kobalte/blocks/questionnaire";
import { Toaster } from "~/components/ui/toast";

const items = [
  {
    choices: [{ value: "source" }, { value: "tests" }, { value: "docs" }, { value: "history" }],
    name: "context",
    required: true,
  },
] as const;

export default function QuestionnaireMultiple() {
  function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();

    const context = new FormData(event.currentTarget).getAll("context");

    toast("Context selected", {
      description: `Context: ${context.join(", ") || "None"}`,
    });
  }

  return (
    <>
      <Toaster />
      <Questionnaire.Root
        class="mx-auto max-w-md"
        items={items}
        shortcuts="letters"
        onSubmit={handleSubmit}
      >
        <Questionnaire.Item name="context" multiple required>
          <Questionnaire.Title>What context should the agent inspect?</Questionnaire.Title>
          <Questionnaire.Description>
            Select every source that may affect the implementation.
          </Questionnaire.Description>
          <Questionnaire.Choices>
            <Questionnaire.Choice value="source">Relevant source files</Questionnaire.Choice>
            <Questionnaire.Choice value="tests">Existing tests</Questionnaire.Choice>
            <Questionnaire.Choice value="docs">Architecture documentation</Questionnaire.Choice>
            <Questionnaire.Choice value="history">Recent commit history</Questionnaire.Choice>
          </Questionnaire.Choices>
          <Questionnaire.Error />
        </Questionnaire.Item>

        <Questionnaire.Actions>
          <Questionnaire.Submit>Share context</Questionnaire.Submit>
        </Questionnaire.Actions>
      </Questionnaire.Root>
    </>
  );
}
```

--------------------------------

### Install Drawer with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/drawer

Install the drawer component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/drawer
```

--------------------------------

### Install with npm

Source: https://zaidan.carere.dev/docs/components/kobalte/navigation-menu

Use this command to add the navigation menu component using npm.

```bash
npx shadcn@latest add @zaidan/navigation-menu
```

--------------------------------

### Install with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/navigation-menu

Use this command to add the navigation menu component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/navigation-menu
```

--------------------------------

### Install with yarn

Source: https://zaidan.carere.dev/docs/components/kobalte/context-menu

Install the @zaidan/context-menu component using yarn dlx.

```bash
yarn dlx shadcn@latest add @zaidan/context-menu
```

--------------------------------

### Install with yarn

Source: https://zaidan.carere.dev/docs/components/kobalte/native-select

Install the NativeSelect component using yarn.

```bash
yarn dlx shadcn@latest add @zaidan/native-select
```

--------------------------------

### Install with npm

Source: https://zaidan.carere.dev/docs/components/kobalte/native-select

Install the NativeSelect component using npm.

```bash
npx shadcn@latest add @zaidan/native-select
```

--------------------------------

### Install Kbd with bun

Source: https://zaidan.carere.dev/docs/components/kobalte/kbd

Install the Kbd component using bun.

```bash
bunx --bun shadcn@latest add @zaidan/kbd
```

--------------------------------

### Create Solid Start project with npm

Source: https://zaidan.carere.dev/docs/installation/solid-start

Creates a new Solid Start project with TypeScript and Tailwind CSS using npm.

```bash
npm create solid@latest --solidstart --ts --template with-tailwindcss
```

--------------------------------

### Install with pnpm

Source: https://zaidan.carere.dev/docs/components/kobalte/native-select

Install the NativeSelect component using pnpm.

```bash
pnpm dlx shadcn@latest add @zaidan/native-select
```

--------------------------------

### Install with pnpm

Source: https://zaidan.carere.dev/docs/components/kobalte/context-menu

Install the @zaidan/context-menu component using pnpm dlx.

```bash
pnpm dlx shadcn@latest add @zaidan/context-menu
```

--------------------------------

### Install with bun

Source: https://zaidan.carere.dev/docs/blocks/kobalte/filters

Use bun to add the filters component.

```bash
bunx --bun shadcn@latest add @zaidan/filters
```

--------------------------------

### Install with yarn

Source: https://zaidan.carere.dev/docs/components/kobalte/input-group

Install the input-group component using yarn.

```bash
yarn dlx shadcn@latest add @zaidan/input-group
```

--------------------------------

### Create Solid Start project with bun

Source: https://zaidan.carere.dev/docs/installation/solid-start

Creates a new Solid Start project with TypeScript and Tailwind CSS using bun.

```bash
bun --bun create solid@latest --solidstart --ts --template with-tailwindcss
```

--------------------------------

### Install with npm

Source: https://zaidan.carere.dev/docs/components/kobalte/input-group

Install the input-group component using npm.

```bash
npx shadcn@latest add @zaidan/input-group
```
Tokens:
Raw