# accessibility

---
title: Accessibility
description: Build on accessible primitives and verify the complete experience.
---

## Behavior

Interactive primitives use Base UI for React and Reka UI for Vue where applicable: focus management, dialogs, menus, comboboxes, tabs and notifications. Native inputs retain form semantics.

Always supply meaningful labels, associate descriptions with controls, and provide visible feedback for asynchronous actions. Do not use a placeholder as the only label.

## Keyboard

- Use Tab and Shift+Tab to move between controls.
- Menus and comboboxes support arrow keys and selection through their framework’s accessible primitives.
- Escape closes dismissible overlays; focus returns to their trigger.
- The calendar uses arrow keys for days/weeks, Home/End for week boundaries and PageUp/PageDown for months. Shift with PageUp/PageDown changes the year.
- The editor supports Command/Ctrl+K for search and Command/Ctrl+I for the assistant.

## Visual changes need checks

The editor evaluates semantic text color pairs. This is one check, not an accessibility certification. Check disabled states, images, focus indicators, errors, screen-reader announcements and zoom in your actual app.

Reduced-motion preferences disable decorative animation. Do not communicate status through color alone. Keep controls usable on touch screens and do not remove visible focus styles.

## Early access

Components remain experimental while the catalogue is being tested and integrated. Storybook provides light, dark, compact and shape variations so changes can be inspected consistently.


---

# agents

---
title: CLI and coding agents
description: Connect your project and give your coding agent the same components, tokens and design rules you use in the editor.
---

You can work entirely from an exported ZIP. Use a connection when you want your terminal or coding agent to read the latest saved version of a library.

The [MIT-licensed component source](https://github.com/elreco/coderocket-ui) is available without a CodeRocket account. The hosted registry used by the CLI and MCP requires an account, a saved library and a connection token. Installed source runs locally without a connection.

## Create a connection

1. Save the library in the editor, then open **Connect**.
2. Name the connection for the machine or agent that will use it.
3. Choose **Create connection** and copy the token shown once.
4. Copy the generated setup commands or MCP configuration into your development environment.

A connection can read only its library. It expires after 90 days and can be revoked from the same dialog. Put its token in your terminal or agent's protected environment; keep it out of source files, prompts and public URLs.

## Install with the CLI

With **Node.js 24 or newer** installed, run the official npm package from your application folder. Copy your library ID from **Connect** and provide the token in your terminal environment:

In bash or zsh, paste your connection token at the hidden prompt and press Enter:

```bash
printf "Connection token: "
read -rs CODEROCKET_TOKEN
export CODEROCKET_TOKEN
printf "\n"
npx @coderocketapp/cli@latest init YOUR_LIBRARY_ID
npx @coderocketapp/cli@latest add button dialog
```

The CLI remembers the library in `.coderocket/manifest.json`; it never writes the token to project files. Keep `CODEROCKET_TOKEN` available for later commands, including in new terminals. You can instead set `CODEROCKET_LIBRARY` and run `npx @coderocketapp/cli@latest init` without a positional ID. No global installation is required.

| Command                                           | Result                                                     |
| ------------------------------------------------- | ---------------------------------------------------------- |
| `npx @coderocketapp/cli@latest list`              | List available components and blocks                       |
| `npx @coderocketapp/cli@latest add button dialog` | Install named components and their required shared files   |
| `npx @coderocketapp/cli@latest add block-login`   | Install a complete block                                   |
| `npx @coderocketapp/cli@latest add --all`         | Install the full catalogue                                 |
| `npx @coderocketapp/cli@latest sync`              | Update installed items from the latest saved version       |
| `npx @coderocketapp/cli@latest import`            | Write a local analysis report for importing project tokens |

Install the listed runtime dependencies and import the generated styles once. See [export and installation](/docs/export) for React/Next.js, or [Vue and Nuxt setup](/docs/vue). The connection reads the framework from your saved library and serves the matching source and dependencies.

Commit `.coderocket/manifest.json` and `.coderocket/lock.json` with the installed source. The CLI writes integration instructions and agent rules to `.coderocket/README.md` and `.coderocket/AGENTS.md`. The `import` command analyzes local files without uploading them and does not require a token.

`CODEROCKET_SERVER` defaults to `https://ui.coderocket.app`. If you use a different Studio deployment, set its origin in the environment before `init` and keep it set for subsequent commands. **Connect** includes that variable when needed.

### Your local edits stay yours

The CLI compares file hashes before applying an update. If it finds a local edit or deletion, it stops the installation and writes the proposed changes into a `.coderocket/review-*` folder. Review and merge those changes in your codebase; the CLI does not silently replace your work.

Save changes in the editor before syncing. A connection reads saved versions, not another browser's unsaved preview.

## Use the shadcn registry (React)

Vue libraries use the CodeRocket CLI or MCP above. The instructions below target React projects.

Open **Connect → shadcn registry** and copy the registry entry into your existing `components.json`. The configuration uses an authorization header from your environment to keep the library private.

You can then install a component through your configured registry:

```bash
npx shadcn@latest add @coderocket/button
```

The local-change protection described above belongs to the CodeRocket CLI. When using another installer, review its proposed changes and your version-control diff.

## Connect an agent with MCP

Open **Connect → Coding agents · MCP** to copy the configuration for your saved library. Use Node.js 24 or newer and an MCP client that supports local stdio servers:

```json
{
  "mcpServers": {
    "coderocket": {
      "command": "npx",
      "args": ["-y", "@coderocketapp/mcp@latest"],
      "env": {
        "CODEROCKET_LIBRARY": "YOUR_LIBRARY_ID",
        "CODEROCKET_TOKEN": "YOUR_CONNECTION_TOKEN"
      }
    }
  }
}
```

Replace the placeholders in your client's private configuration and keep it outside version control. If the client has protected secret settings, provide `CODEROCKET_TOKEN` there and remove its entry from the JSON. Restart or reconnect the MCP server after configuration. The token is passed to the server as an environment variable.

The connector gives your agent read access to:

- The saved design model, tokens and revision.
- Design rules and integration conventions.
- Component and block search.
- Source files, dependencies and installation paths.

For example, you can ask an agent to “build a settings form using this library's input, select and button components.” The agent has the source and design context it needs to reuse your library. Design changes still happen in the editor, where you review and save them.

The MCP server reads the library; your agent uses its own tools and permissions to edit your application. If the token expires or is revoked, create a new connection for the same library, update the environment and reconnect.

## Include your design rules

Every source export includes `AGENTS.md` with the library's conventions. It asks agents to reuse existing controls, consume semantic tokens, and preserve keyboard and focus behavior.

If your project already has an `AGENTS.md`, merge the relevant design rules into it. Preserve your existing project-specific instructions.

## Give an assistant the public reference

Use **Copy for AI** on any documentation page. Paste the result into your preferred assistant, such as ChatGPT, Claude, Cursor, Copilot or Codex, and describe what you want to build. The copied context includes this page’s Markdown and links to source installation and agent setup. It works without a CodeRocket connection.

This is the **public reference**. To work with your own saved components and theme, give your coding agent the exported files or [connect it through MCP](#connect-an-agent-with-mcp). Keep connection tokens in the agent’s protected environment settings.

Component and block pages also offer **Open in editor**. Choose an existing library or create one; the editor keeps the component you selected. You can customize its design, inspect its code and export the source from there.

The **Markdown** link opens a plain-text version of the page, useful for both people and tools. [`/llms.txt`](/llms.txt) provides the documentation index; [`/llms-full.txt`](/llms-full.txt) contains the full collection for tools that need it.


---

# ai

---
title: Work with the assistant
description: Ask for a change, review the proposal, then apply it.
---

The assistant is an interface to your design-system model. It does not rewrite the entire component library for every prompt.

## Be specific

> Use warmer surfaces and rounder cards, but keep the current primary color and button corners.

The server requests a structured proposal from Gemini. The proposal is checked against the model schema and supported token paths. Color changes are checked for text contrast. Invalid output can be repaired once; it is not silently applied.

## Review before applying

The proposal lists the values that would change. **Apply to preview** changes the local editor state. **Save** creates a persistent version. Undo remains available before saving.

If you edit the design while a proposal is in progress, the old proposal cannot overwrite your newer changes. Request another proposal using the updated design.

## Missing information

An ambiguous request may return a clarification. No changes accompany a clarification. Add the missing details to your prompt and try again.

## Privacy and availability

The prompt and the current design values are sent to Google's Gemini service to produce a response. Provider keys stay on the server. CodeRocket does not store raw prompts in its application history; it stores the validated proposals used to explain changes.

If Gemini is unavailable or not configured, the assistant reports the issue. The visual editor, existing components and exports remain usable. There is no simulated AI response.

## Create a component or block

Use **Create component** in the editor to describe a form, card, settings panel or file selector. Gemini composes the existing primitives into a structured tree. The renderer produces editable React or Vue sources, matching the library’s framework, from that tree; generated strings are never executed as JavaScript.

Review the preview, source and specification, then choose **Accept and save component**. The accepted component becomes part of the library's exports, registry and MCP catalogue. Its version is stored with its specification, source and validation metadata.

This early-access generator supports composition of the available layout and form primitives. It does not invent a working backend or arbitrary new browser behavior. File selection stays local until your application's callback handles it; application buttons use the `onAction` prop in the exported source.

The schema, tree and labels are checked before the preview. The editor then runs axe accessibility checks on the rendered preview; acceptance stays disabled until those checks pass. Components remain **experimental** until you test the integration, keyboard behavior and application actions in their final context.

## Source, tests and stories

Accepted compositions include their structured specification, editable React or Vue source, an SSR smoke test and a Storybook story in the ZIP export. Connect the exported stories to your application's Storybook theme decorator. Run the tests and accessibility checks in that application before promoting an experimental component to production.

The current generator assembles validated primitives. It does not execute arbitrary generated JavaScript or invent application backends. Unsupported behavior requires clarification and implementation in your own action callbacks.

## Use your library with a coding agent

To give your coding agent the saved design rules and catalogue, open **Connect → Coding agents · MCP**. The official npm server runs with `npx -y @coderocketapp/mcp@latest` and requires Node.js 24 or newer. Set `CODEROCKET_LIBRARY` and `CODEROCKET_TOKEN` in the MCP client's environment, using the library-scoped connection created in the Studio. Keep tokens out of prompts and source files. [Copy the complete MCP configuration](/docs/agents#connect-an-agent-with-mcp).

The MCP server provides read-only access to the saved library. Your agent can fetch source and use its own tools to integrate it into your app. Save Studio changes before requesting an updated design. To install and sync from a terminal, use `npx @coderocketapp/cli@latest init YOUR_LIBRARY_ID` with the token in your environment, then `add` or `sync` as shown in the [CLI guide](/docs/agents#install-with-the-cli).

Hosted connections require an account and a saved library. The public documentation and [MIT-licensed component source](https://github.com/elreco/coderocket-ui) can be used with an assistant without an account or connection token.


---

# blocks/api-keys

---
title: "API Keys"
description: "A masked key list with creation and revocation callbacks."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/api-keys

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { ApiKeysBlock } from './components/blocks/application';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Sidebar](/docs/components/sidebar), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Breadcrumb](/docs/components/breadcrumb), [Button](/docs/components/button), [Card](/docs/components/card), [Dialog](/docs/components/dialog), [Dropdown](/docs/components/dropdown), [Field](/docs/components/field), [Input](/docs/components/input), [Progress](/docs/components/progress), [Switch](/docs/components/switch), [Tabs](/docs/components/tabs), [Textarea](/docs/components/textarea), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowUpRight,
  Bell,
  Building2,
  CheckCheck,
  ChevronRight,
  CreditCard,
  FileText,
  KeyRound,
  Layers2,
  LayoutGrid,
  Plus,
  Search,
  ShieldCheck,
  Trash2,
  UserRound,
  UserRoundPlus,
  UsersRound,
} from "lucide-react";
import {
  Sidebar,
  Avatar,
  Badge,
  Breadcrumb,
  Button,
  Card,
  Dialog,
  Dropdown,
  Field,
  Input,
  Progress,
  Switch,
  Tabs,
  Textarea,
} from '../ui';
import { ActionForm, type FormAction } from "./common";

function WorkspaceHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function AppSidebarBlock({
  workspace,
  items,
  accountName,
}: {
  workspace: string;
  items: ComponentProps<typeof Sidebar>["items"];
  accountName: string;
}) {
  return (
    <div className="cr-app-sidebar-block">
      <Sidebar
        brand={
          <span className="cr-workspace-brand">
            <span className="cr-workspace-brand-icon">
              <Layers2 size={19} aria-hidden="true" />
            </span>
            <span>
              <strong>{workspace}</strong>
              <small>Workspace</small>
            </span>
          </span>
        }
        items={items.map((item) => ({
          ...item,
          icon: item.icon ?? <LayoutGrid size={18} aria-hidden="true" />,
        }))}
        footer={
          <div className="cr-workspace-account">
            <Avatar name={accountName} size={34} />
            <span>
              <strong>{accountName}</strong>
              <small>Account</small>
            </span>
          </div>
        }
      />
    </div>
  );
}

export function AppHeaderBlock({
  breadcrumbs,
  accountName,
  onSearch,
  onSignOut,
}: {
  breadcrumbs: ComponentProps<typeof Breadcrumb>["items"];
  accountName: string;
  onSearch: () => void;
  onSignOut: () => void;
}) {
  return (
    <header className="cr-block-header cr-workspace-header">
      <div className="cr-workspace-header-location">
        <span className="cr-workspace-header-icon">
          <Layers2 size={18} aria-hidden="true" />
        </span>
        <Breadcrumb items={breadcrumbs} />
      </div>
      <div className="cr-workspace-header-actions">
        <Button variant="ghost" onClick={onSearch}>
          <Search size={17} aria-hidden="true" />
          <span>Search</span>
        </Button>
        <span className="cr-workspace-header-divider" aria-hidden="true" />
        <Dropdown
          trigger={
            <>
              <Avatar name={accountName} size={28} />
              <span className="cr-workspace-header-name">{accountName}</span>
              <span className="cr-sr-only">Account menu</span>
            </>
          }
          items={[{ label: "Sign out", onSelect: onSignOut }]}
        />
      </div>
    </header>
  );
}

export function ProfileBlock({
  name,
  email,
  bio = "",
  onSave,
}: {
  name: string;
  email: string;
  bio?: string;
  onSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-profile">
      <WorkspaceHeading
        eyebrow="Account"
        title="Your profile"
        description="The details your team sees when you work together."
      />
      <div className="cr-workspace-identity">
        <Avatar name={name} size={58} />
        <div>
          <strong>{name}</strong>
          <span>{email}</span>
        </div>
        <span className="cr-workspace-icon-tile">
          <UserRound size={20} aria-hidden="true" />
        </span>
      </div>
      <ActionForm onSubmit={onSave}>
        <div className="cr-workspace-form-grid">
          <Field label="Display name">
            <Input
              name="name"
              defaultValue={name}
              autoComplete="name"
              required
            />
          </Field>
          <Field label="Email address">
            <Input
              name="email"
              type="email"
              defaultValue={email}
              autoComplete="email"
              required
            />
          </Field>
        </div>
        <Field label="About you">
          <Textarea
            name="bio"
            defaultValue={bio}
            placeholder="A few words about you and your work."
          />
        </Field>
      </ActionForm>
    </Card>
  );
}

export function SettingsBlock({
  workspaceName,
  onSave,
  onNotificationSave,
}: {
  workspaceName: string;
  onSave: FormAction;
  onNotificationSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-settings">
      <WorkspaceHeading
        eyebrow="Workspace"
        title="Settings"
        description="A few details that make this space yours."
        action={
          <span className="cr-workspace-icon-tile">
            <Building2 size={20} aria-hidden="true" />
          </span>
        }
      />
      <Tabs
        label="Settings sections"
        items={[
          {
            value: "general",
            label: "General",
            content: (
              <ActionForm onSubmit={onSave}>
                <Field label="Workspace name">
                  <Input
                    name="workspace"
                    defaultValue={workspaceName}
                    required
                  />
                </Field>
                <Field label="Description">
                  <Textarea
                    name="description"
                    placeholder="What are you building?"
                  />
                </Field>
              </ActionForm>
            ),
          },
          {
            value: "notifications",
            label: "Notifications",
            content: (
              <ActionForm onSubmit={onNotificationSave}>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <FileText size={18} aria-hidden="true" />
                    </span>
                    <p>A summary of what happened across your workspace.</p>
                  </div>
                  <Switch name="digest" label="Weekly digest" defaultChecked />
                </div>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <Bell size={18} aria-hidden="true" />
                    </span>
                    <p>Stay in the loop when someone needs your attention.</p>
                  </div>
                  <Switch
                    name="mentions"
                    label="Mention notifications"
                    defaultChecked
                  />
                </div>
              </ActionForm>
            ),
          },
        ]}
      />
    </Card>
  );
}

export interface TeamMember {
  id: string;
  name: string;
  email: string;
  role: string;
}
export function TeamBlock({
  members,
  onInvite,
  onRemove,
}: {
  members: TeamMember[];
  onInvite: FormAction;
  onRemove: (id: string) => void | Promise<void>;
}) {
  const [removing, setRemoving] = useState<string | null>(null),
    [error, setError] = useState(false);
  return (
    <Card className="cr-workspace-block cr-workspace-team">
      <WorkspaceHeading
        eyebrow="People & access"
        title="Your team"
        description="Good work starts with the right people."
        action={
          <Dialog
            trigger={
              <>
                <UserRoundPlus size={16} aria-hidden="true" />
                Invite member
              </>
            }
            title="Invite someone to your team"
            description="Enter the email address of the person you’d like to invite."
            footer={null}
          >
            <ActionForm
              onSubmit={onInvite}
              submitLabel="Send invitation"
              successMessage="Invitation sent."
            >
              <Field label="Email address">
                <Input
                  name="email"
                  type="email"
                  autoComplete="email"
                  placeholder="colleague@company.com"
                  required
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>
          <UsersRound size={15} aria-hidden="true" />
          Team members
        </span>
        <Badge variant="outline">
          {members.length} {members.length === 1 ? "member" : "members"}
        </Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-member-list">
        {members.map((member) => (
          <li key={member.id}>
            <Avatar name={member.name} size={36} />
            <div className="cr-workspace-person">
              <strong>{member.name}</strong>
              <span>{member.email}</span>
            </div>
            <Badge variant="outline">{member.role}</Badge>
            <Button
              variant="ghost"
              size="sm"
              className="cr-workspace-icon-button"
              disabled={Boolean(removing)}
              loading={removing === member.id}
              aria-label={`Remove ${member.name}`}
              onClick={async () => {
                setRemoving(member.id);
                setError(false);
                try {
                  await onRemove(member.id);
                } catch {
                  setError(true);
                } finally {
                  setRemoving(null);
                }
              }}
            >
              {removing !== member.id && (
                <Trash2 size={16} aria-hidden="true" />
              )}
            </Button>
          </li>
        ))}
      </ul>
      {!members.length && (
        <p className="cr-block-empty">
          No team members yet. Invite someone to get started.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to remove this member.
        </p>
      )}
    </Card>
  );
}

export function BillingBlock({
  plan,
  price,
  renewal,
  usage,
  limit,
  onManage,
  invoices,
}: {
  plan: string;
  price: string;
  renewal: string;
  usage: number;
  limit: number;
  onManage: () => void;
  invoices: Array<{ id: string; date: string; amount: string; href: string }>;
}) {
  const safeLimit = Number.isFinite(limit) && limit > 0 ? limit : 1;
  const safeUsage = Number.isFinite(usage)
    ? Math.max(0, Math.min(usage, safeLimit))
    : 0;
  return (
    <Card className="cr-workspace-block cr-workspace-billing">
      <WorkspaceHeading
        eyebrow="Subscription"
        title="Billing"
        description="Your plan, usage and invoices in one place."
        action={
          <span className="cr-workspace-icon-tile">
            <CreditCard size={20} aria-hidden="true" />
          </span>
        }
      />
      <div className="cr-workspace-plan">
        <div className="cr-workspace-plan-main">
          <Badge variant="outline">{plan} plan</Badge>
          <strong className="cr-workspace-plan-price">{price}</strong>
          <span className="cr-description">{renewal}</span>
        </div>
        <Button variant="outline" onClick={onManage}>
          Manage plan
          <ArrowUpRight size={16} aria-hidden="true" />
        </Button>
      </div>
      <div className="cr-workspace-usage">
        <div className="cr-workspace-list-heading">
          <span>Team seats</span>
          <span>
            {usage} <span className="cr-description">/ {limit} used</span>
          </span>
        </div>
        <Progress label="Seats used" value={safeUsage} max={safeLimit} />
      </div>
      <div className="cr-workspace-list-heading">
        <span>Invoice history</span>
        <Badge variant="outline">{invoices.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-invoice-list">
        {invoices.map((invoice) => (
          <li key={invoice.id}>
            <span className="cr-workspace-icon-tile">
              <FileText size={17} aria-hidden="true" />
            </span>
            <span>{invoice.date}</span>
            <strong>{invoice.amount}</strong>
            <a
              className="cr-link cr-workspace-invoice-link"
              href={invoice.href}
              aria-label={`View invoice dated ${invoice.date}`}
            >
              View
              <ArrowUpRight size={15} aria-hidden="true" />
            </a>
          </li>
        ))}
      </ul>
      {!invoices.length && (
        <p className="cr-block-empty">
          No invoices yet. They will appear here after your first payment.
        </p>
      )}
    </Card>
  );
}

export function ApiKeysBlock({
  keys,
  onCreate,
  onRevoke,
}: {
  keys: Array<{ id: string; name: string; prefix: string; created: string }>;
  onCreate: FormAction;
  onRevoke: (id: string) => void | Promise<void>;
}) {
  const [error, setError] = useState(false),
    [busy, setBusy] = useState<string | null>(null);
  return (
    <Card className="cr-workspace-block cr-workspace-keys">
      <WorkspaceHeading
        eyebrow="Developer settings"
        title="API keys"
        description="Connect your tools to your workspace."
        action={
          <Dialog
            trigger={
              <>
                <Plus size={16} aria-hidden="true" />
                Create key
              </>
            }
            title="Create an API key"
            description="Give this key a name that helps you recognize its integration."
            footer={null}
          >
            <ActionForm
              onSubmit={onCreate}
              submitLabel="Create key"
              successMessage="Key created. Follow your application’s secure delivery flow."
            >
              <Field label="Key name">
                <Input
                  name="name"
                  required
                  placeholder="Production integration"
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-security-note">
        <ShieldCheck size={17} aria-hidden="true" />
        <span>
          Use keys on your server. Keep them out of public repositories and
          client-side code.
        </span>
      </div>
      <div className="cr-workspace-list-heading">
        <span>Secret keys</span>
        <Badge variant="outline">{keys.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-key-list">
        {keys.map((key) => (
          <li key={key.id}>
            <span className="cr-workspace-icon-tile">
              <KeyRound size={18} aria-hidden="true" />
            </span>
            <div className="cr-workspace-person">
              <strong>{key.name}</strong>
              <span>
                <code>{key.prefix}••••</code>
                <span className="cr-workspace-key-date">
                  Created {key.created}
                </span>
              </span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              disabled={Boolean(busy)}
              loading={busy === key.id}
              aria-label={`Revoke ${key.name}`}
              onClick={async () => {
                setBusy(key.id);
                setError(false);
                try {
                  await onRevoke(key.id);
                } catch {
                  setError(true);
                } finally {
                  setBusy(null);
                }
              }}
            >
              Revoke
            </Button>
          </li>
        ))}
      </ul>
      {!keys.length && (
        <p className="cr-block-empty">
          No API keys yet. Create a key to connect an integration.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to revoke this key.
        </p>
      )}
    </Card>
  );
}

export function NotificationsBlock({
  items,
  onReadAll,
  onOpen,
}: {
  items: Array<{
    id: string;
    title: string;
    description: string;
    time: string;
    unread: boolean;
  }>;
  onReadAll: () => void;
  onOpen: (id: string) => void;
}) {
  const unread = items.filter((item) => item.unread).length;
  return (
    <Card className="cr-workspace-block cr-workspace-notifications">
      <WorkspaceHeading
        eyebrow="Your inbox"
        title="Notifications"
        description="The latest from your team and workspace."
        action={
          <Button
            variant="ghost"
            size="sm"
            onClick={onReadAll}
            disabled={!unread}
          >
            <CheckCheck size={16} aria-hidden="true" />
            Mark all read
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>Recent activity</span>
        <Badge variant={unread ? "primary" : "outline"}>{unread} unread</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-notification-list">
        {items.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-notification"
              data-unread={item.unread || undefined}
              onClick={() => onOpen(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                {item.unread ? (
                  <Bell size={18} aria-hidden="true" />
                ) : (
                  <CheckCheck size={18} aria-hidden="true" />
                )}
              </span>
              <span className="cr-workspace-notification-copy">
                <strong>
                  {item.title}
                  {item.unread && (
                    <>
                      <span aria-hidden="true" className="cr-unread-dot" />
                      <span className="cr-sr-only">Unread</span>
                    </>
                  )}
                </strong>
                <span className="cr-description">{item.description}</span>
                <small>{item.time}</small>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!items.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <CheckCheck size={22} aria-hidden="true" />
          </span>
          <strong>You’re all caught up.</strong>
          <p>New updates will appear here.</p>
        </div>
      )}
    </Card>
  );
}
```


---

# blocks/app-header

---
title: "App Header"
description: "Breadcrumbs, search and account actions in an application header."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/app-header

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { AppHeaderBlock } from './components/blocks/application';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Sidebar](/docs/components/sidebar), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Breadcrumb](/docs/components/breadcrumb), [Button](/docs/components/button), [Card](/docs/components/card), [Dialog](/docs/components/dialog), [Dropdown](/docs/components/dropdown), [Field](/docs/components/field), [Input](/docs/components/input), [Progress](/docs/components/progress), [Switch](/docs/components/switch), [Tabs](/docs/components/tabs), [Textarea](/docs/components/textarea), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowUpRight,
  Bell,
  Building2,
  CheckCheck,
  ChevronRight,
  CreditCard,
  FileText,
  KeyRound,
  Layers2,
  LayoutGrid,
  Plus,
  Search,
  ShieldCheck,
  Trash2,
  UserRound,
  UserRoundPlus,
  UsersRound,
} from "lucide-react";
import {
  Sidebar,
  Avatar,
  Badge,
  Breadcrumb,
  Button,
  Card,
  Dialog,
  Dropdown,
  Field,
  Input,
  Progress,
  Switch,
  Tabs,
  Textarea,
} from '../ui';
import { ActionForm, type FormAction } from "./common";

function WorkspaceHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function AppSidebarBlock({
  workspace,
  items,
  accountName,
}: {
  workspace: string;
  items: ComponentProps<typeof Sidebar>["items"];
  accountName: string;
}) {
  return (
    <div className="cr-app-sidebar-block">
      <Sidebar
        brand={
          <span className="cr-workspace-brand">
            <span className="cr-workspace-brand-icon">
              <Layers2 size={19} aria-hidden="true" />
            </span>
            <span>
              <strong>{workspace}</strong>
              <small>Workspace</small>
            </span>
          </span>
        }
        items={items.map((item) => ({
          ...item,
          icon: item.icon ?? <LayoutGrid size={18} aria-hidden="true" />,
        }))}
        footer={
          <div className="cr-workspace-account">
            <Avatar name={accountName} size={34} />
            <span>
              <strong>{accountName}</strong>
              <small>Account</small>
            </span>
          </div>
        }
      />
    </div>
  );
}

export function AppHeaderBlock({
  breadcrumbs,
  accountName,
  onSearch,
  onSignOut,
}: {
  breadcrumbs: ComponentProps<typeof Breadcrumb>["items"];
  accountName: string;
  onSearch: () => void;
  onSignOut: () => void;
}) {
  return (
    <header className="cr-block-header cr-workspace-header">
      <div className="cr-workspace-header-location">
        <span className="cr-workspace-header-icon">
          <Layers2 size={18} aria-hidden="true" />
        </span>
        <Breadcrumb items={breadcrumbs} />
      </div>
      <div className="cr-workspace-header-actions">
        <Button variant="ghost" onClick={onSearch}>
          <Search size={17} aria-hidden="true" />
          <span>Search</span>
        </Button>
        <span className="cr-workspace-header-divider" aria-hidden="true" />
        <Dropdown
          trigger={
            <>
              <Avatar name={accountName} size={28} />
              <span className="cr-workspace-header-name">{accountName}</span>
              <span className="cr-sr-only">Account menu</span>
            </>
          }
          items={[{ label: "Sign out", onSelect: onSignOut }]}
        />
      </div>
    </header>
  );
}

export function ProfileBlock({
  name,
  email,
  bio = "",
  onSave,
}: {
  name: string;
  email: string;
  bio?: string;
  onSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-profile">
      <WorkspaceHeading
        eyebrow="Account"
        title="Your profile"
        description="The details your team sees when you work together."
      />
      <div className="cr-workspace-identity">
        <Avatar name={name} size={58} />
        <div>
          <strong>{name}</strong>
          <span>{email}</span>
        </div>
        <span className="cr-workspace-icon-tile">
          <UserRound size={20} aria-hidden="true" />
        </span>
      </div>
      <ActionForm onSubmit={onSave}>
        <div className="cr-workspace-form-grid">
          <Field label="Display name">
            <Input
              name="name"
              defaultValue={name}
              autoComplete="name"
              required
            />
          </Field>
          <Field label="Email address">
            <Input
              name="email"
              type="email"
              defaultValue={email}
              autoComplete="email"
              required
            />
          </Field>
        </div>
        <Field label="About you">
          <Textarea
            name="bio"
            defaultValue={bio}
            placeholder="A few words about you and your work."
          />
        </Field>
      </ActionForm>
    </Card>
  );
}

export function SettingsBlock({
  workspaceName,
  onSave,
  onNotificationSave,
}: {
  workspaceName: string;
  onSave: FormAction;
  onNotificationSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-settings">
      <WorkspaceHeading
        eyebrow="Workspace"
        title="Settings"
        description="A few details that make this space yours."
        action={
          <span className="cr-workspace-icon-tile">
            <Building2 size={20} aria-hidden="true" />
          </span>
        }
      />
      <Tabs
        label="Settings sections"
        items={[
          {
            value: "general",
            label: "General",
            content: (
              <ActionForm onSubmit={onSave}>
                <Field label="Workspace name">
                  <Input
                    name="workspace"
                    defaultValue={workspaceName}
                    required
                  />
                </Field>
                <Field label="Description">
                  <Textarea
                    name="description"
                    placeholder="What are you building?"
                  />
                </Field>
              </ActionForm>
            ),
          },
          {
            value: "notifications",
            label: "Notifications",
            content: (
              <ActionForm onSubmit={onNotificationSave}>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <FileText size={18} aria-hidden="true" />
                    </span>
                    <p>A summary of what happened across your workspace.</p>
                  </div>
                  <Switch name="digest" label="Weekly digest" defaultChecked />
                </div>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <Bell size={18} aria-hidden="true" />
                    </span>
                    <p>Stay in the loop when someone needs your attention.</p>
                  </div>
                  <Switch
                    name="mentions"
                    label="Mention notifications"
                    defaultChecked
                  />
                </div>
              </ActionForm>
            ),
          },
        ]}
      />
    </Card>
  );
}

export interface TeamMember {
  id: string;
  name: string;
  email: string;
  role: string;
}
export function TeamBlock({
  members,
  onInvite,
  onRemove,
}: {
  members: TeamMember[];
  onInvite: FormAction;
  onRemove: (id: string) => void | Promise<void>;
}) {
  const [removing, setRemoving] = useState<string | null>(null),
    [error, setError] = useState(false);
  return (
    <Card className="cr-workspace-block cr-workspace-team">
      <WorkspaceHeading
        eyebrow="People & access"
        title="Your team"
        description="Good work starts with the right people."
        action={
          <Dialog
            trigger={
              <>
                <UserRoundPlus size={16} aria-hidden="true" />
                Invite member
              </>
            }
            title="Invite someone to your team"
            description="Enter the email address of the person you’d like to invite."
            footer={null}
          >
            <ActionForm
              onSubmit={onInvite}
              submitLabel="Send invitation"
              successMessage="Invitation sent."
            >
              <Field label="Email address">
                <Input
                  name="email"
                  type="email"
                  autoComplete="email"
                  placeholder="colleague@company.com"
                  required
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>
          <UsersRound size={15} aria-hidden="true" />
          Team members
        </span>
        <Badge variant="outline">
          {members.length} {members.length === 1 ? "member" : "members"}
        </Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-member-list">
        {members.map((member) => (
          <li key={member.id}>
            <Avatar name={member.name} size={36} />
            <div className="cr-workspace-person">
              <strong>{member.name}</strong>
              <span>{member.email}</span>
            </div>
            <Badge variant="outline">{member.role}</Badge>
            <Button
              variant="ghost"
              size="sm"
              className="cr-workspace-icon-button"
              disabled={Boolean(removing)}
              loading={removing === member.id}
              aria-label={`Remove ${member.name}`}
              onClick={async () => {
                setRemoving(member.id);
                setError(false);
                try {
                  await onRemove(member.id);
                } catch {
                  setError(true);
                } finally {
                  setRemoving(null);
                }
              }}
            >
              {removing !== member.id && (
                <Trash2 size={16} aria-hidden="true" />
              )}
            </Button>
          </li>
        ))}
      </ul>
      {!members.length && (
        <p className="cr-block-empty">
          No team members yet. Invite someone to get started.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to remove this member.
        </p>
      )}
    </Card>
  );
}

export function BillingBlock({
  plan,
  price,
  renewal,
  usage,
  limit,
  onManage,
  invoices,
}: {
  plan: string;
  price: string;
  renewal: string;
  usage: number;
  limit: number;
  onManage: () => void;
  invoices: Array<{ id: string; date: string; amount: string; href: string }>;
}) {
  const safeLimit = Number.isFinite(limit) && limit > 0 ? limit : 1;
  const safeUsage = Number.isFinite(usage)
    ? Math.max(0, Math.min(usage, safeLimit))
    : 0;
  return (
    <Card className="cr-workspace-block cr-workspace-billing">
      <WorkspaceHeading
        eyebrow="Subscription"
        title="Billing"
        description="Your plan, usage and invoices in one place."
        action={
          <span className="cr-workspace-icon-tile">
            <CreditCard size={20} aria-hidden="true" />
          </span>
        }
      />
      <div className="cr-workspace-plan">
        <div className="cr-workspace-plan-main">
          <Badge variant="outline">{plan} plan</Badge>
          <strong className="cr-workspace-plan-price">{price}</strong>
          <span className="cr-description">{renewal}</span>
        </div>
        <Button variant="outline" onClick={onManage}>
          Manage plan
          <ArrowUpRight size={16} aria-hidden="true" />
        </Button>
      </div>
      <div className="cr-workspace-usage">
        <div className="cr-workspace-list-heading">
          <span>Team seats</span>
          <span>
            {usage} <span className="cr-description">/ {limit} used</span>
          </span>
        </div>
        <Progress label="Seats used" value={safeUsage} max={safeLimit} />
      </div>
      <div className="cr-workspace-list-heading">
        <span>Invoice history</span>
        <Badge variant="outline">{invoices.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-invoice-list">
        {invoices.map((invoice) => (
          <li key={invoice.id}>
            <span className="cr-workspace-icon-tile">
              <FileText size={17} aria-hidden="true" />
            </span>
            <span>{invoice.date}</span>
            <strong>{invoice.amount}</strong>
            <a
              className="cr-link cr-workspace-invoice-link"
              href={invoice.href}
              aria-label={`View invoice dated ${invoice.date}`}
            >
              View
              <ArrowUpRight size={15} aria-hidden="true" />
            </a>
          </li>
        ))}
      </ul>
      {!invoices.length && (
        <p className="cr-block-empty">
          No invoices yet. They will appear here after your first payment.
        </p>
      )}
    </Card>
  );
}

export function ApiKeysBlock({
  keys,
  onCreate,
  onRevoke,
}: {
  keys: Array<{ id: string; name: string; prefix: string; created: string }>;
  onCreate: FormAction;
  onRevoke: (id: string) => void | Promise<void>;
}) {
  const [error, setError] = useState(false),
    [busy, setBusy] = useState<string | null>(null);
  return (
    <Card className="cr-workspace-block cr-workspace-keys">
      <WorkspaceHeading
        eyebrow="Developer settings"
        title="API keys"
        description="Connect your tools to your workspace."
        action={
          <Dialog
            trigger={
              <>
                <Plus size={16} aria-hidden="true" />
                Create key
              </>
            }
            title="Create an API key"
            description="Give this key a name that helps you recognize its integration."
            footer={null}
          >
            <ActionForm
              onSubmit={onCreate}
              submitLabel="Create key"
              successMessage="Key created. Follow your application’s secure delivery flow."
            >
              <Field label="Key name">
                <Input
                  name="name"
                  required
                  placeholder="Production integration"
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-security-note">
        <ShieldCheck size={17} aria-hidden="true" />
        <span>
          Use keys on your server. Keep them out of public repositories and
          client-side code.
        </span>
      </div>
      <div className="cr-workspace-list-heading">
        <span>Secret keys</span>
        <Badge variant="outline">{keys.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-key-list">
        {keys.map((key) => (
          <li key={key.id}>
            <span className="cr-workspace-icon-tile">
              <KeyRound size={18} aria-hidden="true" />
            </span>
            <div className="cr-workspace-person">
              <strong>{key.name}</strong>
              <span>
                <code>{key.prefix}••••</code>
                <span className="cr-workspace-key-date">
                  Created {key.created}
                </span>
              </span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              disabled={Boolean(busy)}
              loading={busy === key.id}
              aria-label={`Revoke ${key.name}`}
              onClick={async () => {
                setBusy(key.id);
                setError(false);
                try {
                  await onRevoke(key.id);
                } catch {
                  setError(true);
                } finally {
                  setBusy(null);
                }
              }}
            >
              Revoke
            </Button>
          </li>
        ))}
      </ul>
      {!keys.length && (
        <p className="cr-block-empty">
          No API keys yet. Create a key to connect an integration.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to revoke this key.
        </p>
      )}
    </Card>
  );
}

export function NotificationsBlock({
  items,
  onReadAll,
  onOpen,
}: {
  items: Array<{
    id: string;
    title: string;
    description: string;
    time: string;
    unread: boolean;
  }>;
  onReadAll: () => void;
  onOpen: (id: string) => void;
}) {
  const unread = items.filter((item) => item.unread).length;
  return (
    <Card className="cr-workspace-block cr-workspace-notifications">
      <WorkspaceHeading
        eyebrow="Your inbox"
        title="Notifications"
        description="The latest from your team and workspace."
        action={
          <Button
            variant="ghost"
            size="sm"
            onClick={onReadAll}
            disabled={!unread}
          >
            <CheckCheck size={16} aria-hidden="true" />
            Mark all read
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>Recent activity</span>
        <Badge variant={unread ? "primary" : "outline"}>{unread} unread</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-notification-list">
        {items.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-notification"
              data-unread={item.unread || undefined}
              onClick={() => onOpen(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                {item.unread ? (
                  <Bell size={18} aria-hidden="true" />
                ) : (
                  <CheckCheck size={18} aria-hidden="true" />
                )}
              </span>
              <span className="cr-workspace-notification-copy">
                <strong>
                  {item.title}
                  {item.unread && (
                    <>
                      <span aria-hidden="true" className="cr-unread-dot" />
                      <span className="cr-sr-only">Unread</span>
                    </>
                  )}
                </strong>
                <span className="cr-description">{item.description}</span>
                <small>{item.time}</small>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!items.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <CheckCheck size={22} aria-hidden="true" />
          </span>
          <strong>You’re all caught up.</strong>
          <p>New updates will appear here.</p>
        </div>
      )}
    </Card>
  );
}
```


---

# blocks/app-sidebar

---
title: "App Sidebar"
description: "Collapsible workspace navigation with account identity."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/app-sidebar

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { AppSidebarBlock } from './components/blocks/application';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Sidebar](/docs/components/sidebar), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Breadcrumb](/docs/components/breadcrumb), [Button](/docs/components/button), [Card](/docs/components/card), [Dialog](/docs/components/dialog), [Dropdown](/docs/components/dropdown), [Field](/docs/components/field), [Input](/docs/components/input), [Progress](/docs/components/progress), [Switch](/docs/components/switch), [Tabs](/docs/components/tabs), [Textarea](/docs/components/textarea), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowUpRight,
  Bell,
  Building2,
  CheckCheck,
  ChevronRight,
  CreditCard,
  FileText,
  KeyRound,
  Layers2,
  LayoutGrid,
  Plus,
  Search,
  ShieldCheck,
  Trash2,
  UserRound,
  UserRoundPlus,
  UsersRound,
} from "lucide-react";
import {
  Sidebar,
  Avatar,
  Badge,
  Breadcrumb,
  Button,
  Card,
  Dialog,
  Dropdown,
  Field,
  Input,
  Progress,
  Switch,
  Tabs,
  Textarea,
} from '../ui';
import { ActionForm, type FormAction } from "./common";

function WorkspaceHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function AppSidebarBlock({
  workspace,
  items,
  accountName,
}: {
  workspace: string;
  items: ComponentProps<typeof Sidebar>["items"];
  accountName: string;
}) {
  return (
    <div className="cr-app-sidebar-block">
      <Sidebar
        brand={
          <span className="cr-workspace-brand">
            <span className="cr-workspace-brand-icon">
              <Layers2 size={19} aria-hidden="true" />
            </span>
            <span>
              <strong>{workspace}</strong>
              <small>Workspace</small>
            </span>
          </span>
        }
        items={items.map((item) => ({
          ...item,
          icon: item.icon ?? <LayoutGrid size={18} aria-hidden="true" />,
        }))}
        footer={
          <div className="cr-workspace-account">
            <Avatar name={accountName} size={34} />
            <span>
              <strong>{accountName}</strong>
              <small>Account</small>
            </span>
          </div>
        }
      />
    </div>
  );
}

export function AppHeaderBlock({
  breadcrumbs,
  accountName,
  onSearch,
  onSignOut,
}: {
  breadcrumbs: ComponentProps<typeof Breadcrumb>["items"];
  accountName: string;
  onSearch: () => void;
  onSignOut: () => void;
}) {
  return (
    <header className="cr-block-header cr-workspace-header">
      <div className="cr-workspace-header-location">
        <span className="cr-workspace-header-icon">
          <Layers2 size={18} aria-hidden="true" />
        </span>
        <Breadcrumb items={breadcrumbs} />
      </div>
      <div className="cr-workspace-header-actions">
        <Button variant="ghost" onClick={onSearch}>
          <Search size={17} aria-hidden="true" />
          <span>Search</span>
        </Button>
        <span className="cr-workspace-header-divider" aria-hidden="true" />
        <Dropdown
          trigger={
            <>
              <Avatar name={accountName} size={28} />
              <span className="cr-workspace-header-name">{accountName}</span>
              <span className="cr-sr-only">Account menu</span>
            </>
          }
          items={[{ label: "Sign out", onSelect: onSignOut }]}
        />
      </div>
    </header>
  );
}

export function ProfileBlock({
  name,
  email,
  bio = "",
  onSave,
}: {
  name: string;
  email: string;
  bio?: string;
  onSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-profile">
      <WorkspaceHeading
        eyebrow="Account"
        title="Your profile"
        description="The details your team sees when you work together."
      />
      <div className="cr-workspace-identity">
        <Avatar name={name} size={58} />
        <div>
          <strong>{name}</strong>
          <span>{email}</span>
        </div>
        <span className="cr-workspace-icon-tile">
          <UserRound size={20} aria-hidden="true" />
        </span>
      </div>
      <ActionForm onSubmit={onSave}>
        <div className="cr-workspace-form-grid">
          <Field label="Display name">
            <Input
              name="name"
              defaultValue={name}
              autoComplete="name"
              required
            />
          </Field>
          <Field label="Email address">
            <Input
              name="email"
              type="email"
              defaultValue={email}
              autoComplete="email"
              required
            />
          </Field>
        </div>
        <Field label="About you">
          <Textarea
            name="bio"
            defaultValue={bio}
            placeholder="A few words about you and your work."
          />
        </Field>
      </ActionForm>
    </Card>
  );
}

export function SettingsBlock({
  workspaceName,
  onSave,
  onNotificationSave,
}: {
  workspaceName: string;
  onSave: FormAction;
  onNotificationSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-settings">
      <WorkspaceHeading
        eyebrow="Workspace"
        title="Settings"
        description="A few details that make this space yours."
        action={
          <span className="cr-workspace-icon-tile">
            <Building2 size={20} aria-hidden="true" />
          </span>
        }
      />
      <Tabs
        label="Settings sections"
        items={[
          {
            value: "general",
            label: "General",
            content: (
              <ActionForm onSubmit={onSave}>
                <Field label="Workspace name">
                  <Input
                    name="workspace"
                    defaultValue={workspaceName}
                    required
                  />
                </Field>
                <Field label="Description">
                  <Textarea
                    name="description"
                    placeholder="What are you building?"
                  />
                </Field>
              </ActionForm>
            ),
          },
          {
            value: "notifications",
            label: "Notifications",
            content: (
              <ActionForm onSubmit={onNotificationSave}>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <FileText size={18} aria-hidden="true" />
                    </span>
                    <p>A summary of what happened across your workspace.</p>
                  </div>
                  <Switch name="digest" label="Weekly digest" defaultChecked />
                </div>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <Bell size={18} aria-hidden="true" />
                    </span>
                    <p>Stay in the loop when someone needs your attention.</p>
                  </div>
                  <Switch
                    name="mentions"
                    label="Mention notifications"
                    defaultChecked
                  />
                </div>
              </ActionForm>
            ),
          },
        ]}
      />
    </Card>
  );
}

export interface TeamMember {
  id: string;
  name: string;
  email: string;
  role: string;
}
export function TeamBlock({
  members,
  onInvite,
  onRemove,
}: {
  members: TeamMember[];
  onInvite: FormAction;
  onRemove: (id: string) => void | Promise<void>;
}) {
  const [removing, setRemoving] = useState<string | null>(null),
    [error, setError] = useState(false);
  return (
    <Card className="cr-workspace-block cr-workspace-team">
      <WorkspaceHeading
        eyebrow="People & access"
        title="Your team"
        description="Good work starts with the right people."
        action={
          <Dialog
            trigger={
              <>
                <UserRoundPlus size={16} aria-hidden="true" />
                Invite member
              </>
            }
            title="Invite someone to your team"
            description="Enter the email address of the person you’d like to invite."
            footer={null}
          >
            <ActionForm
              onSubmit={onInvite}
              submitLabel="Send invitation"
              successMessage="Invitation sent."
            >
              <Field label="Email address">
                <Input
                  name="email"
                  type="email"
                  autoComplete="email"
                  placeholder="colleague@company.com"
                  required
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>
          <UsersRound size={15} aria-hidden="true" />
          Team members
        </span>
        <Badge variant="outline">
          {members.length} {members.length === 1 ? "member" : "members"}
        </Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-member-list">
        {members.map((member) => (
          <li key={member.id}>
            <Avatar name={member.name} size={36} />
            <div className="cr-workspace-person">
              <strong>{member.name}</strong>
              <span>{member.email}</span>
            </div>
            <Badge variant="outline">{member.role}</Badge>
            <Button
              variant="ghost"
              size="sm"
              className="cr-workspace-icon-button"
              disabled={Boolean(removing)}
              loading={removing === member.id}
              aria-label={`Remove ${member.name}`}
              onClick={async () => {
                setRemoving(member.id);
                setError(false);
                try {
                  await onRemove(member.id);
                } catch {
                  setError(true);
                } finally {
                  setRemoving(null);
                }
              }}
            >
              {removing !== member.id && (
                <Trash2 size={16} aria-hidden="true" />
              )}
            </Button>
          </li>
        ))}
      </ul>
      {!members.length && (
        <p className="cr-block-empty">
          No team members yet. Invite someone to get started.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to remove this member.
        </p>
      )}
    </Card>
  );
}

export function BillingBlock({
  plan,
  price,
  renewal,
  usage,
  limit,
  onManage,
  invoices,
}: {
  plan: string;
  price: string;
  renewal: string;
  usage: number;
  limit: number;
  onManage: () => void;
  invoices: Array<{ id: string; date: string; amount: string; href: string }>;
}) {
  const safeLimit = Number.isFinite(limit) && limit > 0 ? limit : 1;
  const safeUsage = Number.isFinite(usage)
    ? Math.max(0, Math.min(usage, safeLimit))
    : 0;
  return (
    <Card className="cr-workspace-block cr-workspace-billing">
      <WorkspaceHeading
        eyebrow="Subscription"
        title="Billing"
        description="Your plan, usage and invoices in one place."
        action={
          <span className="cr-workspace-icon-tile">
            <CreditCard size={20} aria-hidden="true" />
          </span>
        }
      />
      <div className="cr-workspace-plan">
        <div className="cr-workspace-plan-main">
          <Badge variant="outline">{plan} plan</Badge>
          <strong className="cr-workspace-plan-price">{price}</strong>
          <span className="cr-description">{renewal}</span>
        </div>
        <Button variant="outline" onClick={onManage}>
          Manage plan
          <ArrowUpRight size={16} aria-hidden="true" />
        </Button>
      </div>
      <div className="cr-workspace-usage">
        <div className="cr-workspace-list-heading">
          <span>Team seats</span>
          <span>
            {usage} <span className="cr-description">/ {limit} used</span>
          </span>
        </div>
        <Progress label="Seats used" value={safeUsage} max={safeLimit} />
      </div>
      <div className="cr-workspace-list-heading">
        <span>Invoice history</span>
        <Badge variant="outline">{invoices.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-invoice-list">
        {invoices.map((invoice) => (
          <li key={invoice.id}>
            <span className="cr-workspace-icon-tile">
              <FileText size={17} aria-hidden="true" />
            </span>
            <span>{invoice.date}</span>
            <strong>{invoice.amount}</strong>
            <a
              className="cr-link cr-workspace-invoice-link"
              href={invoice.href}
              aria-label={`View invoice dated ${invoice.date}`}
            >
              View
              <ArrowUpRight size={15} aria-hidden="true" />
            </a>
          </li>
        ))}
      </ul>
      {!invoices.length && (
        <p className="cr-block-empty">
          No invoices yet. They will appear here after your first payment.
        </p>
      )}
    </Card>
  );
}

export function ApiKeysBlock({
  keys,
  onCreate,
  onRevoke,
}: {
  keys: Array<{ id: string; name: string; prefix: string; created: string }>;
  onCreate: FormAction;
  onRevoke: (id: string) => void | Promise<void>;
}) {
  const [error, setError] = useState(false),
    [busy, setBusy] = useState<string | null>(null);
  return (
    <Card className="cr-workspace-block cr-workspace-keys">
      <WorkspaceHeading
        eyebrow="Developer settings"
        title="API keys"
        description="Connect your tools to your workspace."
        action={
          <Dialog
            trigger={
              <>
                <Plus size={16} aria-hidden="true" />
                Create key
              </>
            }
            title="Create an API key"
            description="Give this key a name that helps you recognize its integration."
            footer={null}
          >
            <ActionForm
              onSubmit={onCreate}
              submitLabel="Create key"
              successMessage="Key created. Follow your application’s secure delivery flow."
            >
              <Field label="Key name">
                <Input
                  name="name"
                  required
                  placeholder="Production integration"
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-security-note">
        <ShieldCheck size={17} aria-hidden="true" />
        <span>
          Use keys on your server. Keep them out of public repositories and
          client-side code.
        </span>
      </div>
      <div className="cr-workspace-list-heading">
        <span>Secret keys</span>
        <Badge variant="outline">{keys.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-key-list">
        {keys.map((key) => (
          <li key={key.id}>
            <span className="cr-workspace-icon-tile">
              <KeyRound size={18} aria-hidden="true" />
            </span>
            <div className="cr-workspace-person">
              <strong>{key.name}</strong>
              <span>
                <code>{key.prefix}••••</code>
                <span className="cr-workspace-key-date">
                  Created {key.created}
                </span>
              </span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              disabled={Boolean(busy)}
              loading={busy === key.id}
              aria-label={`Revoke ${key.name}`}
              onClick={async () => {
                setBusy(key.id);
                setError(false);
                try {
                  await onRevoke(key.id);
                } catch {
                  setError(true);
                } finally {
                  setBusy(null);
                }
              }}
            >
              Revoke
            </Button>
          </li>
        ))}
      </ul>
      {!keys.length && (
        <p className="cr-block-empty">
          No API keys yet. Create a key to connect an integration.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to revoke this key.
        </p>
      )}
    </Card>
  );
}

export function NotificationsBlock({
  items,
  onReadAll,
  onOpen,
}: {
  items: Array<{
    id: string;
    title: string;
    description: string;
    time: string;
    unread: boolean;
  }>;
  onReadAll: () => void;
  onOpen: (id: string) => void;
}) {
  const unread = items.filter((item) => item.unread).length;
  return (
    <Card className="cr-workspace-block cr-workspace-notifications">
      <WorkspaceHeading
        eyebrow="Your inbox"
        title="Notifications"
        description="The latest from your team and workspace."
        action={
          <Button
            variant="ghost"
            size="sm"
            onClick={onReadAll}
            disabled={!unread}
          >
            <CheckCheck size={16} aria-hidden="true" />
            Mark all read
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>Recent activity</span>
        <Badge variant={unread ? "primary" : "outline"}>{unread} unread</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-notification-list">
        {items.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-notification"
              data-unread={item.unread || undefined}
              onClick={() => onOpen(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                {item.unread ? (
                  <Bell size={18} aria-hidden="true" />
                ) : (
                  <CheckCheck size={18} aria-hidden="true" />
                )}
              </span>
              <span className="cr-workspace-notification-copy">
                <strong>
                  {item.title}
                  {item.unread && (
                    <>
                      <span aria-hidden="true" className="cr-unread-dot" />
                      <span className="cr-sr-only">Unread</span>
                    </>
                  )}
                </strong>
                <span className="cr-description">{item.description}</span>
                <small>{item.time}</small>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!items.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <CheckCheck size={22} aria-hidden="true" />
          </span>
          <strong>You’re all caught up.</strong>
          <p>New updates will appear here.</p>
        </div>
      )}
    </Card>
  );
}
```


---

# blocks/billing

---
title: "Billing"
description: "Subscription summary, seat usage and invoice links."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/billing

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { BillingBlock } from './components/blocks/application';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Sidebar](/docs/components/sidebar), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Breadcrumb](/docs/components/breadcrumb), [Button](/docs/components/button), [Card](/docs/components/card), [Dialog](/docs/components/dialog), [Dropdown](/docs/components/dropdown), [Field](/docs/components/field), [Input](/docs/components/input), [Progress](/docs/components/progress), [Switch](/docs/components/switch), [Tabs](/docs/components/tabs), [Textarea](/docs/components/textarea), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowUpRight,
  Bell,
  Building2,
  CheckCheck,
  ChevronRight,
  CreditCard,
  FileText,
  KeyRound,
  Layers2,
  LayoutGrid,
  Plus,
  Search,
  ShieldCheck,
  Trash2,
  UserRound,
  UserRoundPlus,
  UsersRound,
} from "lucide-react";
import {
  Sidebar,
  Avatar,
  Badge,
  Breadcrumb,
  Button,
  Card,
  Dialog,
  Dropdown,
  Field,
  Input,
  Progress,
  Switch,
  Tabs,
  Textarea,
} from '../ui';
import { ActionForm, type FormAction } from "./common";

function WorkspaceHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function AppSidebarBlock({
  workspace,
  items,
  accountName,
}: {
  workspace: string;
  items: ComponentProps<typeof Sidebar>["items"];
  accountName: string;
}) {
  return (
    <div className="cr-app-sidebar-block">
      <Sidebar
        brand={
          <span className="cr-workspace-brand">
            <span className="cr-workspace-brand-icon">
              <Layers2 size={19} aria-hidden="true" />
            </span>
            <span>
              <strong>{workspace}</strong>
              <small>Workspace</small>
            </span>
          </span>
        }
        items={items.map((item) => ({
          ...item,
          icon: item.icon ?? <LayoutGrid size={18} aria-hidden="true" />,
        }))}
        footer={
          <div className="cr-workspace-account">
            <Avatar name={accountName} size={34} />
            <span>
              <strong>{accountName}</strong>
              <small>Account</small>
            </span>
          </div>
        }
      />
    </div>
  );
}

export function AppHeaderBlock({
  breadcrumbs,
  accountName,
  onSearch,
  onSignOut,
}: {
  breadcrumbs: ComponentProps<typeof Breadcrumb>["items"];
  accountName: string;
  onSearch: () => void;
  onSignOut: () => void;
}) {
  return (
    <header className="cr-block-header cr-workspace-header">
      <div className="cr-workspace-header-location">
        <span className="cr-workspace-header-icon">
          <Layers2 size={18} aria-hidden="true" />
        </span>
        <Breadcrumb items={breadcrumbs} />
      </div>
      <div className="cr-workspace-header-actions">
        <Button variant="ghost" onClick={onSearch}>
          <Search size={17} aria-hidden="true" />
          <span>Search</span>
        </Button>
        <span className="cr-workspace-header-divider" aria-hidden="true" />
        <Dropdown
          trigger={
            <>
              <Avatar name={accountName} size={28} />
              <span className="cr-workspace-header-name">{accountName}</span>
              <span className="cr-sr-only">Account menu</span>
            </>
          }
          items={[{ label: "Sign out", onSelect: onSignOut }]}
        />
      </div>
    </header>
  );
}

export function ProfileBlock({
  name,
  email,
  bio = "",
  onSave,
}: {
  name: string;
  email: string;
  bio?: string;
  onSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-profile">
      <WorkspaceHeading
        eyebrow="Account"
        title="Your profile"
        description="The details your team sees when you work together."
      />
      <div className="cr-workspace-identity">
        <Avatar name={name} size={58} />
        <div>
          <strong>{name}</strong>
          <span>{email}</span>
        </div>
        <span className="cr-workspace-icon-tile">
          <UserRound size={20} aria-hidden="true" />
        </span>
      </div>
      <ActionForm onSubmit={onSave}>
        <div className="cr-workspace-form-grid">
          <Field label="Display name">
            <Input
              name="name"
              defaultValue={name}
              autoComplete="name"
              required
            />
          </Field>
          <Field label="Email address">
            <Input
              name="email"
              type="email"
              defaultValue={email}
              autoComplete="email"
              required
            />
          </Field>
        </div>
        <Field label="About you">
          <Textarea
            name="bio"
            defaultValue={bio}
            placeholder="A few words about you and your work."
          />
        </Field>
      </ActionForm>
    </Card>
  );
}

export function SettingsBlock({
  workspaceName,
  onSave,
  onNotificationSave,
}: {
  workspaceName: string;
  onSave: FormAction;
  onNotificationSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-settings">
      <WorkspaceHeading
        eyebrow="Workspace"
        title="Settings"
        description="A few details that make this space yours."
        action={
          <span className="cr-workspace-icon-tile">
            <Building2 size={20} aria-hidden="true" />
          </span>
        }
      />
      <Tabs
        label="Settings sections"
        items={[
          {
            value: "general",
            label: "General",
            content: (
              <ActionForm onSubmit={onSave}>
                <Field label="Workspace name">
                  <Input
                    name="workspace"
                    defaultValue={workspaceName}
                    required
                  />
                </Field>
                <Field label="Description">
                  <Textarea
                    name="description"
                    placeholder="What are you building?"
                  />
                </Field>
              </ActionForm>
            ),
          },
          {
            value: "notifications",
            label: "Notifications",
            content: (
              <ActionForm onSubmit={onNotificationSave}>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <FileText size={18} aria-hidden="true" />
                    </span>
                    <p>A summary of what happened across your workspace.</p>
                  </div>
                  <Switch name="digest" label="Weekly digest" defaultChecked />
                </div>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <Bell size={18} aria-hidden="true" />
                    </span>
                    <p>Stay in the loop when someone needs your attention.</p>
                  </div>
                  <Switch
                    name="mentions"
                    label="Mention notifications"
                    defaultChecked
                  />
                </div>
              </ActionForm>
            ),
          },
        ]}
      />
    </Card>
  );
}

export interface TeamMember {
  id: string;
  name: string;
  email: string;
  role: string;
}
export function TeamBlock({
  members,
  onInvite,
  onRemove,
}: {
  members: TeamMember[];
  onInvite: FormAction;
  onRemove: (id: string) => void | Promise<void>;
}) {
  const [removing, setRemoving] = useState<string | null>(null),
    [error, setError] = useState(false);
  return (
    <Card className="cr-workspace-block cr-workspace-team">
      <WorkspaceHeading
        eyebrow="People & access"
        title="Your team"
        description="Good work starts with the right people."
        action={
          <Dialog
            trigger={
              <>
                <UserRoundPlus size={16} aria-hidden="true" />
                Invite member
              </>
            }
            title="Invite someone to your team"
            description="Enter the email address of the person you’d like to invite."
            footer={null}
          >
            <ActionForm
              onSubmit={onInvite}
              submitLabel="Send invitation"
              successMessage="Invitation sent."
            >
              <Field label="Email address">
                <Input
                  name="email"
                  type="email"
                  autoComplete="email"
                  placeholder="colleague@company.com"
                  required
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>
          <UsersRound size={15} aria-hidden="true" />
          Team members
        </span>
        <Badge variant="outline">
          {members.length} {members.length === 1 ? "member" : "members"}
        </Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-member-list">
        {members.map((member) => (
          <li key={member.id}>
            <Avatar name={member.name} size={36} />
            <div className="cr-workspace-person">
              <strong>{member.name}</strong>
              <span>{member.email}</span>
            </div>
            <Badge variant="outline">{member.role}</Badge>
            <Button
              variant="ghost"
              size="sm"
              className="cr-workspace-icon-button"
              disabled={Boolean(removing)}
              loading={removing === member.id}
              aria-label={`Remove ${member.name}`}
              onClick={async () => {
                setRemoving(member.id);
                setError(false);
                try {
                  await onRemove(member.id);
                } catch {
                  setError(true);
                } finally {
                  setRemoving(null);
                }
              }}
            >
              {removing !== member.id && (
                <Trash2 size={16} aria-hidden="true" />
              )}
            </Button>
          </li>
        ))}
      </ul>
      {!members.length && (
        <p className="cr-block-empty">
          No team members yet. Invite someone to get started.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to remove this member.
        </p>
      )}
    </Card>
  );
}

export function BillingBlock({
  plan,
  price,
  renewal,
  usage,
  limit,
  onManage,
  invoices,
}: {
  plan: string;
  price: string;
  renewal: string;
  usage: number;
  limit: number;
  onManage: () => void;
  invoices: Array<{ id: string; date: string; amount: string; href: string }>;
}) {
  const safeLimit = Number.isFinite(limit) && limit > 0 ? limit : 1;
  const safeUsage = Number.isFinite(usage)
    ? Math.max(0, Math.min(usage, safeLimit))
    : 0;
  return (
    <Card className="cr-workspace-block cr-workspace-billing">
      <WorkspaceHeading
        eyebrow="Subscription"
        title="Billing"
        description="Your plan, usage and invoices in one place."
        action={
          <span className="cr-workspace-icon-tile">
            <CreditCard size={20} aria-hidden="true" />
          </span>
        }
      />
      <div className="cr-workspace-plan">
        <div className="cr-workspace-plan-main">
          <Badge variant="outline">{plan} plan</Badge>
          <strong className="cr-workspace-plan-price">{price}</strong>
          <span className="cr-description">{renewal}</span>
        </div>
        <Button variant="outline" onClick={onManage}>
          Manage plan
          <ArrowUpRight size={16} aria-hidden="true" />
        </Button>
      </div>
      <div className="cr-workspace-usage">
        <div className="cr-workspace-list-heading">
          <span>Team seats</span>
          <span>
            {usage} <span className="cr-description">/ {limit} used</span>
          </span>
        </div>
        <Progress label="Seats used" value={safeUsage} max={safeLimit} />
      </div>
      <div className="cr-workspace-list-heading">
        <span>Invoice history</span>
        <Badge variant="outline">{invoices.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-invoice-list">
        {invoices.map((invoice) => (
          <li key={invoice.id}>
            <span className="cr-workspace-icon-tile">
              <FileText size={17} aria-hidden="true" />
            </span>
            <span>{invoice.date}</span>
            <strong>{invoice.amount}</strong>
            <a
              className="cr-link cr-workspace-invoice-link"
              href={invoice.href}
              aria-label={`View invoice dated ${invoice.date}`}
            >
              View
              <ArrowUpRight size={15} aria-hidden="true" />
            </a>
          </li>
        ))}
      </ul>
      {!invoices.length && (
        <p className="cr-block-empty">
          No invoices yet. They will appear here after your first payment.
        </p>
      )}
    </Card>
  );
}

export function ApiKeysBlock({
  keys,
  onCreate,
  onRevoke,
}: {
  keys: Array<{ id: string; name: string; prefix: string; created: string }>;
  onCreate: FormAction;
  onRevoke: (id: string) => void | Promise<void>;
}) {
  const [error, setError] = useState(false),
    [busy, setBusy] = useState<string | null>(null);
  return (
    <Card className="cr-workspace-block cr-workspace-keys">
      <WorkspaceHeading
        eyebrow="Developer settings"
        title="API keys"
        description="Connect your tools to your workspace."
        action={
          <Dialog
            trigger={
              <>
                <Plus size={16} aria-hidden="true" />
                Create key
              </>
            }
            title="Create an API key"
            description="Give this key a name that helps you recognize its integration."
            footer={null}
          >
            <ActionForm
              onSubmit={onCreate}
              submitLabel="Create key"
              successMessage="Key created. Follow your application’s secure delivery flow."
            >
              <Field label="Key name">
                <Input
                  name="name"
                  required
                  placeholder="Production integration"
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-security-note">
        <ShieldCheck size={17} aria-hidden="true" />
        <span>
          Use keys on your server. Keep them out of public repositories and
          client-side code.
        </span>
      </div>
      <div className="cr-workspace-list-heading">
        <span>Secret keys</span>
        <Badge variant="outline">{keys.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-key-list">
        {keys.map((key) => (
          <li key={key.id}>
            <span className="cr-workspace-icon-tile">
              <KeyRound size={18} aria-hidden="true" />
            </span>
            <div className="cr-workspace-person">
              <strong>{key.name}</strong>
              <span>
                <code>{key.prefix}••••</code>
                <span className="cr-workspace-key-date">
                  Created {key.created}
                </span>
              </span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              disabled={Boolean(busy)}
              loading={busy === key.id}
              aria-label={`Revoke ${key.name}`}
              onClick={async () => {
                setBusy(key.id);
                setError(false);
                try {
                  await onRevoke(key.id);
                } catch {
                  setError(true);
                } finally {
                  setBusy(null);
                }
              }}
            >
              Revoke
            </Button>
          </li>
        ))}
      </ul>
      {!keys.length && (
        <p className="cr-block-empty">
          No API keys yet. Create a key to connect an integration.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to revoke this key.
        </p>
      )}
    </Card>
  );
}

export function NotificationsBlock({
  items,
  onReadAll,
  onOpen,
}: {
  items: Array<{
    id: string;
    title: string;
    description: string;
    time: string;
    unread: boolean;
  }>;
  onReadAll: () => void;
  onOpen: (id: string) => void;
}) {
  const unread = items.filter((item) => item.unread).length;
  return (
    <Card className="cr-workspace-block cr-workspace-notifications">
      <WorkspaceHeading
        eyebrow="Your inbox"
        title="Notifications"
        description="The latest from your team and workspace."
        action={
          <Button
            variant="ghost"
            size="sm"
            onClick={onReadAll}
            disabled={!unread}
          >
            <CheckCheck size={16} aria-hidden="true" />
            Mark all read
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>Recent activity</span>
        <Badge variant={unread ? "primary" : "outline"}>{unread} unread</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-notification-list">
        {items.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-notification"
              data-unread={item.unread || undefined}
              onClick={() => onOpen(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                {item.unread ? (
                  <Bell size={18} aria-hidden="true" />
                ) : (
                  <CheckCheck size={18} aria-hidden="true" />
                )}
              </span>
              <span className="cr-workspace-notification-copy">
                <strong>
                  {item.title}
                  {item.unread && (
                    <>
                      <span aria-hidden="true" className="cr-unread-dot" />
                      <span className="cr-sr-only">Unread</span>
                    </>
                  )}
                </strong>
                <span className="cr-description">{item.description}</span>
                <small>{item.time}</small>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!items.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <CheckCheck size={22} aria-hidden="true" />
          </span>
          <strong>You’re all caught up.</strong>
          <p>New updates will appear here.</p>
        </div>
      )}
    </Card>
  );
}
```


---

# blocks/cta

---
title: "Call to Action"
description: "A call-to-action panel with product copy."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/cta

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { CtaBlock } from './components/blocks/marketing';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Accordion](/docs/components/accordion), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Card](/docs/components/card).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import type { ReactNode } from "react";
import {
  ArrowRight,
  ArrowUpRight,
  Check,
  Layers3,
  Quote,
  SlidersHorizontal,
  Workflow,
} from "lucide-react";
import { Accordion, Avatar, Badge, Card } from '../ui';

function MarketingHeading({
  title,
  description,
  eyebrow,
}: {
  title: string;
  description?: string;
  eyebrow?: string;
}) {
  return (
    <header className="cr-marketing-heading">
      <div>
        {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
        <h2>{title}</h2>
      </div>
      {description && <p className="cr-description">{description}</p>}
    </header>
  );
}

export function HeroBlock({
  eyebrow,
  title,
  description,
  primary,
  secondary,
  children,
}: {
  eyebrow: string;
  title: string;
  description: string;
  primary: { label: string; href: string };
  secondary?: { label: string; href: string };
  children?: ReactNode;
}) {
  return (
    <section className="cr-hero cr-marketing-hero">
      <div className="cr-hero-decoration" aria-hidden="true">
        <span>
          <Layers3 strokeWidth={1.75} />
        </span>
        <span>
          <SlidersHorizontal strokeWidth={1.75} />
        </span>
        <span>
          <Workflow strokeWidth={1.75} />
        </span>
      </div>
      <div className="cr-hero-content">
        <Badge variant="outline">
          {eyebrow}
          <ArrowUpRight size={13} strokeWidth={1.75} aria-hidden="true" />
        </Badge>
        <h1>{title}</h1>
        <p className="cr-description">{description}</p>
        <div className="cr-hero-actions">
          <a className="cr-button" href={primary.href}>
            {primary.label}
            <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
          </a>
          {secondary && (
            <a className="cr-button" data-variant="ghost" href={secondary.href}>
              {secondary.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
      </div>
      {children && <div className="cr-hero-media">{children}</div>}
    </section>
  );
}

export function FeaturesBlock({
  title,
  description,
  eyebrow,
  items,
}: {
  title: string;
  description: string;
  eyebrow?: string;
  items: Array<{
    title: string;
    description: string;
    icon?: ReactNode;
    visual?: ReactNode;
    eyebrow?: string;
    href?: string;
    linkLabel?: string;
  }>;
}) {
  const fallbackIcons = [Layers3, Workflow, SlidersHorizontal];
  return (
    <section className="cr-marketing-section cr-features-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-features-grid">
        {items.map((item, index) => {
          const Icon = fallbackIcons[index % fallbackIcons.length];
          return (
            <Card
              key={item.title}
              className="cr-feature-card"
              data-featured={(index === 0 && items.length >= 3) || undefined}
              data-has-visual={Boolean(item.visual) || undefined}
            >
              <div className="cr-feature-copy">
                <div className="cr-feature-topline">
                  <span aria-hidden="true" className="cr-feature-icon">
                    {item.icon ?? <Icon size={22} strokeWidth={1.75} />}
                  </span>
                  <span className="cr-feature-index" aria-hidden="true">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                </div>
                {item.eyebrow && (
                  <p className="cr-marketing-eyebrow">{item.eyebrow}</p>
                )}
                <h3>{item.title}</h3>
                <p className="cr-description">{item.description}</p>
                {item.href && (
                  <a className="cr-feature-link" href={item.href}>
                    {item.linkLabel ?? "Explore feature"}
                    <ArrowUpRight
                      size={16}
                      strokeWidth={1.75}
                      aria-hidden="true"
                    />
                  </a>
                )}
              </div>
              {item.visual && (
                <div className="cr-feature-visual">{item.visual}</div>
              )}
            </Card>
          );
        })}
      </div>
    </section>
  );
}

export function PricingBlock({
  title,
  plans,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  plans: Array<{
    name: string;
    price: string;
    period: string;
    description: string;
    features: string[];
    href: string;
    action: string;
    featured?: boolean;
  }>;
}) {
  return (
    <section className="cr-marketing-section cr-pricing-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-pricing-grid">
        {plans.map((plan) => (
          <Card
            key={plan.name}
            className="cr-pricing-card"
            data-featured={plan.featured || undefined}
          >
            <div className="cr-plan-heading">
              <h3>{plan.name}</h3>
              <div
                className="cr-price-recommendation"
                aria-hidden={!plan.featured || undefined}
              >
                {plan.featured && <Badge variant="primary">Recommended</Badge>}
              </div>
            </div>
            <p className="cr-plan-description cr-description">
              {plan.description}
            </p>
            <p className="cr-price">
              {plan.price}
              <small>{plan.period}</small>
            </p>
            <ul className="cr-price-features">
              {plan.features.map((feature) => (
                <li key={feature}>
                  <Check size={17} strokeWidth={1.75} aria-hidden="true" />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
            <a
              className="cr-button"
              data-variant={plan.featured ? "primary" : "outline"}
              href={plan.href}
            >
              {plan.action}
              <ArrowRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function TestimonialsBlock({
  title,
  quotes,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  quotes: Array<{ quote: string; name: string; role: string; avatar?: string }>;
}) {
  return (
    <section className="cr-marketing-section cr-testimonials-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-testimonials-grid">
        {quotes.map((quote, index) => (
          <Card
            key={quote.name}
            className="cr-testimonial-card"
            data-featured={index === 0 || undefined}
          >
            <figure className="cr-testimonial-figure">
              <Quote
                className="cr-quote-icon"
                size={26}
                strokeWidth={1.75}
                aria-hidden="true"
              />
              <blockquote className="cr-quote">
                <p>{quote.quote}</p>
              </blockquote>
              <figcaption className="cr-quote-author">
                <Avatar name={quote.name} src={quote.avatar} size={40} />
                <div>
                  <cite>{quote.name}</cite>
                  <p className="cr-description">{quote.role}</p>
                </div>
              </figcaption>
            </figure>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function FaqBlock({
  title,
  items,
  eyebrow,
  description,
  contact,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  contact?: { label: string; href: string };
  items: Array<{ question: string; answer: ReactNode }>;
}) {
  return (
    <section className="cr-marketing-section cr-faq-section">
      <div className="cr-faq-layout">
        <div className="cr-faq-intro">
          <MarketingHeading
            title={title}
            description={description}
            eyebrow={eyebrow}
          />
          {contact && (
            <a className="cr-feature-link" href={contact.href}>
              {contact.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
        <div className="cr-faq-content">
          <Accordion
            items={items.map((item, index) => ({
              value: String(index),
              title: item.question,
              content: item.answer,
            }))}
          />
        </div>
      </div>
    </section>
  );
}

export function CtaBlock({
  title,
  description,
  action,
  eyebrow,
  secondary,
}: {
  title: string;
  description: string;
  action: { label: string; href: string };
  eyebrow?: string;
  secondary?: { label: string; href: string };
}) {
  return (
    <Card className="cr-cta-card">
      <div className="cr-cta">
        <div className="cr-cta-content">
          {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
          <h2>{title}</h2>
          <p className="cr-description">{description}</p>
          <div className="cr-cta-actions">
            <a className="cr-button" href={action.href}>
              {action.label}
              <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
            </a>
            {secondary && (
              <a className="cr-feature-link" href={secondary.href}>
                {secondary.label}
                <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
              </a>
            )}
          </div>
        </div>
        <div className="cr-cta-emblem" aria-hidden="true">
          <ArrowUpRight strokeWidth={1.75} />
        </div>
      </div>
    </Card>
  );
}

export function FooterBlock({
  brand,
  description,
  groups,
  copyright,
  logo,
  brandHref,
  legalLinks,
}: {
  brand: string;
  description: string;
  groups: Array<{
    title: string;
    links: Array<{ label: string; href: string }>;
  }>;
  copyright: string;
  logo?: ReactNode;
  brandHref?: string;
  legalLinks?: Array<{ label: string; href: string }>;
}) {
  const identity = (
    <>
      {logo && (
        <span className="cr-footer-logo" aria-hidden="true">
          {logo}
        </span>
      )}
      <strong>{brand}</strong>
    </>
  );
  return (
    <footer className="cr-footer">
      <div className="cr-footer-main">
        <div className="cr-footer-brand">
          {brandHref ? (
            <a className="cr-footer-identity" href={brandHref}>
              {identity}
            </a>
          ) : (
            <div className="cr-footer-identity">{identity}</div>
          )}
          <p className="cr-description">{description}</p>
        </div>
        <div className="cr-footer-navigation">
          {groups.map((group) => (
            <nav key={group.title} aria-label={group.title}>
              <strong>{group.title}</strong>
              {group.links.map((link) => (
                <a key={link.href} href={link.href}>
                  {link.label}
                </a>
              ))}
            </nav>
          ))}
        </div>
      </div>
      <div className="cr-footer-bottom">
        <p className="cr-description">{copyright}</p>
        {legalLinks?.length ? (
          <nav aria-label="Legal">
            {legalLinks.map((link) => (
              <a href={link.href} key={link.href}>
                {link.label}
              </a>
            ))}
          </nav>
        ) : null}
      </div>
    </footer>
  );
}
```


---

# blocks/data-table

---
title: "Data Table"
description: "A searchable, sortable, paginated records panel."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/data-table

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { DataTableBlock } from './components/blocks/data';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Badge](/docs/components/badge), [Button](/docs/components/button), [Card](/docs/components/card), [Data Table](/docs/components/data-table), [Empty State](/docs/components/empty-state), [Field](/docs/components/field), [Input](/docs/components/input), [Select](/docs/components/select), [Separator](/docs/components/separator).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useMemo, useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowDownRight,
  ArrowUpRight,
  ChartNoAxesColumn,
  ChevronRight,
  FileText,
  FolderPlus,
  ListFilter,
  Minus,
  Pencil,
  Plus,
  Search,
  SearchX,
  X,
} from "lucide-react";
import {
  Badge,
  Button,
  Card,
  DataTable,
  EmptyState,
  Field,
  Input,
  Select,
  Separator,
} from '../ui';

function DataHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function DataTableBlock({
  title,
  description,
  columns,
  rows,
  onCreate,
}: {
  title: string;
  description?: string;
  columns: ComponentProps<typeof DataTable>["columns"];
  rows: ComponentProps<typeof DataTable>["rows"];
  onCreate: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-data-table">
      <DataHeading
        eyebrow="Workspace data"
        title={title}
        description={description}
        action={
          <Button onClick={onCreate}>
            <Plus size={16} aria-hidden="true" />
            Add record
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>All records</span>
        <Badge variant="outline">
          {rows.length} {rows.length === 1 ? "record" : "records"}
        </Badge>
      </div>
      <DataTable caption={title} columns={columns} rows={rows} />
    </Card>
  );
}

export function FiltersBlock({
  onChange,
  statuses,
}: {
  onChange: (filters: { query: string; status: string }) => void;
  statuses: Array<{ value: string; label: string }>;
}) {
  const [query, setQuery] = useState(""),
    [status, setStatus] = useState("all");
  const active = Number(Boolean(query)) + Number(status !== "all");
  return (
    <Card className="cr-workspace-block cr-workspace-filter-block">
      <div className="cr-workspace-filter-heading">
        <span>
          <ListFilter size={17} aria-hidden="true" />
          <strong>Filter records</strong>
        </span>
        {active > 0 && <Badge variant="outline">{active} active</Badge>}
      </div>
      <div className="cr-block-filters cr-workspace-filters">
        <Field label="Search">
          <div className="cr-workspace-search-field">
            <Search size={17} aria-hidden="true" />
            <Input
              type="search"
              value={query}
              placeholder="Name or keyword…"
              onChange={(event) => {
                setQuery(event.target.value);
                onChange({ query: event.target.value, status });
              }}
            />
          </div>
        </Field>
        <Field label="Status">
          <Select
            label="Status"
            value={status}
            options={[
              { value: "all", label: "All statuses" },
              ...statuses.filter((item) => item.value !== "all"),
            ]}
            onValueChange={(value) => {
              const next = value ?? "all";
              setStatus(next);
              onChange({ query, status: next });
            }}
          />
        </Field>
        <Button
          variant="ghost"
          disabled={!active}
          onClick={() => {
            setQuery("");
            setStatus("all");
            onChange({ query: "", status: "all" });
          }}
        >
          <X size={15} aria-hidden="true" />
          Clear filters
        </Button>
      </div>
    </Card>
  );
}

export function SearchBlock({
  items,
  onSelect,
}: {
  items: Array<{ id: string; title: string; description: string }>;
  onSelect: (id: string) => void;
}) {
  const [query, setQuery] = useState("");
  const results = useMemo(
    () =>
      items.filter((item) =>
        `${item.title} ${item.description}`
          .toLowerCase()
          .includes(query.toLowerCase()),
      ),
    [items, query],
  );
  return (
    <Card className="cr-workspace-block cr-workspace-search-block">
      <DataHeading
        eyebrow="Workspace search"
        title="Find your next step"
        description="Documents, projects and ideas. Right where you need them."
      />
      <div className="cr-workspace-search-field">
        <Search size={18} aria-hidden="true" />
        <Input
          aria-label="Search content"
          type="search"
          value={query}
          placeholder="Search your workspace…"
          onChange={(event) => setQuery(event.target.value)}
        />
      </div>
      <div className="cr-workspace-list-heading">
        <span>{query ? "Matching results" : "All items"}</span>
        <span className="cr-description" role="status">
          {results.length} {results.length === 1 ? "result" : "results"}
        </span>
      </div>
      <ul className="cr-workspace-list cr-workspace-search-results">
        {results.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-search-result"
              onClick={() => onSelect(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                <FileText size={18} aria-hidden="true" />
              </span>
              <span>
                <strong>{item.title}</strong>
                <span className="cr-description">{item.description}</span>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!results.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <SearchX size={22} aria-hidden="true" />
          </span>
          <strong>No results found</strong>
          <p>Try a different name or keyword.</p>
        </div>
      )}
    </Card>
  );
}

export function EmptyStateBlock({
  title,
  description,
  actionLabel,
  onAction,
}: {
  title: string;
  description: string;
  actionLabel: string;
  onAction: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-empty-block">
      <EmptyState
        title={title}
        description={description}
        icon={
          <span className="cr-workspace-empty-illustration">
            <span />
            <span />
            <span>
              <FolderPlus size={30} strokeWidth={1.5} aria-hidden="true" />
            </span>
          </span>
        }
        action={
          <Button onClick={onAction}>
            <Plus size={16} aria-hidden="true" />
            {actionLabel}
          </Button>
        }
      />
    </Card>
  );
}

export function DetailViewBlock({
  title,
  status,
  fields,
  children,
  onEdit,
}: {
  title: string;
  status: string;
  fields: Array<{ label: string; value: string }>;
  children?: ReactNode;
  onEdit: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-detail">
      <DataHeading
        eyebrow="Record overview"
        title={title}
        action={
          <Button variant="outline" onClick={onEdit}>
            <Pencil size={15} aria-hidden="true" />
            Edit details
          </Button>
        }
      />
      <div className="cr-workspace-detail-status">
        <span>Status</span>
        <Badge variant="outline">
          <span className="cr-workspace-status-dot" aria-hidden="true" />
          {status}
        </Badge>
      </div>
      <dl className="cr-details cr-workspace-details">
        {fields.map((field) => (
          <div key={field.label}>
            <dt>{field.label}</dt>
            <dd>{field.value}</dd>
          </div>
        ))}
      </dl>
      {children && (
        <div className="cr-workspace-detail-content">
          <Separator />
          {children}
        </div>
      )}
    </Card>
  );
}

export function StatsBlock({
  items,
}: {
  items: Array<{
    label: string;
    value: string;
    change?: string;
    trend?: "positive" | "negative" | "neutral";
    description?: string;
    icon?: ReactNode;
  }>;
}) {
  return (
    <div className="cr-block-grid cr-workspace-stats">
      {items.map((item) => (
        <Card className="cr-workspace-stat-card" key={item.label}>
          <div className="cr-workspace-stat-heading">
            <span>{item.label}</span>
            <span className="cr-workspace-stat-icon" aria-hidden="true">
              {item.icon ?? <ChartNoAxesColumn size={17} />}
            </span>
          </div>
          <strong className="cr-stat-value">{item.value}</strong>
          {(item.change || item.description) && (
            <div className="cr-workspace-stat-footer">
              {item.change && (
                <Badge
                  variant="outline"
                  className="cr-workspace-stat-change"
                  data-trend={item.trend ?? "neutral"}
                >
                  {item.trend === "positive" ? (
                    <ArrowUpRight size={13} aria-hidden="true" />
                  ) : item.trend === "negative" ? (
                    <ArrowDownRight size={13} aria-hidden="true" />
                  ) : (
                    <Minus size={13} aria-hidden="true" />
                  )}
                  {item.change}
                </Badge>
              )}
              {item.description && <span>{item.description}</span>}
            </div>
          )}
        </Card>
      ))}
    </div>
  );
}
```


---

# blocks/detail-view

---
title: "Detail View"
description: "Structured record details with an edit action."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/detail-view

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { DetailViewBlock } from './components/blocks/data';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Badge](/docs/components/badge), [Button](/docs/components/button), [Card](/docs/components/card), [Data Table](/docs/components/data-table), [Empty State](/docs/components/empty-state), [Field](/docs/components/field), [Input](/docs/components/input), [Select](/docs/components/select), [Separator](/docs/components/separator).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useMemo, useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowDownRight,
  ArrowUpRight,
  ChartNoAxesColumn,
  ChevronRight,
  FileText,
  FolderPlus,
  ListFilter,
  Minus,
  Pencil,
  Plus,
  Search,
  SearchX,
  X,
} from "lucide-react";
import {
  Badge,
  Button,
  Card,
  DataTable,
  EmptyState,
  Field,
  Input,
  Select,
  Separator,
} from '../ui';

function DataHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function DataTableBlock({
  title,
  description,
  columns,
  rows,
  onCreate,
}: {
  title: string;
  description?: string;
  columns: ComponentProps<typeof DataTable>["columns"];
  rows: ComponentProps<typeof DataTable>["rows"];
  onCreate: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-data-table">
      <DataHeading
        eyebrow="Workspace data"
        title={title}
        description={description}
        action={
          <Button onClick={onCreate}>
            <Plus size={16} aria-hidden="true" />
            Add record
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>All records</span>
        <Badge variant="outline">
          {rows.length} {rows.length === 1 ? "record" : "records"}
        </Badge>
      </div>
      <DataTable caption={title} columns={columns} rows={rows} />
    </Card>
  );
}

export function FiltersBlock({
  onChange,
  statuses,
}: {
  onChange: (filters: { query: string; status: string }) => void;
  statuses: Array<{ value: string; label: string }>;
}) {
  const [query, setQuery] = useState(""),
    [status, setStatus] = useState("all");
  const active = Number(Boolean(query)) + Number(status !== "all");
  return (
    <Card className="cr-workspace-block cr-workspace-filter-block">
      <div className="cr-workspace-filter-heading">
        <span>
          <ListFilter size={17} aria-hidden="true" />
          <strong>Filter records</strong>
        </span>
        {active > 0 && <Badge variant="outline">{active} active</Badge>}
      </div>
      <div className="cr-block-filters cr-workspace-filters">
        <Field label="Search">
          <div className="cr-workspace-search-field">
            <Search size={17} aria-hidden="true" />
            <Input
              type="search"
              value={query}
              placeholder="Name or keyword…"
              onChange={(event) => {
                setQuery(event.target.value);
                onChange({ query: event.target.value, status });
              }}
            />
          </div>
        </Field>
        <Field label="Status">
          <Select
            label="Status"
            value={status}
            options={[
              { value: "all", label: "All statuses" },
              ...statuses.filter((item) => item.value !== "all"),
            ]}
            onValueChange={(value) => {
              const next = value ?? "all";
              setStatus(next);
              onChange({ query, status: next });
            }}
          />
        </Field>
        <Button
          variant="ghost"
          disabled={!active}
          onClick={() => {
            setQuery("");
            setStatus("all");
            onChange({ query: "", status: "all" });
          }}
        >
          <X size={15} aria-hidden="true" />
          Clear filters
        </Button>
      </div>
    </Card>
  );
}

export function SearchBlock({
  items,
  onSelect,
}: {
  items: Array<{ id: string; title: string; description: string }>;
  onSelect: (id: string) => void;
}) {
  const [query, setQuery] = useState("");
  const results = useMemo(
    () =>
      items.filter((item) =>
        `${item.title} ${item.description}`
          .toLowerCase()
          .includes(query.toLowerCase()),
      ),
    [items, query],
  );
  return (
    <Card className="cr-workspace-block cr-workspace-search-block">
      <DataHeading
        eyebrow="Workspace search"
        title="Find your next step"
        description="Documents, projects and ideas. Right where you need them."
      />
      <div className="cr-workspace-search-field">
        <Search size={18} aria-hidden="true" />
        <Input
          aria-label="Search content"
          type="search"
          value={query}
          placeholder="Search your workspace…"
          onChange={(event) => setQuery(event.target.value)}
        />
      </div>
      <div className="cr-workspace-list-heading">
        <span>{query ? "Matching results" : "All items"}</span>
        <span className="cr-description" role="status">
          {results.length} {results.length === 1 ? "result" : "results"}
        </span>
      </div>
      <ul className="cr-workspace-list cr-workspace-search-results">
        {results.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-search-result"
              onClick={() => onSelect(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                <FileText size={18} aria-hidden="true" />
              </span>
              <span>
                <strong>{item.title}</strong>
                <span className="cr-description">{item.description}</span>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!results.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <SearchX size={22} aria-hidden="true" />
          </span>
          <strong>No results found</strong>
          <p>Try a different name or keyword.</p>
        </div>
      )}
    </Card>
  );
}

export function EmptyStateBlock({
  title,
  description,
  actionLabel,
  onAction,
}: {
  title: string;
  description: string;
  actionLabel: string;
  onAction: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-empty-block">
      <EmptyState
        title={title}
        description={description}
        icon={
          <span className="cr-workspace-empty-illustration">
            <span />
            <span />
            <span>
              <FolderPlus size={30} strokeWidth={1.5} aria-hidden="true" />
            </span>
          </span>
        }
        action={
          <Button onClick={onAction}>
            <Plus size={16} aria-hidden="true" />
            {actionLabel}
          </Button>
        }
      />
    </Card>
  );
}

export function DetailViewBlock({
  title,
  status,
  fields,
  children,
  onEdit,
}: {
  title: string;
  status: string;
  fields: Array<{ label: string; value: string }>;
  children?: ReactNode;
  onEdit: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-detail">
      <DataHeading
        eyebrow="Record overview"
        title={title}
        action={
          <Button variant="outline" onClick={onEdit}>
            <Pencil size={15} aria-hidden="true" />
            Edit details
          </Button>
        }
      />
      <div className="cr-workspace-detail-status">
        <span>Status</span>
        <Badge variant="outline">
          <span className="cr-workspace-status-dot" aria-hidden="true" />
          {status}
        </Badge>
      </div>
      <dl className="cr-details cr-workspace-details">
        {fields.map((field) => (
          <div key={field.label}>
            <dt>{field.label}</dt>
            <dd>{field.value}</dd>
          </div>
        ))}
      </dl>
      {children && (
        <div className="cr-workspace-detail-content">
          <Separator />
          {children}
        </div>
      )}
    </Card>
  );
}

export function StatsBlock({
  items,
}: {
  items: Array<{
    label: string;
    value: string;
    change?: string;
    trend?: "positive" | "negative" | "neutral";
    description?: string;
    icon?: ReactNode;
  }>;
}) {
  return (
    <div className="cr-block-grid cr-workspace-stats">
      {items.map((item) => (
        <Card className="cr-workspace-stat-card" key={item.label}>
          <div className="cr-workspace-stat-heading">
            <span>{item.label}</span>
            <span className="cr-workspace-stat-icon" aria-hidden="true">
              {item.icon ?? <ChartNoAxesColumn size={17} />}
            </span>
          </div>
          <strong className="cr-stat-value">{item.value}</strong>
          {(item.change || item.description) && (
            <div className="cr-workspace-stat-footer">
              {item.change && (
                <Badge
                  variant="outline"
                  className="cr-workspace-stat-change"
                  data-trend={item.trend ?? "neutral"}
                >
                  {item.trend === "positive" ? (
                    <ArrowUpRight size={13} aria-hidden="true" />
                  ) : item.trend === "negative" ? (
                    <ArrowDownRight size={13} aria-hidden="true" />
                  ) : (
                    <Minus size={13} aria-hidden="true" />
                  )}
                  {item.change}
                </Badge>
              )}
              {item.description && <span>{item.description}</span>}
            </div>
          )}
        </Card>
      ))}
    </div>
  );
}
```


---

# blocks/empty-state

---
title: "Empty State"
description: "A welcoming empty collection with a primary action."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/empty-state

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { EmptyStateBlock } from './components/blocks/data';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Badge](/docs/components/badge), [Button](/docs/components/button), [Card](/docs/components/card), [Data Table](/docs/components/data-table), [Empty State](/docs/components/empty-state), [Field](/docs/components/field), [Input](/docs/components/input), [Select](/docs/components/select), [Separator](/docs/components/separator).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useMemo, useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowDownRight,
  ArrowUpRight,
  ChartNoAxesColumn,
  ChevronRight,
  FileText,
  FolderPlus,
  ListFilter,
  Minus,
  Pencil,
  Plus,
  Search,
  SearchX,
  X,
} from "lucide-react";
import {
  Badge,
  Button,
  Card,
  DataTable,
  EmptyState,
  Field,
  Input,
  Select,
  Separator,
} from '../ui';

function DataHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function DataTableBlock({
  title,
  description,
  columns,
  rows,
  onCreate,
}: {
  title: string;
  description?: string;
  columns: ComponentProps<typeof DataTable>["columns"];
  rows: ComponentProps<typeof DataTable>["rows"];
  onCreate: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-data-table">
      <DataHeading
        eyebrow="Workspace data"
        title={title}
        description={description}
        action={
          <Button onClick={onCreate}>
            <Plus size={16} aria-hidden="true" />
            Add record
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>All records</span>
        <Badge variant="outline">
          {rows.length} {rows.length === 1 ? "record" : "records"}
        </Badge>
      </div>
      <DataTable caption={title} columns={columns} rows={rows} />
    </Card>
  );
}

export function FiltersBlock({
  onChange,
  statuses,
}: {
  onChange: (filters: { query: string; status: string }) => void;
  statuses: Array<{ value: string; label: string }>;
}) {
  const [query, setQuery] = useState(""),
    [status, setStatus] = useState("all");
  const active = Number(Boolean(query)) + Number(status !== "all");
  return (
    <Card className="cr-workspace-block cr-workspace-filter-block">
      <div className="cr-workspace-filter-heading">
        <span>
          <ListFilter size={17} aria-hidden="true" />
          <strong>Filter records</strong>
        </span>
        {active > 0 && <Badge variant="outline">{active} active</Badge>}
      </div>
      <div className="cr-block-filters cr-workspace-filters">
        <Field label="Search">
          <div className="cr-workspace-search-field">
            <Search size={17} aria-hidden="true" />
            <Input
              type="search"
              value={query}
              placeholder="Name or keyword…"
              onChange={(event) => {
                setQuery(event.target.value);
                onChange({ query: event.target.value, status });
              }}
            />
          </div>
        </Field>
        <Field label="Status">
          <Select
            label="Status"
            value={status}
            options={[
              { value: "all", label: "All statuses" },
              ...statuses.filter((item) => item.value !== "all"),
            ]}
            onValueChange={(value) => {
              const next = value ?? "all";
              setStatus(next);
              onChange({ query, status: next });
            }}
          />
        </Field>
        <Button
          variant="ghost"
          disabled={!active}
          onClick={() => {
            setQuery("");
            setStatus("all");
            onChange({ query: "", status: "all" });
          }}
        >
          <X size={15} aria-hidden="true" />
          Clear filters
        </Button>
      </div>
    </Card>
  );
}

export function SearchBlock({
  items,
  onSelect,
}: {
  items: Array<{ id: string; title: string; description: string }>;
  onSelect: (id: string) => void;
}) {
  const [query, setQuery] = useState("");
  const results = useMemo(
    () =>
      items.filter((item) =>
        `${item.title} ${item.description}`
          .toLowerCase()
          .includes(query.toLowerCase()),
      ),
    [items, query],
  );
  return (
    <Card className="cr-workspace-block cr-workspace-search-block">
      <DataHeading
        eyebrow="Workspace search"
        title="Find your next step"
        description="Documents, projects and ideas. Right where you need them."
      />
      <div className="cr-workspace-search-field">
        <Search size={18} aria-hidden="true" />
        <Input
          aria-label="Search content"
          type="search"
          value={query}
          placeholder="Search your workspace…"
          onChange={(event) => setQuery(event.target.value)}
        />
      </div>
      <div className="cr-workspace-list-heading">
        <span>{query ? "Matching results" : "All items"}</span>
        <span className="cr-description" role="status">
          {results.length} {results.length === 1 ? "result" : "results"}
        </span>
      </div>
      <ul className="cr-workspace-list cr-workspace-search-results">
        {results.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-search-result"
              onClick={() => onSelect(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                <FileText size={18} aria-hidden="true" />
              </span>
              <span>
                <strong>{item.title}</strong>
                <span className="cr-description">{item.description}</span>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!results.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <SearchX size={22} aria-hidden="true" />
          </span>
          <strong>No results found</strong>
          <p>Try a different name or keyword.</p>
        </div>
      )}
    </Card>
  );
}

export function EmptyStateBlock({
  title,
  description,
  actionLabel,
  onAction,
}: {
  title: string;
  description: string;
  actionLabel: string;
  onAction: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-empty-block">
      <EmptyState
        title={title}
        description={description}
        icon={
          <span className="cr-workspace-empty-illustration">
            <span />
            <span />
            <span>
              <FolderPlus size={30} strokeWidth={1.5} aria-hidden="true" />
            </span>
          </span>
        }
        action={
          <Button onClick={onAction}>
            <Plus size={16} aria-hidden="true" />
            {actionLabel}
          </Button>
        }
      />
    </Card>
  );
}

export function DetailViewBlock({
  title,
  status,
  fields,
  children,
  onEdit,
}: {
  title: string;
  status: string;
  fields: Array<{ label: string; value: string }>;
  children?: ReactNode;
  onEdit: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-detail">
      <DataHeading
        eyebrow="Record overview"
        title={title}
        action={
          <Button variant="outline" onClick={onEdit}>
            <Pencil size={15} aria-hidden="true" />
            Edit details
          </Button>
        }
      />
      <div className="cr-workspace-detail-status">
        <span>Status</span>
        <Badge variant="outline">
          <span className="cr-workspace-status-dot" aria-hidden="true" />
          {status}
        </Badge>
      </div>
      <dl className="cr-details cr-workspace-details">
        {fields.map((field) => (
          <div key={field.label}>
            <dt>{field.label}</dt>
            <dd>{field.value}</dd>
          </div>
        ))}
      </dl>
      {children && (
        <div className="cr-workspace-detail-content">
          <Separator />
          {children}
        </div>
      )}
    </Card>
  );
}

export function StatsBlock({
  items,
}: {
  items: Array<{
    label: string;
    value: string;
    change?: string;
    trend?: "positive" | "negative" | "neutral";
    description?: string;
    icon?: ReactNode;
  }>;
}) {
  return (
    <div className="cr-block-grid cr-workspace-stats">
      {items.map((item) => (
        <Card className="cr-workspace-stat-card" key={item.label}>
          <div className="cr-workspace-stat-heading">
            <span>{item.label}</span>
            <span className="cr-workspace-stat-icon" aria-hidden="true">
              {item.icon ?? <ChartNoAxesColumn size={17} />}
            </span>
          </div>
          <strong className="cr-stat-value">{item.value}</strong>
          {(item.change || item.description) && (
            <div className="cr-workspace-stat-footer">
              {item.change && (
                <Badge
                  variant="outline"
                  className="cr-workspace-stat-change"
                  data-trend={item.trend ?? "neutral"}
                >
                  {item.trend === "positive" ? (
                    <ArrowUpRight size={13} aria-hidden="true" />
                  ) : item.trend === "negative" ? (
                    <ArrowDownRight size={13} aria-hidden="true" />
                  ) : (
                    <Minus size={13} aria-hidden="true" />
                  )}
                  {item.change}
                </Badge>
              )}
              {item.description && <span>{item.description}</span>}
            </div>
          )}
        </Card>
      ))}
    </div>
  );
}
```


---

# blocks/faq

---
title: "FAQ"
description: "An accessible accordion of questions and answers."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/faq

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { FaqBlock } from './components/blocks/marketing';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Accordion](/docs/components/accordion), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Card](/docs/components/card).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import type { ReactNode } from "react";
import {
  ArrowRight,
  ArrowUpRight,
  Check,
  Layers3,
  Quote,
  SlidersHorizontal,
  Workflow,
} from "lucide-react";
import { Accordion, Avatar, Badge, Card } from '../ui';

function MarketingHeading({
  title,
  description,
  eyebrow,
}: {
  title: string;
  description?: string;
  eyebrow?: string;
}) {
  return (
    <header className="cr-marketing-heading">
      <div>
        {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
        <h2>{title}</h2>
      </div>
      {description && <p className="cr-description">{description}</p>}
    </header>
  );
}

export function HeroBlock({
  eyebrow,
  title,
  description,
  primary,
  secondary,
  children,
}: {
  eyebrow: string;
  title: string;
  description: string;
  primary: { label: string; href: string };
  secondary?: { label: string; href: string };
  children?: ReactNode;
}) {
  return (
    <section className="cr-hero cr-marketing-hero">
      <div className="cr-hero-decoration" aria-hidden="true">
        <span>
          <Layers3 strokeWidth={1.75} />
        </span>
        <span>
          <SlidersHorizontal strokeWidth={1.75} />
        </span>
        <span>
          <Workflow strokeWidth={1.75} />
        </span>
      </div>
      <div className="cr-hero-content">
        <Badge variant="outline">
          {eyebrow}
          <ArrowUpRight size={13} strokeWidth={1.75} aria-hidden="true" />
        </Badge>
        <h1>{title}</h1>
        <p className="cr-description">{description}</p>
        <div className="cr-hero-actions">
          <a className="cr-button" href={primary.href}>
            {primary.label}
            <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
          </a>
          {secondary && (
            <a className="cr-button" data-variant="ghost" href={secondary.href}>
              {secondary.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
      </div>
      {children && <div className="cr-hero-media">{children}</div>}
    </section>
  );
}

export function FeaturesBlock({
  title,
  description,
  eyebrow,
  items,
}: {
  title: string;
  description: string;
  eyebrow?: string;
  items: Array<{
    title: string;
    description: string;
    icon?: ReactNode;
    visual?: ReactNode;
    eyebrow?: string;
    href?: string;
    linkLabel?: string;
  }>;
}) {
  const fallbackIcons = [Layers3, Workflow, SlidersHorizontal];
  return (
    <section className="cr-marketing-section cr-features-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-features-grid">
        {items.map((item, index) => {
          const Icon = fallbackIcons[index % fallbackIcons.length];
          return (
            <Card
              key={item.title}
              className="cr-feature-card"
              data-featured={(index === 0 && items.length >= 3) || undefined}
              data-has-visual={Boolean(item.visual) || undefined}
            >
              <div className="cr-feature-copy">
                <div className="cr-feature-topline">
                  <span aria-hidden="true" className="cr-feature-icon">
                    {item.icon ?? <Icon size={22} strokeWidth={1.75} />}
                  </span>
                  <span className="cr-feature-index" aria-hidden="true">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                </div>
                {item.eyebrow && (
                  <p className="cr-marketing-eyebrow">{item.eyebrow}</p>
                )}
                <h3>{item.title}</h3>
                <p className="cr-description">{item.description}</p>
                {item.href && (
                  <a className="cr-feature-link" href={item.href}>
                    {item.linkLabel ?? "Explore feature"}
                    <ArrowUpRight
                      size={16}
                      strokeWidth={1.75}
                      aria-hidden="true"
                    />
                  </a>
                )}
              </div>
              {item.visual && (
                <div className="cr-feature-visual">{item.visual}</div>
              )}
            </Card>
          );
        })}
      </div>
    </section>
  );
}

export function PricingBlock({
  title,
  plans,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  plans: Array<{
    name: string;
    price: string;
    period: string;
    description: string;
    features: string[];
    href: string;
    action: string;
    featured?: boolean;
  }>;
}) {
  return (
    <section className="cr-marketing-section cr-pricing-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-pricing-grid">
        {plans.map((plan) => (
          <Card
            key={plan.name}
            className="cr-pricing-card"
            data-featured={plan.featured || undefined}
          >
            <div className="cr-plan-heading">
              <h3>{plan.name}</h3>
              <div
                className="cr-price-recommendation"
                aria-hidden={!plan.featured || undefined}
              >
                {plan.featured && <Badge variant="primary">Recommended</Badge>}
              </div>
            </div>
            <p className="cr-plan-description cr-description">
              {plan.description}
            </p>
            <p className="cr-price">
              {plan.price}
              <small>{plan.period}</small>
            </p>
            <ul className="cr-price-features">
              {plan.features.map((feature) => (
                <li key={feature}>
                  <Check size={17} strokeWidth={1.75} aria-hidden="true" />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
            <a
              className="cr-button"
              data-variant={plan.featured ? "primary" : "outline"}
              href={plan.href}
            >
              {plan.action}
              <ArrowRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function TestimonialsBlock({
  title,
  quotes,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  quotes: Array<{ quote: string; name: string; role: string; avatar?: string }>;
}) {
  return (
    <section className="cr-marketing-section cr-testimonials-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-testimonials-grid">
        {quotes.map((quote, index) => (
          <Card
            key={quote.name}
            className="cr-testimonial-card"
            data-featured={index === 0 || undefined}
          >
            <figure className="cr-testimonial-figure">
              <Quote
                className="cr-quote-icon"
                size={26}
                strokeWidth={1.75}
                aria-hidden="true"
              />
              <blockquote className="cr-quote">
                <p>{quote.quote}</p>
              </blockquote>
              <figcaption className="cr-quote-author">
                <Avatar name={quote.name} src={quote.avatar} size={40} />
                <div>
                  <cite>{quote.name}</cite>
                  <p className="cr-description">{quote.role}</p>
                </div>
              </figcaption>
            </figure>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function FaqBlock({
  title,
  items,
  eyebrow,
  description,
  contact,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  contact?: { label: string; href: string };
  items: Array<{ question: string; answer: ReactNode }>;
}) {
  return (
    <section className="cr-marketing-section cr-faq-section">
      <div className="cr-faq-layout">
        <div className="cr-faq-intro">
          <MarketingHeading
            title={title}
            description={description}
            eyebrow={eyebrow}
          />
          {contact && (
            <a className="cr-feature-link" href={contact.href}>
              {contact.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
        <div className="cr-faq-content">
          <Accordion
            items={items.map((item, index) => ({
              value: String(index),
              title: item.question,
              content: item.answer,
            }))}
          />
        </div>
      </div>
    </section>
  );
}

export function CtaBlock({
  title,
  description,
  action,
  eyebrow,
  secondary,
}: {
  title: string;
  description: string;
  action: { label: string; href: string };
  eyebrow?: string;
  secondary?: { label: string; href: string };
}) {
  return (
    <Card className="cr-cta-card">
      <div className="cr-cta">
        <div className="cr-cta-content">
          {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
          <h2>{title}</h2>
          <p className="cr-description">{description}</p>
          <div className="cr-cta-actions">
            <a className="cr-button" href={action.href}>
              {action.label}
              <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
            </a>
            {secondary && (
              <a className="cr-feature-link" href={secondary.href}>
                {secondary.label}
                <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
              </a>
            )}
          </div>
        </div>
        <div className="cr-cta-emblem" aria-hidden="true">
          <ArrowUpRight strokeWidth={1.75} />
        </div>
      </div>
    </Card>
  );
}

export function FooterBlock({
  brand,
  description,
  groups,
  copyright,
  logo,
  brandHref,
  legalLinks,
}: {
  brand: string;
  description: string;
  groups: Array<{
    title: string;
    links: Array<{ label: string; href: string }>;
  }>;
  copyright: string;
  logo?: ReactNode;
  brandHref?: string;
  legalLinks?: Array<{ label: string; href: string }>;
}) {
  const identity = (
    <>
      {logo && (
        <span className="cr-footer-logo" aria-hidden="true">
          {logo}
        </span>
      )}
      <strong>{brand}</strong>
    </>
  );
  return (
    <footer className="cr-footer">
      <div className="cr-footer-main">
        <div className="cr-footer-brand">
          {brandHref ? (
            <a className="cr-footer-identity" href={brandHref}>
              {identity}
            </a>
          ) : (
            <div className="cr-footer-identity">{identity}</div>
          )}
          <p className="cr-description">{description}</p>
        </div>
        <div className="cr-footer-navigation">
          {groups.map((group) => (
            <nav key={group.title} aria-label={group.title}>
              <strong>{group.title}</strong>
              {group.links.map((link) => (
                <a key={link.href} href={link.href}>
                  {link.label}
                </a>
              ))}
            </nav>
          ))}
        </div>
      </div>
      <div className="cr-footer-bottom">
        <p className="cr-description">{copyright}</p>
        {legalLinks?.length ? (
          <nav aria-label="Legal">
            {legalLinks.map((link) => (
              <a href={link.href} key={link.href}>
                {link.label}
              </a>
            ))}
          </nav>
        ) : null}
      </div>
    </footer>
  );
}
```


---

# blocks/features

---
title: "Features"
description: "A responsive feature grid built from cards."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/features

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { FeaturesBlock } from './components/blocks/marketing';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Accordion](/docs/components/accordion), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Card](/docs/components/card).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import type { ReactNode } from "react";
import {
  ArrowRight,
  ArrowUpRight,
  Check,
  Layers3,
  Quote,
  SlidersHorizontal,
  Workflow,
} from "lucide-react";
import { Accordion, Avatar, Badge, Card } from '../ui';

function MarketingHeading({
  title,
  description,
  eyebrow,
}: {
  title: string;
  description?: string;
  eyebrow?: string;
}) {
  return (
    <header className="cr-marketing-heading">
      <div>
        {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
        <h2>{title}</h2>
      </div>
      {description && <p className="cr-description">{description}</p>}
    </header>
  );
}

export function HeroBlock({
  eyebrow,
  title,
  description,
  primary,
  secondary,
  children,
}: {
  eyebrow: string;
  title: string;
  description: string;
  primary: { label: string; href: string };
  secondary?: { label: string; href: string };
  children?: ReactNode;
}) {
  return (
    <section className="cr-hero cr-marketing-hero">
      <div className="cr-hero-decoration" aria-hidden="true">
        <span>
          <Layers3 strokeWidth={1.75} />
        </span>
        <span>
          <SlidersHorizontal strokeWidth={1.75} />
        </span>
        <span>
          <Workflow strokeWidth={1.75} />
        </span>
      </div>
      <div className="cr-hero-content">
        <Badge variant="outline">
          {eyebrow}
          <ArrowUpRight size={13} strokeWidth={1.75} aria-hidden="true" />
        </Badge>
        <h1>{title}</h1>
        <p className="cr-description">{description}</p>
        <div className="cr-hero-actions">
          <a className="cr-button" href={primary.href}>
            {primary.label}
            <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
          </a>
          {secondary && (
            <a className="cr-button" data-variant="ghost" href={secondary.href}>
              {secondary.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
      </div>
      {children && <div className="cr-hero-media">{children}</div>}
    </section>
  );
}

export function FeaturesBlock({
  title,
  description,
  eyebrow,
  items,
}: {
  title: string;
  description: string;
  eyebrow?: string;
  items: Array<{
    title: string;
    description: string;
    icon?: ReactNode;
    visual?: ReactNode;
    eyebrow?: string;
    href?: string;
    linkLabel?: string;
  }>;
}) {
  const fallbackIcons = [Layers3, Workflow, SlidersHorizontal];
  return (
    <section className="cr-marketing-section cr-features-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-features-grid">
        {items.map((item, index) => {
          const Icon = fallbackIcons[index % fallbackIcons.length];
          return (
            <Card
              key={item.title}
              className="cr-feature-card"
              data-featured={(index === 0 && items.length >= 3) || undefined}
              data-has-visual={Boolean(item.visual) || undefined}
            >
              <div className="cr-feature-copy">
                <div className="cr-feature-topline">
                  <span aria-hidden="true" className="cr-feature-icon">
                    {item.icon ?? <Icon size={22} strokeWidth={1.75} />}
                  </span>
                  <span className="cr-feature-index" aria-hidden="true">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                </div>
                {item.eyebrow && (
                  <p className="cr-marketing-eyebrow">{item.eyebrow}</p>
                )}
                <h3>{item.title}</h3>
                <p className="cr-description">{item.description}</p>
                {item.href && (
                  <a className="cr-feature-link" href={item.href}>
                    {item.linkLabel ?? "Explore feature"}
                    <ArrowUpRight
                      size={16}
                      strokeWidth={1.75}
                      aria-hidden="true"
                    />
                  </a>
                )}
              </div>
              {item.visual && (
                <div className="cr-feature-visual">{item.visual}</div>
              )}
            </Card>
          );
        })}
      </div>
    </section>
  );
}

export function PricingBlock({
  title,
  plans,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  plans: Array<{
    name: string;
    price: string;
    period: string;
    description: string;
    features: string[];
    href: string;
    action: string;
    featured?: boolean;
  }>;
}) {
  return (
    <section className="cr-marketing-section cr-pricing-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-pricing-grid">
        {plans.map((plan) => (
          <Card
            key={plan.name}
            className="cr-pricing-card"
            data-featured={plan.featured || undefined}
          >
            <div className="cr-plan-heading">
              <h3>{plan.name}</h3>
              <div
                className="cr-price-recommendation"
                aria-hidden={!plan.featured || undefined}
              >
                {plan.featured && <Badge variant="primary">Recommended</Badge>}
              </div>
            </div>
            <p className="cr-plan-description cr-description">
              {plan.description}
            </p>
            <p className="cr-price">
              {plan.price}
              <small>{plan.period}</small>
            </p>
            <ul className="cr-price-features">
              {plan.features.map((feature) => (
                <li key={feature}>
                  <Check size={17} strokeWidth={1.75} aria-hidden="true" />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
            <a
              className="cr-button"
              data-variant={plan.featured ? "primary" : "outline"}
              href={plan.href}
            >
              {plan.action}
              <ArrowRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function TestimonialsBlock({
  title,
  quotes,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  quotes: Array<{ quote: string; name: string; role: string; avatar?: string }>;
}) {
  return (
    <section className="cr-marketing-section cr-testimonials-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-testimonials-grid">
        {quotes.map((quote, index) => (
          <Card
            key={quote.name}
            className="cr-testimonial-card"
            data-featured={index === 0 || undefined}
          >
            <figure className="cr-testimonial-figure">
              <Quote
                className="cr-quote-icon"
                size={26}
                strokeWidth={1.75}
                aria-hidden="true"
              />
              <blockquote className="cr-quote">
                <p>{quote.quote}</p>
              </blockquote>
              <figcaption className="cr-quote-author">
                <Avatar name={quote.name} src={quote.avatar} size={40} />
                <div>
                  <cite>{quote.name}</cite>
                  <p className="cr-description">{quote.role}</p>
                </div>
              </figcaption>
            </figure>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function FaqBlock({
  title,
  items,
  eyebrow,
  description,
  contact,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  contact?: { label: string; href: string };
  items: Array<{ question: string; answer: ReactNode }>;
}) {
  return (
    <section className="cr-marketing-section cr-faq-section">
      <div className="cr-faq-layout">
        <div className="cr-faq-intro">
          <MarketingHeading
            title={title}
            description={description}
            eyebrow={eyebrow}
          />
          {contact && (
            <a className="cr-feature-link" href={contact.href}>
              {contact.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
        <div className="cr-faq-content">
          <Accordion
            items={items.map((item, index) => ({
              value: String(index),
              title: item.question,
              content: item.answer,
            }))}
          />
        </div>
      </div>
    </section>
  );
}

export function CtaBlock({
  title,
  description,
  action,
  eyebrow,
  secondary,
}: {
  title: string;
  description: string;
  action: { label: string; href: string };
  eyebrow?: string;
  secondary?: { label: string; href: string };
}) {
  return (
    <Card className="cr-cta-card">
      <div className="cr-cta">
        <div className="cr-cta-content">
          {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
          <h2>{title}</h2>
          <p className="cr-description">{description}</p>
          <div className="cr-cta-actions">
            <a className="cr-button" href={action.href}>
              {action.label}
              <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
            </a>
            {secondary && (
              <a className="cr-feature-link" href={secondary.href}>
                {secondary.label}
                <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
              </a>
            )}
          </div>
        </div>
        <div className="cr-cta-emblem" aria-hidden="true">
          <ArrowUpRight strokeWidth={1.75} />
        </div>
      </div>
    </Card>
  );
}

export function FooterBlock({
  brand,
  description,
  groups,
  copyright,
  logo,
  brandHref,
  legalLinks,
}: {
  brand: string;
  description: string;
  groups: Array<{
    title: string;
    links: Array<{ label: string; href: string }>;
  }>;
  copyright: string;
  logo?: ReactNode;
  brandHref?: string;
  legalLinks?: Array<{ label: string; href: string }>;
}) {
  const identity = (
    <>
      {logo && (
        <span className="cr-footer-logo" aria-hidden="true">
          {logo}
        </span>
      )}
      <strong>{brand}</strong>
    </>
  );
  return (
    <footer className="cr-footer">
      <div className="cr-footer-main">
        <div className="cr-footer-brand">
          {brandHref ? (
            <a className="cr-footer-identity" href={brandHref}>
              {identity}
            </a>
          ) : (
            <div className="cr-footer-identity">{identity}</div>
          )}
          <p className="cr-description">{description}</p>
        </div>
        <div className="cr-footer-navigation">
          {groups.map((group) => (
            <nav key={group.title} aria-label={group.title}>
              <strong>{group.title}</strong>
              {group.links.map((link) => (
                <a key={link.href} href={link.href}>
                  {link.label}
                </a>
              ))}
            </nav>
          ))}
        </div>
      </div>
      <div className="cr-footer-bottom">
        <p className="cr-description">{copyright}</p>
        {legalLinks?.length ? (
          <nav aria-label="Legal">
            {legalLinks.map((link) => (
              <a href={link.href} key={link.href}>
                {link.label}
              </a>
            ))}
          </nav>
        ) : null}
      </div>
    </footer>
  );
}
```


---

# blocks/filters

---
title: "Filters"
description: "Search and status filters with reset and controlled output."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/filters

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { FiltersBlock } from './components/blocks/data';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Badge](/docs/components/badge), [Button](/docs/components/button), [Card](/docs/components/card), [Data Table](/docs/components/data-table), [Empty State](/docs/components/empty-state), [Field](/docs/components/field), [Input](/docs/components/input), [Select](/docs/components/select), [Separator](/docs/components/separator).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useMemo, useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowDownRight,
  ArrowUpRight,
  ChartNoAxesColumn,
  ChevronRight,
  FileText,
  FolderPlus,
  ListFilter,
  Minus,
  Pencil,
  Plus,
  Search,
  SearchX,
  X,
} from "lucide-react";
import {
  Badge,
  Button,
  Card,
  DataTable,
  EmptyState,
  Field,
  Input,
  Select,
  Separator,
} from '../ui';

function DataHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function DataTableBlock({
  title,
  description,
  columns,
  rows,
  onCreate,
}: {
  title: string;
  description?: string;
  columns: ComponentProps<typeof DataTable>["columns"];
  rows: ComponentProps<typeof DataTable>["rows"];
  onCreate: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-data-table">
      <DataHeading
        eyebrow="Workspace data"
        title={title}
        description={description}
        action={
          <Button onClick={onCreate}>
            <Plus size={16} aria-hidden="true" />
            Add record
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>All records</span>
        <Badge variant="outline">
          {rows.length} {rows.length === 1 ? "record" : "records"}
        </Badge>
      </div>
      <DataTable caption={title} columns={columns} rows={rows} />
    </Card>
  );
}

export function FiltersBlock({
  onChange,
  statuses,
}: {
  onChange: (filters: { query: string; status: string }) => void;
  statuses: Array<{ value: string; label: string }>;
}) {
  const [query, setQuery] = useState(""),
    [status, setStatus] = useState("all");
  const active = Number(Boolean(query)) + Number(status !== "all");
  return (
    <Card className="cr-workspace-block cr-workspace-filter-block">
      <div className="cr-workspace-filter-heading">
        <span>
          <ListFilter size={17} aria-hidden="true" />
          <strong>Filter records</strong>
        </span>
        {active > 0 && <Badge variant="outline">{active} active</Badge>}
      </div>
      <div className="cr-block-filters cr-workspace-filters">
        <Field label="Search">
          <div className="cr-workspace-search-field">
            <Search size={17} aria-hidden="true" />
            <Input
              type="search"
              value={query}
              placeholder="Name or keyword…"
              onChange={(event) => {
                setQuery(event.target.value);
                onChange({ query: event.target.value, status });
              }}
            />
          </div>
        </Field>
        <Field label="Status">
          <Select
            label="Status"
            value={status}
            options={[
              { value: "all", label: "All statuses" },
              ...statuses.filter((item) => item.value !== "all"),
            ]}
            onValueChange={(value) => {
              const next = value ?? "all";
              setStatus(next);
              onChange({ query, status: next });
            }}
          />
        </Field>
        <Button
          variant="ghost"
          disabled={!active}
          onClick={() => {
            setQuery("");
            setStatus("all");
            onChange({ query: "", status: "all" });
          }}
        >
          <X size={15} aria-hidden="true" />
          Clear filters
        </Button>
      </div>
    </Card>
  );
}

export function SearchBlock({
  items,
  onSelect,
}: {
  items: Array<{ id: string; title: string; description: string }>;
  onSelect: (id: string) => void;
}) {
  const [query, setQuery] = useState("");
  const results = useMemo(
    () =>
      items.filter((item) =>
        `${item.title} ${item.description}`
          .toLowerCase()
          .includes(query.toLowerCase()),
      ),
    [items, query],
  );
  return (
    <Card className="cr-workspace-block cr-workspace-search-block">
      <DataHeading
        eyebrow="Workspace search"
        title="Find your next step"
        description="Documents, projects and ideas. Right where you need them."
      />
      <div className="cr-workspace-search-field">
        <Search size={18} aria-hidden="true" />
        <Input
          aria-label="Search content"
          type="search"
          value={query}
          placeholder="Search your workspace…"
          onChange={(event) => setQuery(event.target.value)}
        />
      </div>
      <div className="cr-workspace-list-heading">
        <span>{query ? "Matching results" : "All items"}</span>
        <span className="cr-description" role="status">
          {results.length} {results.length === 1 ? "result" : "results"}
        </span>
      </div>
      <ul className="cr-workspace-list cr-workspace-search-results">
        {results.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-search-result"
              onClick={() => onSelect(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                <FileText size={18} aria-hidden="true" />
              </span>
              <span>
                <strong>{item.title}</strong>
                <span className="cr-description">{item.description}</span>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!results.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <SearchX size={22} aria-hidden="true" />
          </span>
          <strong>No results found</strong>
          <p>Try a different name or keyword.</p>
        </div>
      )}
    </Card>
  );
}

export function EmptyStateBlock({
  title,
  description,
  actionLabel,
  onAction,
}: {
  title: string;
  description: string;
  actionLabel: string;
  onAction: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-empty-block">
      <EmptyState
        title={title}
        description={description}
        icon={
          <span className="cr-workspace-empty-illustration">
            <span />
            <span />
            <span>
              <FolderPlus size={30} strokeWidth={1.5} aria-hidden="true" />
            </span>
          </span>
        }
        action={
          <Button onClick={onAction}>
            <Plus size={16} aria-hidden="true" />
            {actionLabel}
          </Button>
        }
      />
    </Card>
  );
}

export function DetailViewBlock({
  title,
  status,
  fields,
  children,
  onEdit,
}: {
  title: string;
  status: string;
  fields: Array<{ label: string; value: string }>;
  children?: ReactNode;
  onEdit: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-detail">
      <DataHeading
        eyebrow="Record overview"
        title={title}
        action={
          <Button variant="outline" onClick={onEdit}>
            <Pencil size={15} aria-hidden="true" />
            Edit details
          </Button>
        }
      />
      <div className="cr-workspace-detail-status">
        <span>Status</span>
        <Badge variant="outline">
          <span className="cr-workspace-status-dot" aria-hidden="true" />
          {status}
        </Badge>
      </div>
      <dl className="cr-details cr-workspace-details">
        {fields.map((field) => (
          <div key={field.label}>
            <dt>{field.label}</dt>
            <dd>{field.value}</dd>
          </div>
        ))}
      </dl>
      {children && (
        <div className="cr-workspace-detail-content">
          <Separator />
          {children}
        </div>
      )}
    </Card>
  );
}

export function StatsBlock({
  items,
}: {
  items: Array<{
    label: string;
    value: string;
    change?: string;
    trend?: "positive" | "negative" | "neutral";
    description?: string;
    icon?: ReactNode;
  }>;
}) {
  return (
    <div className="cr-block-grid cr-workspace-stats">
      {items.map((item) => (
        <Card className="cr-workspace-stat-card" key={item.label}>
          <div className="cr-workspace-stat-heading">
            <span>{item.label}</span>
            <span className="cr-workspace-stat-icon" aria-hidden="true">
              {item.icon ?? <ChartNoAxesColumn size={17} />}
            </span>
          </div>
          <strong className="cr-stat-value">{item.value}</strong>
          {(item.change || item.description) && (
            <div className="cr-workspace-stat-footer">
              {item.change && (
                <Badge
                  variant="outline"
                  className="cr-workspace-stat-change"
                  data-trend={item.trend ?? "neutral"}
                >
                  {item.trend === "positive" ? (
                    <ArrowUpRight size={13} aria-hidden="true" />
                  ) : item.trend === "negative" ? (
                    <ArrowDownRight size={13} aria-hidden="true" />
                  ) : (
                    <Minus size={13} aria-hidden="true" />
                  )}
                  {item.change}
                </Badge>
              )}
              {item.description && <span>{item.description}</span>}
            </div>
          )}
        </Card>
      ))}
    </div>
  );
}
```


---

# blocks/footer

---
title: "Footer"
description: "Grouped navigation, brand description and copyright."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/footer

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { FooterBlock } from './components/blocks/marketing';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Accordion](/docs/components/accordion), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Card](/docs/components/card).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import type { ReactNode } from "react";
import {
  ArrowRight,
  ArrowUpRight,
  Check,
  Layers3,
  Quote,
  SlidersHorizontal,
  Workflow,
} from "lucide-react";
import { Accordion, Avatar, Badge, Card } from '../ui';

function MarketingHeading({
  title,
  description,
  eyebrow,
}: {
  title: string;
  description?: string;
  eyebrow?: string;
}) {
  return (
    <header className="cr-marketing-heading">
      <div>
        {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
        <h2>{title}</h2>
      </div>
      {description && <p className="cr-description">{description}</p>}
    </header>
  );
}

export function HeroBlock({
  eyebrow,
  title,
  description,
  primary,
  secondary,
  children,
}: {
  eyebrow: string;
  title: string;
  description: string;
  primary: { label: string; href: string };
  secondary?: { label: string; href: string };
  children?: ReactNode;
}) {
  return (
    <section className="cr-hero cr-marketing-hero">
      <div className="cr-hero-decoration" aria-hidden="true">
        <span>
          <Layers3 strokeWidth={1.75} />
        </span>
        <span>
          <SlidersHorizontal strokeWidth={1.75} />
        </span>
        <span>
          <Workflow strokeWidth={1.75} />
        </span>
      </div>
      <div className="cr-hero-content">
        <Badge variant="outline">
          {eyebrow}
          <ArrowUpRight size={13} strokeWidth={1.75} aria-hidden="true" />
        </Badge>
        <h1>{title}</h1>
        <p className="cr-description">{description}</p>
        <div className="cr-hero-actions">
          <a className="cr-button" href={primary.href}>
            {primary.label}
            <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
          </a>
          {secondary && (
            <a className="cr-button" data-variant="ghost" href={secondary.href}>
              {secondary.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
      </div>
      {children && <div className="cr-hero-media">{children}</div>}
    </section>
  );
}

export function FeaturesBlock({
  title,
  description,
  eyebrow,
  items,
}: {
  title: string;
  description: string;
  eyebrow?: string;
  items: Array<{
    title: string;
    description: string;
    icon?: ReactNode;
    visual?: ReactNode;
    eyebrow?: string;
    href?: string;
    linkLabel?: string;
  }>;
}) {
  const fallbackIcons = [Layers3, Workflow, SlidersHorizontal];
  return (
    <section className="cr-marketing-section cr-features-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-features-grid">
        {items.map((item, index) => {
          const Icon = fallbackIcons[index % fallbackIcons.length];
          return (
            <Card
              key={item.title}
              className="cr-feature-card"
              data-featured={(index === 0 && items.length >= 3) || undefined}
              data-has-visual={Boolean(item.visual) || undefined}
            >
              <div className="cr-feature-copy">
                <div className="cr-feature-topline">
                  <span aria-hidden="true" className="cr-feature-icon">
                    {item.icon ?? <Icon size={22} strokeWidth={1.75} />}
                  </span>
                  <span className="cr-feature-index" aria-hidden="true">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                </div>
                {item.eyebrow && (
                  <p className="cr-marketing-eyebrow">{item.eyebrow}</p>
                )}
                <h3>{item.title}</h3>
                <p className="cr-description">{item.description}</p>
                {item.href && (
                  <a className="cr-feature-link" href={item.href}>
                    {item.linkLabel ?? "Explore feature"}
                    <ArrowUpRight
                      size={16}
                      strokeWidth={1.75}
                      aria-hidden="true"
                    />
                  </a>
                )}
              </div>
              {item.visual && (
                <div className="cr-feature-visual">{item.visual}</div>
              )}
            </Card>
          );
        })}
      </div>
    </section>
  );
}

export function PricingBlock({
  title,
  plans,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  plans: Array<{
    name: string;
    price: string;
    period: string;
    description: string;
    features: string[];
    href: string;
    action: string;
    featured?: boolean;
  }>;
}) {
  return (
    <section className="cr-marketing-section cr-pricing-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-pricing-grid">
        {plans.map((plan) => (
          <Card
            key={plan.name}
            className="cr-pricing-card"
            data-featured={plan.featured || undefined}
          >
            <div className="cr-plan-heading">
              <h3>{plan.name}</h3>
              <div
                className="cr-price-recommendation"
                aria-hidden={!plan.featured || undefined}
              >
                {plan.featured && <Badge variant="primary">Recommended</Badge>}
              </div>
            </div>
            <p className="cr-plan-description cr-description">
              {plan.description}
            </p>
            <p className="cr-price">
              {plan.price}
              <small>{plan.period}</small>
            </p>
            <ul className="cr-price-features">
              {plan.features.map((feature) => (
                <li key={feature}>
                  <Check size={17} strokeWidth={1.75} aria-hidden="true" />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
            <a
              className="cr-button"
              data-variant={plan.featured ? "primary" : "outline"}
              href={plan.href}
            >
              {plan.action}
              <ArrowRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function TestimonialsBlock({
  title,
  quotes,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  quotes: Array<{ quote: string; name: string; role: string; avatar?: string }>;
}) {
  return (
    <section className="cr-marketing-section cr-testimonials-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-testimonials-grid">
        {quotes.map((quote, index) => (
          <Card
            key={quote.name}
            className="cr-testimonial-card"
            data-featured={index === 0 || undefined}
          >
            <figure className="cr-testimonial-figure">
              <Quote
                className="cr-quote-icon"
                size={26}
                strokeWidth={1.75}
                aria-hidden="true"
              />
              <blockquote className="cr-quote">
                <p>{quote.quote}</p>
              </blockquote>
              <figcaption className="cr-quote-author">
                <Avatar name={quote.name} src={quote.avatar} size={40} />
                <div>
                  <cite>{quote.name}</cite>
                  <p className="cr-description">{quote.role}</p>
                </div>
              </figcaption>
            </figure>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function FaqBlock({
  title,
  items,
  eyebrow,
  description,
  contact,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  contact?: { label: string; href: string };
  items: Array<{ question: string; answer: ReactNode }>;
}) {
  return (
    <section className="cr-marketing-section cr-faq-section">
      <div className="cr-faq-layout">
        <div className="cr-faq-intro">
          <MarketingHeading
            title={title}
            description={description}
            eyebrow={eyebrow}
          />
          {contact && (
            <a className="cr-feature-link" href={contact.href}>
              {contact.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
        <div className="cr-faq-content">
          <Accordion
            items={items.map((item, index) => ({
              value: String(index),
              title: item.question,
              content: item.answer,
            }))}
          />
        </div>
      </div>
    </section>
  );
}

export function CtaBlock({
  title,
  description,
  action,
  eyebrow,
  secondary,
}: {
  title: string;
  description: string;
  action: { label: string; href: string };
  eyebrow?: string;
  secondary?: { label: string; href: string };
}) {
  return (
    <Card className="cr-cta-card">
      <div className="cr-cta">
        <div className="cr-cta-content">
          {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
          <h2>{title}</h2>
          <p className="cr-description">{description}</p>
          <div className="cr-cta-actions">
            <a className="cr-button" href={action.href}>
              {action.label}
              <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
            </a>
            {secondary && (
              <a className="cr-feature-link" href={secondary.href}>
                {secondary.label}
                <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
              </a>
            )}
          </div>
        </div>
        <div className="cr-cta-emblem" aria-hidden="true">
          <ArrowUpRight strokeWidth={1.75} />
        </div>
      </div>
    </Card>
  );
}

export function FooterBlock({
  brand,
  description,
  groups,
  copyright,
  logo,
  brandHref,
  legalLinks,
}: {
  brand: string;
  description: string;
  groups: Array<{
    title: string;
    links: Array<{ label: string; href: string }>;
  }>;
  copyright: string;
  logo?: ReactNode;
  brandHref?: string;
  legalLinks?: Array<{ label: string; href: string }>;
}) {
  const identity = (
    <>
      {logo && (
        <span className="cr-footer-logo" aria-hidden="true">
          {logo}
        </span>
      )}
      <strong>{brand}</strong>
    </>
  );
  return (
    <footer className="cr-footer">
      <div className="cr-footer-main">
        <div className="cr-footer-brand">
          {brandHref ? (
            <a className="cr-footer-identity" href={brandHref}>
              {identity}
            </a>
          ) : (
            <div className="cr-footer-identity">{identity}</div>
          )}
          <p className="cr-description">{description}</p>
        </div>
        <div className="cr-footer-navigation">
          {groups.map((group) => (
            <nav key={group.title} aria-label={group.title}>
              <strong>{group.title}</strong>
              {group.links.map((link) => (
                <a key={link.href} href={link.href}>
                  {link.label}
                </a>
              ))}
            </nav>
          ))}
        </div>
      </div>
      <div className="cr-footer-bottom">
        <p className="cr-description">{copyright}</p>
        {legalLinks?.length ? (
          <nav aria-label="Legal">
            {legalLinks.map((link) => (
              <a href={link.href} key={link.href}>
                {link.label}
              </a>
            ))}
          </nav>
        ) : null}
      </div>
    </footer>
  );
}
```


---

# blocks/forgot-password

---
title: "Forgot Password"
description: "A recovery request form that preserves account privacy."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/forgot-password

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { ForgotPasswordBlock } from './components/blocks/auth';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Button](/docs/components/button), [Card](/docs/components/card), [Field](/docs/components/field), [Input](/docs/components/input), [Input Group](/docs/components/input-group), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useId, useState, type CSSProperties, type ReactNode } from "react";
import {
  ArrowLeft,
  ArrowRight,
  Eye,
  EyeOff,
  KeyRound,
  LockKeyhole,
  Mail,
  ShieldCheck,
  UserRound,
} from "lucide-react";
import { Button, Card, Field, Input, InputGroup } from '../ui';
import { ActionForm, type FormAction } from "./common";

function AuthFrame({
  title,
  description,
  eyebrow,
  icon,
  footer,
  children,
}: {
  title: string;
  description: string;
  eyebrow: string;
  icon: ReactNode;
  footer?: ReactNode;
  children: ReactNode;
}) {
  const titleId = useId();
  return (
    <div className="cr-block-form cr-auth-shell">
      <Card className="cr-auth-card" aria-labelledby={titleId} footer={footer}>
        <header className="cr-auth-header">
          <div className="cr-auth-intro">
            <span className="cr-auth-symbol" aria-hidden="true">
              {icon}
            </span>
            <span className="cr-auth-eyebrow">{eyebrow}</span>
          </div>
          <h2 id={titleId} className="cr-auth-title">
            {title}
          </h2>
          <p className="cr-auth-description">{description}</p>
        </header>
        {children}
      </Card>
    </div>
  );
}

function PasswordInput({
  name,
  autoComplete,
  minLength,
  placeholder = "Enter your password",
}: {
  name: string;
  autoComplete: "current-password" | "new-password";
  minLength?: number;
  placeholder?: string;
}) {
  const [visible, setVisible] = useState(false);
  return (
    <InputGroup
      name={name}
      type={visible ? "text" : "password"}
      autoComplete={autoComplete}
      minLength={minLength}
      required
      placeholder={placeholder}
      leading={<LockKeyhole size={16} aria-hidden="true" />}
      trailing={
        <Button
          type="button"
          variant="ghost"
          className="cr-auth-password-toggle"
          aria-label={visible ? "Hide password" : "Show password"}
          aria-pressed={visible}
          onClick={() => setVisible(!visible)}
        >
          {visible ? (
            <EyeOff size={16} aria-hidden="true" />
          ) : (
            <Eye size={16} aria-hidden="true" />
          )}
        </Button>
      }
    />
  );
}

export function LoginBlock({
  onSubmit,
  signupHref,
  forgotHref,
}: {
  onSubmit: FormAction;
  signupHref: string;
  forgotHref: string;
}) {
  return (
    <AuthFrame
      title="Welcome back."
      description="Sign in to your workspace and pick up where you left off."
      eyebrow="Your workspace"
      icon={<LockKeyhole size={24} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          New here?{" "}
          <a className="cr-auth-link" href={signupHref}>
            Create an account <ArrowRight size={14} aria-hidden="true" />
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Sign in"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Signed in."
      >
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Password">
          <PasswordInput name="password" autoComplete="current-password" />
        </Field>
        <div className="cr-auth-assistance">
          <a className="cr-auth-link" href={forgotHref}>
            Forgot password?
          </a>
        </div>
      </ActionForm>
    </AuthFrame>
  );
}

export function SignupBlock({
  onSubmit,
  loginHref,
}: {
  onSubmit: FormAction;
  loginHref: string;
}) {
  return (
    <AuthFrame
      title="Make room for what’s next."
      description="Create your account. A fresh workspace starts here."
      eyebrow="A new beginning"
      icon={<UserRound size={23} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          Already have an account?{" "}
          <a className="cr-auth-link" href={loginHref}>
            Sign in <ArrowRight size={14} aria-hidden="true" />
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Create account"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Check your inbox to confirm your email address."
      >
        <Field label="Full name">
          <InputGroup
            name="name"
            autoComplete="name"
            required
            placeholder="Your full name"
            leading={<UserRound size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Password" description="Use at least 12 characters.">
          <PasswordInput
            name="password"
            autoComplete="new-password"
            minLength={12}
            placeholder="Create a password"
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function ForgotPasswordBlock({
  onSubmit,
  loginHref,
}: {
  onSubmit: FormAction;
  loginHref: string;
}) {
  return (
    <AuthFrame
      title="Let’s get you back in."
      description="Enter your account’s email address. We’ll send you a link to choose a new password."
      eyebrow="Account recovery"
      icon={<KeyRound size={24} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          <a className="cr-auth-link" href={loginHref}>
            <ArrowLeft size={14} aria-hidden="true" /> Back to sign in
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Send reset link"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="If this address has an account, a reset link is on its way."
      >
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function ResetPasswordBlock({ onSubmit }: { onSubmit: FormAction }) {
  return (
    <AuthFrame
      title="A fresh start."
      description="Choose a new password to get back to your workspace."
      eyebrow="Reset password"
      icon={<ShieldCheck size={24} strokeWidth={1.75} />}
    >
      <ActionForm
        onSubmit={onSubmit}
        validate={(data) =>
          data.get("password") !== data.get("confirmation")
            ? "Passwords do not match. Enter the same password in both fields."
            : undefined
        }
        submitLabel="Update password"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Your password has been updated."
      >
        <Field label="New password" description="Use at least 12 characters.">
          <PasswordInput
            name="password"
            autoComplete="new-password"
            minLength={12}
            placeholder="Create a new password"
          />
        </Field>
        <Field label="Confirm password">
          <PasswordInput
            name="confirmation"
            autoComplete="new-password"
            minLength={12}
            placeholder="Enter it one more time"
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function OtpBlock({
  onSubmit,
  length = 6,
}: {
  onSubmit: FormAction;
  length?: number;
}) {
  const size = Number.isFinite(length)
    ? Math.max(4, Math.min(10, Math.floor(length)))
    : 6;
  return (
    <AuthFrame
      title="Check your inbox."
      description={`Enter the ${size}-digit verification code from your email to continue.`}
      eyebrow="One more step"
      icon={<Mail size={24} strokeWidth={1.75} />}
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Verify code"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Code verified."
      >
        <Field
          label="Verification code"
          description="You can paste the entire code into this field."
        >
          <Input
            name="code"
            inputMode="numeric"
            autoComplete="one-time-code"
            minLength={size}
            maxLength={size}
            pattern={`[0-9]{${size}}`}
            required
            className="cr-otp"
            placeholder={"0".repeat(size)}
            style={{ "--cr-otp-length": size } as CSSProperties}
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}
```


---

# blocks/hero

---
title: "Hero"
description: "A focused product introduction with two actions."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/hero

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { HeroBlock } from './components/blocks/marketing';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Accordion](/docs/components/accordion), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Card](/docs/components/card).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import type { ReactNode } from "react";
import {
  ArrowRight,
  ArrowUpRight,
  Check,
  Layers3,
  Quote,
  SlidersHorizontal,
  Workflow,
} from "lucide-react";
import { Accordion, Avatar, Badge, Card } from '../ui';

function MarketingHeading({
  title,
  description,
  eyebrow,
}: {
  title: string;
  description?: string;
  eyebrow?: string;
}) {
  return (
    <header className="cr-marketing-heading">
      <div>
        {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
        <h2>{title}</h2>
      </div>
      {description && <p className="cr-description">{description}</p>}
    </header>
  );
}

export function HeroBlock({
  eyebrow,
  title,
  description,
  primary,
  secondary,
  children,
}: {
  eyebrow: string;
  title: string;
  description: string;
  primary: { label: string; href: string };
  secondary?: { label: string; href: string };
  children?: ReactNode;
}) {
  return (
    <section className="cr-hero cr-marketing-hero">
      <div className="cr-hero-decoration" aria-hidden="true">
        <span>
          <Layers3 strokeWidth={1.75} />
        </span>
        <span>
          <SlidersHorizontal strokeWidth={1.75} />
        </span>
        <span>
          <Workflow strokeWidth={1.75} />
        </span>
      </div>
      <div className="cr-hero-content">
        <Badge variant="outline">
          {eyebrow}
          <ArrowUpRight size={13} strokeWidth={1.75} aria-hidden="true" />
        </Badge>
        <h1>{title}</h1>
        <p className="cr-description">{description}</p>
        <div className="cr-hero-actions">
          <a className="cr-button" href={primary.href}>
            {primary.label}
            <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
          </a>
          {secondary && (
            <a className="cr-button" data-variant="ghost" href={secondary.href}>
              {secondary.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
      </div>
      {children && <div className="cr-hero-media">{children}</div>}
    </section>
  );
}

export function FeaturesBlock({
  title,
  description,
  eyebrow,
  items,
}: {
  title: string;
  description: string;
  eyebrow?: string;
  items: Array<{
    title: string;
    description: string;
    icon?: ReactNode;
    visual?: ReactNode;
    eyebrow?: string;
    href?: string;
    linkLabel?: string;
  }>;
}) {
  const fallbackIcons = [Layers3, Workflow, SlidersHorizontal];
  return (
    <section className="cr-marketing-section cr-features-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-features-grid">
        {items.map((item, index) => {
          const Icon = fallbackIcons[index % fallbackIcons.length];
          return (
            <Card
              key={item.title}
              className="cr-feature-card"
              data-featured={(index === 0 && items.length >= 3) || undefined}
              data-has-visual={Boolean(item.visual) || undefined}
            >
              <div className="cr-feature-copy">
                <div className="cr-feature-topline">
                  <span aria-hidden="true" className="cr-feature-icon">
                    {item.icon ?? <Icon size={22} strokeWidth={1.75} />}
                  </span>
                  <span className="cr-feature-index" aria-hidden="true">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                </div>
                {item.eyebrow && (
                  <p className="cr-marketing-eyebrow">{item.eyebrow}</p>
                )}
                <h3>{item.title}</h3>
                <p className="cr-description">{item.description}</p>
                {item.href && (
                  <a className="cr-feature-link" href={item.href}>
                    {item.linkLabel ?? "Explore feature"}
                    <ArrowUpRight
                      size={16}
                      strokeWidth={1.75}
                      aria-hidden="true"
                    />
                  </a>
                )}
              </div>
              {item.visual && (
                <div className="cr-feature-visual">{item.visual}</div>
              )}
            </Card>
          );
        })}
      </div>
    </section>
  );
}

export function PricingBlock({
  title,
  plans,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  plans: Array<{
    name: string;
    price: string;
    period: string;
    description: string;
    features: string[];
    href: string;
    action: string;
    featured?: boolean;
  }>;
}) {
  return (
    <section className="cr-marketing-section cr-pricing-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-pricing-grid">
        {plans.map((plan) => (
          <Card
            key={plan.name}
            className="cr-pricing-card"
            data-featured={plan.featured || undefined}
          >
            <div className="cr-plan-heading">
              <h3>{plan.name}</h3>
              <div
                className="cr-price-recommendation"
                aria-hidden={!plan.featured || undefined}
              >
                {plan.featured && <Badge variant="primary">Recommended</Badge>}
              </div>
            </div>
            <p className="cr-plan-description cr-description">
              {plan.description}
            </p>
            <p className="cr-price">
              {plan.price}
              <small>{plan.period}</small>
            </p>
            <ul className="cr-price-features">
              {plan.features.map((feature) => (
                <li key={feature}>
                  <Check size={17} strokeWidth={1.75} aria-hidden="true" />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
            <a
              className="cr-button"
              data-variant={plan.featured ? "primary" : "outline"}
              href={plan.href}
            >
              {plan.action}
              <ArrowRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function TestimonialsBlock({
  title,
  quotes,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  quotes: Array<{ quote: string; name: string; role: string; avatar?: string }>;
}) {
  return (
    <section className="cr-marketing-section cr-testimonials-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-testimonials-grid">
        {quotes.map((quote, index) => (
          <Card
            key={quote.name}
            className="cr-testimonial-card"
            data-featured={index === 0 || undefined}
          >
            <figure className="cr-testimonial-figure">
              <Quote
                className="cr-quote-icon"
                size={26}
                strokeWidth={1.75}
                aria-hidden="true"
              />
              <blockquote className="cr-quote">
                <p>{quote.quote}</p>
              </blockquote>
              <figcaption className="cr-quote-author">
                <Avatar name={quote.name} src={quote.avatar} size={40} />
                <div>
                  <cite>{quote.name}</cite>
                  <p className="cr-description">{quote.role}</p>
                </div>
              </figcaption>
            </figure>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function FaqBlock({
  title,
  items,
  eyebrow,
  description,
  contact,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  contact?: { label: string; href: string };
  items: Array<{ question: string; answer: ReactNode }>;
}) {
  return (
    <section className="cr-marketing-section cr-faq-section">
      <div className="cr-faq-layout">
        <div className="cr-faq-intro">
          <MarketingHeading
            title={title}
            description={description}
            eyebrow={eyebrow}
          />
          {contact && (
            <a className="cr-feature-link" href={contact.href}>
              {contact.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
        <div className="cr-faq-content">
          <Accordion
            items={items.map((item, index) => ({
              value: String(index),
              title: item.question,
              content: item.answer,
            }))}
          />
        </div>
      </div>
    </section>
  );
}

export function CtaBlock({
  title,
  description,
  action,
  eyebrow,
  secondary,
}: {
  title: string;
  description: string;
  action: { label: string; href: string };
  eyebrow?: string;
  secondary?: { label: string; href: string };
}) {
  return (
    <Card className="cr-cta-card">
      <div className="cr-cta">
        <div className="cr-cta-content">
          {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
          <h2>{title}</h2>
          <p className="cr-description">{description}</p>
          <div className="cr-cta-actions">
            <a className="cr-button" href={action.href}>
              {action.label}
              <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
            </a>
            {secondary && (
              <a className="cr-feature-link" href={secondary.href}>
                {secondary.label}
                <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
              </a>
            )}
          </div>
        </div>
        <div className="cr-cta-emblem" aria-hidden="true">
          <ArrowUpRight strokeWidth={1.75} />
        </div>
      </div>
    </Card>
  );
}

export function FooterBlock({
  brand,
  description,
  groups,
  copyright,
  logo,
  brandHref,
  legalLinks,
}: {
  brand: string;
  description: string;
  groups: Array<{
    title: string;
    links: Array<{ label: string; href: string }>;
  }>;
  copyright: string;
  logo?: ReactNode;
  brandHref?: string;
  legalLinks?: Array<{ label: string; href: string }>;
}) {
  const identity = (
    <>
      {logo && (
        <span className="cr-footer-logo" aria-hidden="true">
          {logo}
        </span>
      )}
      <strong>{brand}</strong>
    </>
  );
  return (
    <footer className="cr-footer">
      <div className="cr-footer-main">
        <div className="cr-footer-brand">
          {brandHref ? (
            <a className="cr-footer-identity" href={brandHref}>
              {identity}
            </a>
          ) : (
            <div className="cr-footer-identity">{identity}</div>
          )}
          <p className="cr-description">{description}</p>
        </div>
        <div className="cr-footer-navigation">
          {groups.map((group) => (
            <nav key={group.title} aria-label={group.title}>
              <strong>{group.title}</strong>
              {group.links.map((link) => (
                <a key={link.href} href={link.href}>
                  {link.label}
                </a>
              ))}
            </nav>
          ))}
        </div>
      </div>
      <div className="cr-footer-bottom">
        <p className="cr-description">{copyright}</p>
        {legalLinks?.length ? (
          <nav aria-label="Legal">
            {legalLinks.map((link) => (
              <a href={link.href} key={link.href}>
                {link.label}
              </a>
            ))}
          </nav>
        ) : null}
      </div>
    </footer>
  );
}
```


---

# blocks/index

---
title: Complete blocks
description: 26 blocks that follow your design system. Editable source, typed props and live previews.
---

- [API Keys](https://ui.coderocket.app/docs/blocks/api-keys): A masked key list with creation and revocation callbacks.
- [App Header](https://ui.coderocket.app/docs/blocks/app-header): Breadcrumbs, search and account actions in an application header.
- [App Sidebar](https://ui.coderocket.app/docs/blocks/app-sidebar): Collapsible workspace navigation with account identity.
- [Billing](https://ui.coderocket.app/docs/blocks/billing): Subscription summary, seat usage and invoice links.
- [Call to Action](https://ui.coderocket.app/docs/blocks/cta): A call-to-action panel with product copy.
- [Data Table](https://ui.coderocket.app/docs/blocks/data-table): A searchable, sortable, paginated records panel.
- [Detail View](https://ui.coderocket.app/docs/blocks/detail-view): Structured record details with an edit action.
- [Empty State](https://ui.coderocket.app/docs/blocks/empty-state): A welcoming empty collection with a primary action.
- [FAQ](https://ui.coderocket.app/docs/blocks/faq): An accessible accordion of questions and answers.
- [Features](https://ui.coderocket.app/docs/blocks/features): A responsive feature grid built from cards.
- [Filters](https://ui.coderocket.app/docs/blocks/filters): Search and status filters with reset and controlled output.
- [Footer](https://ui.coderocket.app/docs/blocks/footer): Grouped navigation, brand description and copyright.
- [Forgot Password](https://ui.coderocket.app/docs/blocks/forgot-password): A recovery request form that preserves account privacy.
- [Hero](https://ui.coderocket.app/docs/blocks/hero): A focused product introduction with two actions.
- [Login](https://ui.coderocket.app/docs/blocks/login): A sign-in form with typed submission callback.
- [Notifications](https://ui.coderocket.app/docs/blocks/notifications): An inbox with unread states and mark-as-read actions.
- [OTP](https://ui.coderocket.app/docs/blocks/otp): A one-time-code form with numeric validation.
- [Pricing](https://ui.coderocket.app/docs/blocks/pricing): Comparable plans, features and purchase links.
- [Profile](https://ui.coderocket.app/docs/blocks/profile): Editable profile details and identity.
- [Reset Password](https://ui.coderocket.app/docs/blocks/reset-password): A password reset form with matching confirmation.
- [Search](https://ui.coderocket.app/docs/blocks/search): Filter and select content from a local collection.
- [Settings](https://ui.coderocket.app/docs/blocks/settings): Workspace and notification settings in accessible tabs.
- [Sign Up](https://ui.coderocket.app/docs/blocks/signup): A registration form with email and password validation.
- [Stats](https://ui.coderocket.app/docs/blocks/stats): Responsive metric cards with textual trend indicators.
- [Team](https://ui.coderocket.app/docs/blocks/team): A member list with invitation and removal callbacks.
- [Testimonials](https://ui.coderocket.app/docs/blocks/testimonials): Customer quotations with author identities.


---

# blocks/login

---
title: "Login"
description: "A sign-in form with typed submission callback."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/login

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { LoginBlock } from './components/blocks/auth';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Button](/docs/components/button), [Card](/docs/components/card), [Field](/docs/components/field), [Input](/docs/components/input), [Input Group](/docs/components/input-group), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useId, useState, type CSSProperties, type ReactNode } from "react";
import {
  ArrowLeft,
  ArrowRight,
  Eye,
  EyeOff,
  KeyRound,
  LockKeyhole,
  Mail,
  ShieldCheck,
  UserRound,
} from "lucide-react";
import { Button, Card, Field, Input, InputGroup } from '../ui';
import { ActionForm, type FormAction } from "./common";

function AuthFrame({
  title,
  description,
  eyebrow,
  icon,
  footer,
  children,
}: {
  title: string;
  description: string;
  eyebrow: string;
  icon: ReactNode;
  footer?: ReactNode;
  children: ReactNode;
}) {
  const titleId = useId();
  return (
    <div className="cr-block-form cr-auth-shell">
      <Card className="cr-auth-card" aria-labelledby={titleId} footer={footer}>
        <header className="cr-auth-header">
          <div className="cr-auth-intro">
            <span className="cr-auth-symbol" aria-hidden="true">
              {icon}
            </span>
            <span className="cr-auth-eyebrow">{eyebrow}</span>
          </div>
          <h2 id={titleId} className="cr-auth-title">
            {title}
          </h2>
          <p className="cr-auth-description">{description}</p>
        </header>
        {children}
      </Card>
    </div>
  );
}

function PasswordInput({
  name,
  autoComplete,
  minLength,
  placeholder = "Enter your password",
}: {
  name: string;
  autoComplete: "current-password" | "new-password";
  minLength?: number;
  placeholder?: string;
}) {
  const [visible, setVisible] = useState(false);
  return (
    <InputGroup
      name={name}
      type={visible ? "text" : "password"}
      autoComplete={autoComplete}
      minLength={minLength}
      required
      placeholder={placeholder}
      leading={<LockKeyhole size={16} aria-hidden="true" />}
      trailing={
        <Button
          type="button"
          variant="ghost"
          className="cr-auth-password-toggle"
          aria-label={visible ? "Hide password" : "Show password"}
          aria-pressed={visible}
          onClick={() => setVisible(!visible)}
        >
          {visible ? (
            <EyeOff size={16} aria-hidden="true" />
          ) : (
            <Eye size={16} aria-hidden="true" />
          )}
        </Button>
      }
    />
  );
}

export function LoginBlock({
  onSubmit,
  signupHref,
  forgotHref,
}: {
  onSubmit: FormAction;
  signupHref: string;
  forgotHref: string;
}) {
  return (
    <AuthFrame
      title="Welcome back."
      description="Sign in to your workspace and pick up where you left off."
      eyebrow="Your workspace"
      icon={<LockKeyhole size={24} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          New here?{" "}
          <a className="cr-auth-link" href={signupHref}>
            Create an account <ArrowRight size={14} aria-hidden="true" />
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Sign in"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Signed in."
      >
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Password">
          <PasswordInput name="password" autoComplete="current-password" />
        </Field>
        <div className="cr-auth-assistance">
          <a className="cr-auth-link" href={forgotHref}>
            Forgot password?
          </a>
        </div>
      </ActionForm>
    </AuthFrame>
  );
}

export function SignupBlock({
  onSubmit,
  loginHref,
}: {
  onSubmit: FormAction;
  loginHref: string;
}) {
  return (
    <AuthFrame
      title="Make room for what’s next."
      description="Create your account. A fresh workspace starts here."
      eyebrow="A new beginning"
      icon={<UserRound size={23} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          Already have an account?{" "}
          <a className="cr-auth-link" href={loginHref}>
            Sign in <ArrowRight size={14} aria-hidden="true" />
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Create account"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Check your inbox to confirm your email address."
      >
        <Field label="Full name">
          <InputGroup
            name="name"
            autoComplete="name"
            required
            placeholder="Your full name"
            leading={<UserRound size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Password" description="Use at least 12 characters.">
          <PasswordInput
            name="password"
            autoComplete="new-password"
            minLength={12}
            placeholder="Create a password"
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function ForgotPasswordBlock({
  onSubmit,
  loginHref,
}: {
  onSubmit: FormAction;
  loginHref: string;
}) {
  return (
    <AuthFrame
      title="Let’s get you back in."
      description="Enter your account’s email address. We’ll send you a link to choose a new password."
      eyebrow="Account recovery"
      icon={<KeyRound size={24} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          <a className="cr-auth-link" href={loginHref}>
            <ArrowLeft size={14} aria-hidden="true" /> Back to sign in
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Send reset link"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="If this address has an account, a reset link is on its way."
      >
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function ResetPasswordBlock({ onSubmit }: { onSubmit: FormAction }) {
  return (
    <AuthFrame
      title="A fresh start."
      description="Choose a new password to get back to your workspace."
      eyebrow="Reset password"
      icon={<ShieldCheck size={24} strokeWidth={1.75} />}
    >
      <ActionForm
        onSubmit={onSubmit}
        validate={(data) =>
          data.get("password") !== data.get("confirmation")
            ? "Passwords do not match. Enter the same password in both fields."
            : undefined
        }
        submitLabel="Update password"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Your password has been updated."
      >
        <Field label="New password" description="Use at least 12 characters.">
          <PasswordInput
            name="password"
            autoComplete="new-password"
            minLength={12}
            placeholder="Create a new password"
          />
        </Field>
        <Field label="Confirm password">
          <PasswordInput
            name="confirmation"
            autoComplete="new-password"
            minLength={12}
            placeholder="Enter it one more time"
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function OtpBlock({
  onSubmit,
  length = 6,
}: {
  onSubmit: FormAction;
  length?: number;
}) {
  const size = Number.isFinite(length)
    ? Math.max(4, Math.min(10, Math.floor(length)))
    : 6;
  return (
    <AuthFrame
      title="Check your inbox."
      description={`Enter the ${size}-digit verification code from your email to continue.`}
      eyebrow="One more step"
      icon={<Mail size={24} strokeWidth={1.75} />}
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Verify code"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Code verified."
      >
        <Field
          label="Verification code"
          description="You can paste the entire code into this field."
        >
          <Input
            name="code"
            inputMode="numeric"
            autoComplete="one-time-code"
            minLength={size}
            maxLength={size}
            pattern={`[0-9]{${size}}`}
            required
            className="cr-otp"
            placeholder={"0".repeat(size)}
            style={{ "--cr-otp-length": size } as CSSProperties}
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}
```


---

# blocks/notifications

---
title: "Notifications"
description: "An inbox with unread states and mark-as-read actions."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/notifications

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { NotificationsBlock } from './components/blocks/application';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Sidebar](/docs/components/sidebar), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Breadcrumb](/docs/components/breadcrumb), [Button](/docs/components/button), [Card](/docs/components/card), [Dialog](/docs/components/dialog), [Dropdown](/docs/components/dropdown), [Field](/docs/components/field), [Input](/docs/components/input), [Progress](/docs/components/progress), [Switch](/docs/components/switch), [Tabs](/docs/components/tabs), [Textarea](/docs/components/textarea), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowUpRight,
  Bell,
  Building2,
  CheckCheck,
  ChevronRight,
  CreditCard,
  FileText,
  KeyRound,
  Layers2,
  LayoutGrid,
  Plus,
  Search,
  ShieldCheck,
  Trash2,
  UserRound,
  UserRoundPlus,
  UsersRound,
} from "lucide-react";
import {
  Sidebar,
  Avatar,
  Badge,
  Breadcrumb,
  Button,
  Card,
  Dialog,
  Dropdown,
  Field,
  Input,
  Progress,
  Switch,
  Tabs,
  Textarea,
} from '../ui';
import { ActionForm, type FormAction } from "./common";

function WorkspaceHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function AppSidebarBlock({
  workspace,
  items,
  accountName,
}: {
  workspace: string;
  items: ComponentProps<typeof Sidebar>["items"];
  accountName: string;
}) {
  return (
    <div className="cr-app-sidebar-block">
      <Sidebar
        brand={
          <span className="cr-workspace-brand">
            <span className="cr-workspace-brand-icon">
              <Layers2 size={19} aria-hidden="true" />
            </span>
            <span>
              <strong>{workspace}</strong>
              <small>Workspace</small>
            </span>
          </span>
        }
        items={items.map((item) => ({
          ...item,
          icon: item.icon ?? <LayoutGrid size={18} aria-hidden="true" />,
        }))}
        footer={
          <div className="cr-workspace-account">
            <Avatar name={accountName} size={34} />
            <span>
              <strong>{accountName}</strong>
              <small>Account</small>
            </span>
          </div>
        }
      />
    </div>
  );
}

export function AppHeaderBlock({
  breadcrumbs,
  accountName,
  onSearch,
  onSignOut,
}: {
  breadcrumbs: ComponentProps<typeof Breadcrumb>["items"];
  accountName: string;
  onSearch: () => void;
  onSignOut: () => void;
}) {
  return (
    <header className="cr-block-header cr-workspace-header">
      <div className="cr-workspace-header-location">
        <span className="cr-workspace-header-icon">
          <Layers2 size={18} aria-hidden="true" />
        </span>
        <Breadcrumb items={breadcrumbs} />
      </div>
      <div className="cr-workspace-header-actions">
        <Button variant="ghost" onClick={onSearch}>
          <Search size={17} aria-hidden="true" />
          <span>Search</span>
        </Button>
        <span className="cr-workspace-header-divider" aria-hidden="true" />
        <Dropdown
          trigger={
            <>
              <Avatar name={accountName} size={28} />
              <span className="cr-workspace-header-name">{accountName}</span>
              <span className="cr-sr-only">Account menu</span>
            </>
          }
          items={[{ label: "Sign out", onSelect: onSignOut }]}
        />
      </div>
    </header>
  );
}

export function ProfileBlock({
  name,
  email,
  bio = "",
  onSave,
}: {
  name: string;
  email: string;
  bio?: string;
  onSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-profile">
      <WorkspaceHeading
        eyebrow="Account"
        title="Your profile"
        description="The details your team sees when you work together."
      />
      <div className="cr-workspace-identity">
        <Avatar name={name} size={58} />
        <div>
          <strong>{name}</strong>
          <span>{email}</span>
        </div>
        <span className="cr-workspace-icon-tile">
          <UserRound size={20} aria-hidden="true" />
        </span>
      </div>
      <ActionForm onSubmit={onSave}>
        <div className="cr-workspace-form-grid">
          <Field label="Display name">
            <Input
              name="name"
              defaultValue={name}
              autoComplete="name"
              required
            />
          </Field>
          <Field label="Email address">
            <Input
              name="email"
              type="email"
              defaultValue={email}
              autoComplete="email"
              required
            />
          </Field>
        </div>
        <Field label="About you">
          <Textarea
            name="bio"
            defaultValue={bio}
            placeholder="A few words about you and your work."
          />
        </Field>
      </ActionForm>
    </Card>
  );
}

export function SettingsBlock({
  workspaceName,
  onSave,
  onNotificationSave,
}: {
  workspaceName: string;
  onSave: FormAction;
  onNotificationSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-settings">
      <WorkspaceHeading
        eyebrow="Workspace"
        title="Settings"
        description="A few details that make this space yours."
        action={
          <span className="cr-workspace-icon-tile">
            <Building2 size={20} aria-hidden="true" />
          </span>
        }
      />
      <Tabs
        label="Settings sections"
        items={[
          {
            value: "general",
            label: "General",
            content: (
              <ActionForm onSubmit={onSave}>
                <Field label="Workspace name">
                  <Input
                    name="workspace"
                    defaultValue={workspaceName}
                    required
                  />
                </Field>
                <Field label="Description">
                  <Textarea
                    name="description"
                    placeholder="What are you building?"
                  />
                </Field>
              </ActionForm>
            ),
          },
          {
            value: "notifications",
            label: "Notifications",
            content: (
              <ActionForm onSubmit={onNotificationSave}>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <FileText size={18} aria-hidden="true" />
                    </span>
                    <p>A summary of what happened across your workspace.</p>
                  </div>
                  <Switch name="digest" label="Weekly digest" defaultChecked />
                </div>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <Bell size={18} aria-hidden="true" />
                    </span>
                    <p>Stay in the loop when someone needs your attention.</p>
                  </div>
                  <Switch
                    name="mentions"
                    label="Mention notifications"
                    defaultChecked
                  />
                </div>
              </ActionForm>
            ),
          },
        ]}
      />
    </Card>
  );
}

export interface TeamMember {
  id: string;
  name: string;
  email: string;
  role: string;
}
export function TeamBlock({
  members,
  onInvite,
  onRemove,
}: {
  members: TeamMember[];
  onInvite: FormAction;
  onRemove: (id: string) => void | Promise<void>;
}) {
  const [removing, setRemoving] = useState<string | null>(null),
    [error, setError] = useState(false);
  return (
    <Card className="cr-workspace-block cr-workspace-team">
      <WorkspaceHeading
        eyebrow="People & access"
        title="Your team"
        description="Good work starts with the right people."
        action={
          <Dialog
            trigger={
              <>
                <UserRoundPlus size={16} aria-hidden="true" />
                Invite member
              </>
            }
            title="Invite someone to your team"
            description="Enter the email address of the person you’d like to invite."
            footer={null}
          >
            <ActionForm
              onSubmit={onInvite}
              submitLabel="Send invitation"
              successMessage="Invitation sent."
            >
              <Field label="Email address">
                <Input
                  name="email"
                  type="email"
                  autoComplete="email"
                  placeholder="colleague@company.com"
                  required
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>
          <UsersRound size={15} aria-hidden="true" />
          Team members
        </span>
        <Badge variant="outline">
          {members.length} {members.length === 1 ? "member" : "members"}
        </Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-member-list">
        {members.map((member) => (
          <li key={member.id}>
            <Avatar name={member.name} size={36} />
            <div className="cr-workspace-person">
              <strong>{member.name}</strong>
              <span>{member.email}</span>
            </div>
            <Badge variant="outline">{member.role}</Badge>
            <Button
              variant="ghost"
              size="sm"
              className="cr-workspace-icon-button"
              disabled={Boolean(removing)}
              loading={removing === member.id}
              aria-label={`Remove ${member.name}`}
              onClick={async () => {
                setRemoving(member.id);
                setError(false);
                try {
                  await onRemove(member.id);
                } catch {
                  setError(true);
                } finally {
                  setRemoving(null);
                }
              }}
            >
              {removing !== member.id && (
                <Trash2 size={16} aria-hidden="true" />
              )}
            </Button>
          </li>
        ))}
      </ul>
      {!members.length && (
        <p className="cr-block-empty">
          No team members yet. Invite someone to get started.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to remove this member.
        </p>
      )}
    </Card>
  );
}

export function BillingBlock({
  plan,
  price,
  renewal,
  usage,
  limit,
  onManage,
  invoices,
}: {
  plan: string;
  price: string;
  renewal: string;
  usage: number;
  limit: number;
  onManage: () => void;
  invoices: Array<{ id: string; date: string; amount: string; href: string }>;
}) {
  const safeLimit = Number.isFinite(limit) && limit > 0 ? limit : 1;
  const safeUsage = Number.isFinite(usage)
    ? Math.max(0, Math.min(usage, safeLimit))
    : 0;
  return (
    <Card className="cr-workspace-block cr-workspace-billing">
      <WorkspaceHeading
        eyebrow="Subscription"
        title="Billing"
        description="Your plan, usage and invoices in one place."
        action={
          <span className="cr-workspace-icon-tile">
            <CreditCard size={20} aria-hidden="true" />
          </span>
        }
      />
      <div className="cr-workspace-plan">
        <div className="cr-workspace-plan-main">
          <Badge variant="outline">{plan} plan</Badge>
          <strong className="cr-workspace-plan-price">{price}</strong>
          <span className="cr-description">{renewal}</span>
        </div>
        <Button variant="outline" onClick={onManage}>
          Manage plan
          <ArrowUpRight size={16} aria-hidden="true" />
        </Button>
      </div>
      <div className="cr-workspace-usage">
        <div className="cr-workspace-list-heading">
          <span>Team seats</span>
          <span>
            {usage} <span className="cr-description">/ {limit} used</span>
          </span>
        </div>
        <Progress label="Seats used" value={safeUsage} max={safeLimit} />
      </div>
      <div className="cr-workspace-list-heading">
        <span>Invoice history</span>
        <Badge variant="outline">{invoices.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-invoice-list">
        {invoices.map((invoice) => (
          <li key={invoice.id}>
            <span className="cr-workspace-icon-tile">
              <FileText size={17} aria-hidden="true" />
            </span>
            <span>{invoice.date}</span>
            <strong>{invoice.amount}</strong>
            <a
              className="cr-link cr-workspace-invoice-link"
              href={invoice.href}
              aria-label={`View invoice dated ${invoice.date}`}
            >
              View
              <ArrowUpRight size={15} aria-hidden="true" />
            </a>
          </li>
        ))}
      </ul>
      {!invoices.length && (
        <p className="cr-block-empty">
          No invoices yet. They will appear here after your first payment.
        </p>
      )}
    </Card>
  );
}

export function ApiKeysBlock({
  keys,
  onCreate,
  onRevoke,
}: {
  keys: Array<{ id: string; name: string; prefix: string; created: string }>;
  onCreate: FormAction;
  onRevoke: (id: string) => void | Promise<void>;
}) {
  const [error, setError] = useState(false),
    [busy, setBusy] = useState<string | null>(null);
  return (
    <Card className="cr-workspace-block cr-workspace-keys">
      <WorkspaceHeading
        eyebrow="Developer settings"
        title="API keys"
        description="Connect your tools to your workspace."
        action={
          <Dialog
            trigger={
              <>
                <Plus size={16} aria-hidden="true" />
                Create key
              </>
            }
            title="Create an API key"
            description="Give this key a name that helps you recognize its integration."
            footer={null}
          >
            <ActionForm
              onSubmit={onCreate}
              submitLabel="Create key"
              successMessage="Key created. Follow your application’s secure delivery flow."
            >
              <Field label="Key name">
                <Input
                  name="name"
                  required
                  placeholder="Production integration"
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-security-note">
        <ShieldCheck size={17} aria-hidden="true" />
        <span>
          Use keys on your server. Keep them out of public repositories and
          client-side code.
        </span>
      </div>
      <div className="cr-workspace-list-heading">
        <span>Secret keys</span>
        <Badge variant="outline">{keys.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-key-list">
        {keys.map((key) => (
          <li key={key.id}>
            <span className="cr-workspace-icon-tile">
              <KeyRound size={18} aria-hidden="true" />
            </span>
            <div className="cr-workspace-person">
              <strong>{key.name}</strong>
              <span>
                <code>{key.prefix}••••</code>
                <span className="cr-workspace-key-date">
                  Created {key.created}
                </span>
              </span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              disabled={Boolean(busy)}
              loading={busy === key.id}
              aria-label={`Revoke ${key.name}`}
              onClick={async () => {
                setBusy(key.id);
                setError(false);
                try {
                  await onRevoke(key.id);
                } catch {
                  setError(true);
                } finally {
                  setBusy(null);
                }
              }}
            >
              Revoke
            </Button>
          </li>
        ))}
      </ul>
      {!keys.length && (
        <p className="cr-block-empty">
          No API keys yet. Create a key to connect an integration.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to revoke this key.
        </p>
      )}
    </Card>
  );
}

export function NotificationsBlock({
  items,
  onReadAll,
  onOpen,
}: {
  items: Array<{
    id: string;
    title: string;
    description: string;
    time: string;
    unread: boolean;
  }>;
  onReadAll: () => void;
  onOpen: (id: string) => void;
}) {
  const unread = items.filter((item) => item.unread).length;
  return (
    <Card className="cr-workspace-block cr-workspace-notifications">
      <WorkspaceHeading
        eyebrow="Your inbox"
        title="Notifications"
        description="The latest from your team and workspace."
        action={
          <Button
            variant="ghost"
            size="sm"
            onClick={onReadAll}
            disabled={!unread}
          >
            <CheckCheck size={16} aria-hidden="true" />
            Mark all read
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>Recent activity</span>
        <Badge variant={unread ? "primary" : "outline"}>{unread} unread</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-notification-list">
        {items.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-notification"
              data-unread={item.unread || undefined}
              onClick={() => onOpen(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                {item.unread ? (
                  <Bell size={18} aria-hidden="true" />
                ) : (
                  <CheckCheck size={18} aria-hidden="true" />
                )}
              </span>
              <span className="cr-workspace-notification-copy">
                <strong>
                  {item.title}
                  {item.unread && (
                    <>
                      <span aria-hidden="true" className="cr-unread-dot" />
                      <span className="cr-sr-only">Unread</span>
                    </>
                  )}
                </strong>
                <span className="cr-description">{item.description}</span>
                <small>{item.time}</small>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!items.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <CheckCheck size={22} aria-hidden="true" />
          </span>
          <strong>You’re all caught up.</strong>
          <p>New updates will appear here.</p>
        </div>
      )}
    </Card>
  );
}
```


---

# blocks/otp

---
title: "OTP"
description: "A one-time-code form with numeric validation."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/otp

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { OtpBlock } from './components/blocks/auth';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Button](/docs/components/button), [Card](/docs/components/card), [Field](/docs/components/field), [Input](/docs/components/input), [Input Group](/docs/components/input-group), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useId, useState, type CSSProperties, type ReactNode } from "react";
import {
  ArrowLeft,
  ArrowRight,
  Eye,
  EyeOff,
  KeyRound,
  LockKeyhole,
  Mail,
  ShieldCheck,
  UserRound,
} from "lucide-react";
import { Button, Card, Field, Input, InputGroup } from '../ui';
import { ActionForm, type FormAction } from "./common";

function AuthFrame({
  title,
  description,
  eyebrow,
  icon,
  footer,
  children,
}: {
  title: string;
  description: string;
  eyebrow: string;
  icon: ReactNode;
  footer?: ReactNode;
  children: ReactNode;
}) {
  const titleId = useId();
  return (
    <div className="cr-block-form cr-auth-shell">
      <Card className="cr-auth-card" aria-labelledby={titleId} footer={footer}>
        <header className="cr-auth-header">
          <div className="cr-auth-intro">
            <span className="cr-auth-symbol" aria-hidden="true">
              {icon}
            </span>
            <span className="cr-auth-eyebrow">{eyebrow}</span>
          </div>
          <h2 id={titleId} className="cr-auth-title">
            {title}
          </h2>
          <p className="cr-auth-description">{description}</p>
        </header>
        {children}
      </Card>
    </div>
  );
}

function PasswordInput({
  name,
  autoComplete,
  minLength,
  placeholder = "Enter your password",
}: {
  name: string;
  autoComplete: "current-password" | "new-password";
  minLength?: number;
  placeholder?: string;
}) {
  const [visible, setVisible] = useState(false);
  return (
    <InputGroup
      name={name}
      type={visible ? "text" : "password"}
      autoComplete={autoComplete}
      minLength={minLength}
      required
      placeholder={placeholder}
      leading={<LockKeyhole size={16} aria-hidden="true" />}
      trailing={
        <Button
          type="button"
          variant="ghost"
          className="cr-auth-password-toggle"
          aria-label={visible ? "Hide password" : "Show password"}
          aria-pressed={visible}
          onClick={() => setVisible(!visible)}
        >
          {visible ? (
            <EyeOff size={16} aria-hidden="true" />
          ) : (
            <Eye size={16} aria-hidden="true" />
          )}
        </Button>
      }
    />
  );
}

export function LoginBlock({
  onSubmit,
  signupHref,
  forgotHref,
}: {
  onSubmit: FormAction;
  signupHref: string;
  forgotHref: string;
}) {
  return (
    <AuthFrame
      title="Welcome back."
      description="Sign in to your workspace and pick up where you left off."
      eyebrow="Your workspace"
      icon={<LockKeyhole size={24} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          New here?{" "}
          <a className="cr-auth-link" href={signupHref}>
            Create an account <ArrowRight size={14} aria-hidden="true" />
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Sign in"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Signed in."
      >
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Password">
          <PasswordInput name="password" autoComplete="current-password" />
        </Field>
        <div className="cr-auth-assistance">
          <a className="cr-auth-link" href={forgotHref}>
            Forgot password?
          </a>
        </div>
      </ActionForm>
    </AuthFrame>
  );
}

export function SignupBlock({
  onSubmit,
  loginHref,
}: {
  onSubmit: FormAction;
  loginHref: string;
}) {
  return (
    <AuthFrame
      title="Make room for what’s next."
      description="Create your account. A fresh workspace starts here."
      eyebrow="A new beginning"
      icon={<UserRound size={23} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          Already have an account?{" "}
          <a className="cr-auth-link" href={loginHref}>
            Sign in <ArrowRight size={14} aria-hidden="true" />
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Create account"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Check your inbox to confirm your email address."
      >
        <Field label="Full name">
          <InputGroup
            name="name"
            autoComplete="name"
            required
            placeholder="Your full name"
            leading={<UserRound size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Password" description="Use at least 12 characters.">
          <PasswordInput
            name="password"
            autoComplete="new-password"
            minLength={12}
            placeholder="Create a password"
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function ForgotPasswordBlock({
  onSubmit,
  loginHref,
}: {
  onSubmit: FormAction;
  loginHref: string;
}) {
  return (
    <AuthFrame
      title="Let’s get you back in."
      description="Enter your account’s email address. We’ll send you a link to choose a new password."
      eyebrow="Account recovery"
      icon={<KeyRound size={24} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          <a className="cr-auth-link" href={loginHref}>
            <ArrowLeft size={14} aria-hidden="true" /> Back to sign in
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Send reset link"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="If this address has an account, a reset link is on its way."
      >
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function ResetPasswordBlock({ onSubmit }: { onSubmit: FormAction }) {
  return (
    <AuthFrame
      title="A fresh start."
      description="Choose a new password to get back to your workspace."
      eyebrow="Reset password"
      icon={<ShieldCheck size={24} strokeWidth={1.75} />}
    >
      <ActionForm
        onSubmit={onSubmit}
        validate={(data) =>
          data.get("password") !== data.get("confirmation")
            ? "Passwords do not match. Enter the same password in both fields."
            : undefined
        }
        submitLabel="Update password"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Your password has been updated."
      >
        <Field label="New password" description="Use at least 12 characters.">
          <PasswordInput
            name="password"
            autoComplete="new-password"
            minLength={12}
            placeholder="Create a new password"
          />
        </Field>
        <Field label="Confirm password">
          <PasswordInput
            name="confirmation"
            autoComplete="new-password"
            minLength={12}
            placeholder="Enter it one more time"
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function OtpBlock({
  onSubmit,
  length = 6,
}: {
  onSubmit: FormAction;
  length?: number;
}) {
  const size = Number.isFinite(length)
    ? Math.max(4, Math.min(10, Math.floor(length)))
    : 6;
  return (
    <AuthFrame
      title="Check your inbox."
      description={`Enter the ${size}-digit verification code from your email to continue.`}
      eyebrow="One more step"
      icon={<Mail size={24} strokeWidth={1.75} />}
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Verify code"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Code verified."
      >
        <Field
          label="Verification code"
          description="You can paste the entire code into this field."
        >
          <Input
            name="code"
            inputMode="numeric"
            autoComplete="one-time-code"
            minLength={size}
            maxLength={size}
            pattern={`[0-9]{${size}}`}
            required
            className="cr-otp"
            placeholder={"0".repeat(size)}
            style={{ "--cr-otp-length": size } as CSSProperties}
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}
```


---

# blocks/pricing

---
title: "Pricing"
description: "Comparable plans, features and purchase links."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/pricing

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { PricingBlock } from './components/blocks/marketing';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Accordion](/docs/components/accordion), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Card](/docs/components/card).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import type { ReactNode } from "react";
import {
  ArrowRight,
  ArrowUpRight,
  Check,
  Layers3,
  Quote,
  SlidersHorizontal,
  Workflow,
} from "lucide-react";
import { Accordion, Avatar, Badge, Card } from '../ui';

function MarketingHeading({
  title,
  description,
  eyebrow,
}: {
  title: string;
  description?: string;
  eyebrow?: string;
}) {
  return (
    <header className="cr-marketing-heading">
      <div>
        {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
        <h2>{title}</h2>
      </div>
      {description && <p className="cr-description">{description}</p>}
    </header>
  );
}

export function HeroBlock({
  eyebrow,
  title,
  description,
  primary,
  secondary,
  children,
}: {
  eyebrow: string;
  title: string;
  description: string;
  primary: { label: string; href: string };
  secondary?: { label: string; href: string };
  children?: ReactNode;
}) {
  return (
    <section className="cr-hero cr-marketing-hero">
      <div className="cr-hero-decoration" aria-hidden="true">
        <span>
          <Layers3 strokeWidth={1.75} />
        </span>
        <span>
          <SlidersHorizontal strokeWidth={1.75} />
        </span>
        <span>
          <Workflow strokeWidth={1.75} />
        </span>
      </div>
      <div className="cr-hero-content">
        <Badge variant="outline">
          {eyebrow}
          <ArrowUpRight size={13} strokeWidth={1.75} aria-hidden="true" />
        </Badge>
        <h1>{title}</h1>
        <p className="cr-description">{description}</p>
        <div className="cr-hero-actions">
          <a className="cr-button" href={primary.href}>
            {primary.label}
            <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
          </a>
          {secondary && (
            <a className="cr-button" data-variant="ghost" href={secondary.href}>
              {secondary.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
      </div>
      {children && <div className="cr-hero-media">{children}</div>}
    </section>
  );
}

export function FeaturesBlock({
  title,
  description,
  eyebrow,
  items,
}: {
  title: string;
  description: string;
  eyebrow?: string;
  items: Array<{
    title: string;
    description: string;
    icon?: ReactNode;
    visual?: ReactNode;
    eyebrow?: string;
    href?: string;
    linkLabel?: string;
  }>;
}) {
  const fallbackIcons = [Layers3, Workflow, SlidersHorizontal];
  return (
    <section className="cr-marketing-section cr-features-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-features-grid">
        {items.map((item, index) => {
          const Icon = fallbackIcons[index % fallbackIcons.length];
          return (
            <Card
              key={item.title}
              className="cr-feature-card"
              data-featured={(index === 0 && items.length >= 3) || undefined}
              data-has-visual={Boolean(item.visual) || undefined}
            >
              <div className="cr-feature-copy">
                <div className="cr-feature-topline">
                  <span aria-hidden="true" className="cr-feature-icon">
                    {item.icon ?? <Icon size={22} strokeWidth={1.75} />}
                  </span>
                  <span className="cr-feature-index" aria-hidden="true">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                </div>
                {item.eyebrow && (
                  <p className="cr-marketing-eyebrow">{item.eyebrow}</p>
                )}
                <h3>{item.title}</h3>
                <p className="cr-description">{item.description}</p>
                {item.href && (
                  <a className="cr-feature-link" href={item.href}>
                    {item.linkLabel ?? "Explore feature"}
                    <ArrowUpRight
                      size={16}
                      strokeWidth={1.75}
                      aria-hidden="true"
                    />
                  </a>
                )}
              </div>
              {item.visual && (
                <div className="cr-feature-visual">{item.visual}</div>
              )}
            </Card>
          );
        })}
      </div>
    </section>
  );
}

export function PricingBlock({
  title,
  plans,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  plans: Array<{
    name: string;
    price: string;
    period: string;
    description: string;
    features: string[];
    href: string;
    action: string;
    featured?: boolean;
  }>;
}) {
  return (
    <section className="cr-marketing-section cr-pricing-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-pricing-grid">
        {plans.map((plan) => (
          <Card
            key={plan.name}
            className="cr-pricing-card"
            data-featured={plan.featured || undefined}
          >
            <div className="cr-plan-heading">
              <h3>{plan.name}</h3>
              <div
                className="cr-price-recommendation"
                aria-hidden={!plan.featured || undefined}
              >
                {plan.featured && <Badge variant="primary">Recommended</Badge>}
              </div>
            </div>
            <p className="cr-plan-description cr-description">
              {plan.description}
            </p>
            <p className="cr-price">
              {plan.price}
              <small>{plan.period}</small>
            </p>
            <ul className="cr-price-features">
              {plan.features.map((feature) => (
                <li key={feature}>
                  <Check size={17} strokeWidth={1.75} aria-hidden="true" />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
            <a
              className="cr-button"
              data-variant={plan.featured ? "primary" : "outline"}
              href={plan.href}
            >
              {plan.action}
              <ArrowRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function TestimonialsBlock({
  title,
  quotes,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  quotes: Array<{ quote: string; name: string; role: string; avatar?: string }>;
}) {
  return (
    <section className="cr-marketing-section cr-testimonials-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-testimonials-grid">
        {quotes.map((quote, index) => (
          <Card
            key={quote.name}
            className="cr-testimonial-card"
            data-featured={index === 0 || undefined}
          >
            <figure className="cr-testimonial-figure">
              <Quote
                className="cr-quote-icon"
                size={26}
                strokeWidth={1.75}
                aria-hidden="true"
              />
              <blockquote className="cr-quote">
                <p>{quote.quote}</p>
              </blockquote>
              <figcaption className="cr-quote-author">
                <Avatar name={quote.name} src={quote.avatar} size={40} />
                <div>
                  <cite>{quote.name}</cite>
                  <p className="cr-description">{quote.role}</p>
                </div>
              </figcaption>
            </figure>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function FaqBlock({
  title,
  items,
  eyebrow,
  description,
  contact,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  contact?: { label: string; href: string };
  items: Array<{ question: string; answer: ReactNode }>;
}) {
  return (
    <section className="cr-marketing-section cr-faq-section">
      <div className="cr-faq-layout">
        <div className="cr-faq-intro">
          <MarketingHeading
            title={title}
            description={description}
            eyebrow={eyebrow}
          />
          {contact && (
            <a className="cr-feature-link" href={contact.href}>
              {contact.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
        <div className="cr-faq-content">
          <Accordion
            items={items.map((item, index) => ({
              value: String(index),
              title: item.question,
              content: item.answer,
            }))}
          />
        </div>
      </div>
    </section>
  );
}

export function CtaBlock({
  title,
  description,
  action,
  eyebrow,
  secondary,
}: {
  title: string;
  description: string;
  action: { label: string; href: string };
  eyebrow?: string;
  secondary?: { label: string; href: string };
}) {
  return (
    <Card className="cr-cta-card">
      <div className="cr-cta">
        <div className="cr-cta-content">
          {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
          <h2>{title}</h2>
          <p className="cr-description">{description}</p>
          <div className="cr-cta-actions">
            <a className="cr-button" href={action.href}>
              {action.label}
              <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
            </a>
            {secondary && (
              <a className="cr-feature-link" href={secondary.href}>
                {secondary.label}
                <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
              </a>
            )}
          </div>
        </div>
        <div className="cr-cta-emblem" aria-hidden="true">
          <ArrowUpRight strokeWidth={1.75} />
        </div>
      </div>
    </Card>
  );
}

export function FooterBlock({
  brand,
  description,
  groups,
  copyright,
  logo,
  brandHref,
  legalLinks,
}: {
  brand: string;
  description: string;
  groups: Array<{
    title: string;
    links: Array<{ label: string; href: string }>;
  }>;
  copyright: string;
  logo?: ReactNode;
  brandHref?: string;
  legalLinks?: Array<{ label: string; href: string }>;
}) {
  const identity = (
    <>
      {logo && (
        <span className="cr-footer-logo" aria-hidden="true">
          {logo}
        </span>
      )}
      <strong>{brand}</strong>
    </>
  );
  return (
    <footer className="cr-footer">
      <div className="cr-footer-main">
        <div className="cr-footer-brand">
          {brandHref ? (
            <a className="cr-footer-identity" href={brandHref}>
              {identity}
            </a>
          ) : (
            <div className="cr-footer-identity">{identity}</div>
          )}
          <p className="cr-description">{description}</p>
        </div>
        <div className="cr-footer-navigation">
          {groups.map((group) => (
            <nav key={group.title} aria-label={group.title}>
              <strong>{group.title}</strong>
              {group.links.map((link) => (
                <a key={link.href} href={link.href}>
                  {link.label}
                </a>
              ))}
            </nav>
          ))}
        </div>
      </div>
      <div className="cr-footer-bottom">
        <p className="cr-description">{copyright}</p>
        {legalLinks?.length ? (
          <nav aria-label="Legal">
            {legalLinks.map((link) => (
              <a href={link.href} key={link.href}>
                {link.label}
              </a>
            ))}
          </nav>
        ) : null}
      </div>
    </footer>
  );
}
```


---

# blocks/profile

---
title: "Profile"
description: "Editable profile details and identity."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/profile

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { ProfileBlock } from './components/blocks/application';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Sidebar](/docs/components/sidebar), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Breadcrumb](/docs/components/breadcrumb), [Button](/docs/components/button), [Card](/docs/components/card), [Dialog](/docs/components/dialog), [Dropdown](/docs/components/dropdown), [Field](/docs/components/field), [Input](/docs/components/input), [Progress](/docs/components/progress), [Switch](/docs/components/switch), [Tabs](/docs/components/tabs), [Textarea](/docs/components/textarea), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowUpRight,
  Bell,
  Building2,
  CheckCheck,
  ChevronRight,
  CreditCard,
  FileText,
  KeyRound,
  Layers2,
  LayoutGrid,
  Plus,
  Search,
  ShieldCheck,
  Trash2,
  UserRound,
  UserRoundPlus,
  UsersRound,
} from "lucide-react";
import {
  Sidebar,
  Avatar,
  Badge,
  Breadcrumb,
  Button,
  Card,
  Dialog,
  Dropdown,
  Field,
  Input,
  Progress,
  Switch,
  Tabs,
  Textarea,
} from '../ui';
import { ActionForm, type FormAction } from "./common";

function WorkspaceHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function AppSidebarBlock({
  workspace,
  items,
  accountName,
}: {
  workspace: string;
  items: ComponentProps<typeof Sidebar>["items"];
  accountName: string;
}) {
  return (
    <div className="cr-app-sidebar-block">
      <Sidebar
        brand={
          <span className="cr-workspace-brand">
            <span className="cr-workspace-brand-icon">
              <Layers2 size={19} aria-hidden="true" />
            </span>
            <span>
              <strong>{workspace}</strong>
              <small>Workspace</small>
            </span>
          </span>
        }
        items={items.map((item) => ({
          ...item,
          icon: item.icon ?? <LayoutGrid size={18} aria-hidden="true" />,
        }))}
        footer={
          <div className="cr-workspace-account">
            <Avatar name={accountName} size={34} />
            <span>
              <strong>{accountName}</strong>
              <small>Account</small>
            </span>
          </div>
        }
      />
    </div>
  );
}

export function AppHeaderBlock({
  breadcrumbs,
  accountName,
  onSearch,
  onSignOut,
}: {
  breadcrumbs: ComponentProps<typeof Breadcrumb>["items"];
  accountName: string;
  onSearch: () => void;
  onSignOut: () => void;
}) {
  return (
    <header className="cr-block-header cr-workspace-header">
      <div className="cr-workspace-header-location">
        <span className="cr-workspace-header-icon">
          <Layers2 size={18} aria-hidden="true" />
        </span>
        <Breadcrumb items={breadcrumbs} />
      </div>
      <div className="cr-workspace-header-actions">
        <Button variant="ghost" onClick={onSearch}>
          <Search size={17} aria-hidden="true" />
          <span>Search</span>
        </Button>
        <span className="cr-workspace-header-divider" aria-hidden="true" />
        <Dropdown
          trigger={
            <>
              <Avatar name={accountName} size={28} />
              <span className="cr-workspace-header-name">{accountName}</span>
              <span className="cr-sr-only">Account menu</span>
            </>
          }
          items={[{ label: "Sign out", onSelect: onSignOut }]}
        />
      </div>
    </header>
  );
}

export function ProfileBlock({
  name,
  email,
  bio = "",
  onSave,
}: {
  name: string;
  email: string;
  bio?: string;
  onSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-profile">
      <WorkspaceHeading
        eyebrow="Account"
        title="Your profile"
        description="The details your team sees when you work together."
      />
      <div className="cr-workspace-identity">
        <Avatar name={name} size={58} />
        <div>
          <strong>{name}</strong>
          <span>{email}</span>
        </div>
        <span className="cr-workspace-icon-tile">
          <UserRound size={20} aria-hidden="true" />
        </span>
      </div>
      <ActionForm onSubmit={onSave}>
        <div className="cr-workspace-form-grid">
          <Field label="Display name">
            <Input
              name="name"
              defaultValue={name}
              autoComplete="name"
              required
            />
          </Field>
          <Field label="Email address">
            <Input
              name="email"
              type="email"
              defaultValue={email}
              autoComplete="email"
              required
            />
          </Field>
        </div>
        <Field label="About you">
          <Textarea
            name="bio"
            defaultValue={bio}
            placeholder="A few words about you and your work."
          />
        </Field>
      </ActionForm>
    </Card>
  );
}

export function SettingsBlock({
  workspaceName,
  onSave,
  onNotificationSave,
}: {
  workspaceName: string;
  onSave: FormAction;
  onNotificationSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-settings">
      <WorkspaceHeading
        eyebrow="Workspace"
        title="Settings"
        description="A few details that make this space yours."
        action={
          <span className="cr-workspace-icon-tile">
            <Building2 size={20} aria-hidden="true" />
          </span>
        }
      />
      <Tabs
        label="Settings sections"
        items={[
          {
            value: "general",
            label: "General",
            content: (
              <ActionForm onSubmit={onSave}>
                <Field label="Workspace name">
                  <Input
                    name="workspace"
                    defaultValue={workspaceName}
                    required
                  />
                </Field>
                <Field label="Description">
                  <Textarea
                    name="description"
                    placeholder="What are you building?"
                  />
                </Field>
              </ActionForm>
            ),
          },
          {
            value: "notifications",
            label: "Notifications",
            content: (
              <ActionForm onSubmit={onNotificationSave}>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <FileText size={18} aria-hidden="true" />
                    </span>
                    <p>A summary of what happened across your workspace.</p>
                  </div>
                  <Switch name="digest" label="Weekly digest" defaultChecked />
                </div>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <Bell size={18} aria-hidden="true" />
                    </span>
                    <p>Stay in the loop when someone needs your attention.</p>
                  </div>
                  <Switch
                    name="mentions"
                    label="Mention notifications"
                    defaultChecked
                  />
                </div>
              </ActionForm>
            ),
          },
        ]}
      />
    </Card>
  );
}

export interface TeamMember {
  id: string;
  name: string;
  email: string;
  role: string;
}
export function TeamBlock({
  members,
  onInvite,
  onRemove,
}: {
  members: TeamMember[];
  onInvite: FormAction;
  onRemove: (id: string) => void | Promise<void>;
}) {
  const [removing, setRemoving] = useState<string | null>(null),
    [error, setError] = useState(false);
  return (
    <Card className="cr-workspace-block cr-workspace-team">
      <WorkspaceHeading
        eyebrow="People & access"
        title="Your team"
        description="Good work starts with the right people."
        action={
          <Dialog
            trigger={
              <>
                <UserRoundPlus size={16} aria-hidden="true" />
                Invite member
              </>
            }
            title="Invite someone to your team"
            description="Enter the email address of the person you’d like to invite."
            footer={null}
          >
            <ActionForm
              onSubmit={onInvite}
              submitLabel="Send invitation"
              successMessage="Invitation sent."
            >
              <Field label="Email address">
                <Input
                  name="email"
                  type="email"
                  autoComplete="email"
                  placeholder="colleague@company.com"
                  required
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>
          <UsersRound size={15} aria-hidden="true" />
          Team members
        </span>
        <Badge variant="outline">
          {members.length} {members.length === 1 ? "member" : "members"}
        </Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-member-list">
        {members.map((member) => (
          <li key={member.id}>
            <Avatar name={member.name} size={36} />
            <div className="cr-workspace-person">
              <strong>{member.name}</strong>
              <span>{member.email}</span>
            </div>
            <Badge variant="outline">{member.role}</Badge>
            <Button
              variant="ghost"
              size="sm"
              className="cr-workspace-icon-button"
              disabled={Boolean(removing)}
              loading={removing === member.id}
              aria-label={`Remove ${member.name}`}
              onClick={async () => {
                setRemoving(member.id);
                setError(false);
                try {
                  await onRemove(member.id);
                } catch {
                  setError(true);
                } finally {
                  setRemoving(null);
                }
              }}
            >
              {removing !== member.id && (
                <Trash2 size={16} aria-hidden="true" />
              )}
            </Button>
          </li>
        ))}
      </ul>
      {!members.length && (
        <p className="cr-block-empty">
          No team members yet. Invite someone to get started.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to remove this member.
        </p>
      )}
    </Card>
  );
}

export function BillingBlock({
  plan,
  price,
  renewal,
  usage,
  limit,
  onManage,
  invoices,
}: {
  plan: string;
  price: string;
  renewal: string;
  usage: number;
  limit: number;
  onManage: () => void;
  invoices: Array<{ id: string; date: string; amount: string; href: string }>;
}) {
  const safeLimit = Number.isFinite(limit) && limit > 0 ? limit : 1;
  const safeUsage = Number.isFinite(usage)
    ? Math.max(0, Math.min(usage, safeLimit))
    : 0;
  return (
    <Card className="cr-workspace-block cr-workspace-billing">
      <WorkspaceHeading
        eyebrow="Subscription"
        title="Billing"
        description="Your plan, usage and invoices in one place."
        action={
          <span className="cr-workspace-icon-tile">
            <CreditCard size={20} aria-hidden="true" />
          </span>
        }
      />
      <div className="cr-workspace-plan">
        <div className="cr-workspace-plan-main">
          <Badge variant="outline">{plan} plan</Badge>
          <strong className="cr-workspace-plan-price">{price}</strong>
          <span className="cr-description">{renewal}</span>
        </div>
        <Button variant="outline" onClick={onManage}>
          Manage plan
          <ArrowUpRight size={16} aria-hidden="true" />
        </Button>
      </div>
      <div className="cr-workspace-usage">
        <div className="cr-workspace-list-heading">
          <span>Team seats</span>
          <span>
            {usage} <span className="cr-description">/ {limit} used</span>
          </span>
        </div>
        <Progress label="Seats used" value={safeUsage} max={safeLimit} />
      </div>
      <div className="cr-workspace-list-heading">
        <span>Invoice history</span>
        <Badge variant="outline">{invoices.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-invoice-list">
        {invoices.map((invoice) => (
          <li key={invoice.id}>
            <span className="cr-workspace-icon-tile">
              <FileText size={17} aria-hidden="true" />
            </span>
            <span>{invoice.date}</span>
            <strong>{invoice.amount}</strong>
            <a
              className="cr-link cr-workspace-invoice-link"
              href={invoice.href}
              aria-label={`View invoice dated ${invoice.date}`}
            >
              View
              <ArrowUpRight size={15} aria-hidden="true" />
            </a>
          </li>
        ))}
      </ul>
      {!invoices.length && (
        <p className="cr-block-empty">
          No invoices yet. They will appear here after your first payment.
        </p>
      )}
    </Card>
  );
}

export function ApiKeysBlock({
  keys,
  onCreate,
  onRevoke,
}: {
  keys: Array<{ id: string; name: string; prefix: string; created: string }>;
  onCreate: FormAction;
  onRevoke: (id: string) => void | Promise<void>;
}) {
  const [error, setError] = useState(false),
    [busy, setBusy] = useState<string | null>(null);
  return (
    <Card className="cr-workspace-block cr-workspace-keys">
      <WorkspaceHeading
        eyebrow="Developer settings"
        title="API keys"
        description="Connect your tools to your workspace."
        action={
          <Dialog
            trigger={
              <>
                <Plus size={16} aria-hidden="true" />
                Create key
              </>
            }
            title="Create an API key"
            description="Give this key a name that helps you recognize its integration."
            footer={null}
          >
            <ActionForm
              onSubmit={onCreate}
              submitLabel="Create key"
              successMessage="Key created. Follow your application’s secure delivery flow."
            >
              <Field label="Key name">
                <Input
                  name="name"
                  required
                  placeholder="Production integration"
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-security-note">
        <ShieldCheck size={17} aria-hidden="true" />
        <span>
          Use keys on your server. Keep them out of public repositories and
          client-side code.
        </span>
      </div>
      <div className="cr-workspace-list-heading">
        <span>Secret keys</span>
        <Badge variant="outline">{keys.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-key-list">
        {keys.map((key) => (
          <li key={key.id}>
            <span className="cr-workspace-icon-tile">
              <KeyRound size={18} aria-hidden="true" />
            </span>
            <div className="cr-workspace-person">
              <strong>{key.name}</strong>
              <span>
                <code>{key.prefix}••••</code>
                <span className="cr-workspace-key-date">
                  Created {key.created}
                </span>
              </span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              disabled={Boolean(busy)}
              loading={busy === key.id}
              aria-label={`Revoke ${key.name}`}
              onClick={async () => {
                setBusy(key.id);
                setError(false);
                try {
                  await onRevoke(key.id);
                } catch {
                  setError(true);
                } finally {
                  setBusy(null);
                }
              }}
            >
              Revoke
            </Button>
          </li>
        ))}
      </ul>
      {!keys.length && (
        <p className="cr-block-empty">
          No API keys yet. Create a key to connect an integration.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to revoke this key.
        </p>
      )}
    </Card>
  );
}

export function NotificationsBlock({
  items,
  onReadAll,
  onOpen,
}: {
  items: Array<{
    id: string;
    title: string;
    description: string;
    time: string;
    unread: boolean;
  }>;
  onReadAll: () => void;
  onOpen: (id: string) => void;
}) {
  const unread = items.filter((item) => item.unread).length;
  return (
    <Card className="cr-workspace-block cr-workspace-notifications">
      <WorkspaceHeading
        eyebrow="Your inbox"
        title="Notifications"
        description="The latest from your team and workspace."
        action={
          <Button
            variant="ghost"
            size="sm"
            onClick={onReadAll}
            disabled={!unread}
          >
            <CheckCheck size={16} aria-hidden="true" />
            Mark all read
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>Recent activity</span>
        <Badge variant={unread ? "primary" : "outline"}>{unread} unread</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-notification-list">
        {items.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-notification"
              data-unread={item.unread || undefined}
              onClick={() => onOpen(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                {item.unread ? (
                  <Bell size={18} aria-hidden="true" />
                ) : (
                  <CheckCheck size={18} aria-hidden="true" />
                )}
              </span>
              <span className="cr-workspace-notification-copy">
                <strong>
                  {item.title}
                  {item.unread && (
                    <>
                      <span aria-hidden="true" className="cr-unread-dot" />
                      <span className="cr-sr-only">Unread</span>
                    </>
                  )}
                </strong>
                <span className="cr-description">{item.description}</span>
                <small>{item.time}</small>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!items.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <CheckCheck size={22} aria-hidden="true" />
          </span>
          <strong>You’re all caught up.</strong>
          <p>New updates will appear here.</p>
        </div>
      )}
    </Card>
  );
}
```


---

# blocks/reset-password

---
title: "Reset Password"
description: "A password reset form with matching confirmation."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/reset-password

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { ResetPasswordBlock } from './components/blocks/auth';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Button](/docs/components/button), [Card](/docs/components/card), [Field](/docs/components/field), [Input](/docs/components/input), [Input Group](/docs/components/input-group), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useId, useState, type CSSProperties, type ReactNode } from "react";
import {
  ArrowLeft,
  ArrowRight,
  Eye,
  EyeOff,
  KeyRound,
  LockKeyhole,
  Mail,
  ShieldCheck,
  UserRound,
} from "lucide-react";
import { Button, Card, Field, Input, InputGroup } from '../ui';
import { ActionForm, type FormAction } from "./common";

function AuthFrame({
  title,
  description,
  eyebrow,
  icon,
  footer,
  children,
}: {
  title: string;
  description: string;
  eyebrow: string;
  icon: ReactNode;
  footer?: ReactNode;
  children: ReactNode;
}) {
  const titleId = useId();
  return (
    <div className="cr-block-form cr-auth-shell">
      <Card className="cr-auth-card" aria-labelledby={titleId} footer={footer}>
        <header className="cr-auth-header">
          <div className="cr-auth-intro">
            <span className="cr-auth-symbol" aria-hidden="true">
              {icon}
            </span>
            <span className="cr-auth-eyebrow">{eyebrow}</span>
          </div>
          <h2 id={titleId} className="cr-auth-title">
            {title}
          </h2>
          <p className="cr-auth-description">{description}</p>
        </header>
        {children}
      </Card>
    </div>
  );
}

function PasswordInput({
  name,
  autoComplete,
  minLength,
  placeholder = "Enter your password",
}: {
  name: string;
  autoComplete: "current-password" | "new-password";
  minLength?: number;
  placeholder?: string;
}) {
  const [visible, setVisible] = useState(false);
  return (
    <InputGroup
      name={name}
      type={visible ? "text" : "password"}
      autoComplete={autoComplete}
      minLength={minLength}
      required
      placeholder={placeholder}
      leading={<LockKeyhole size={16} aria-hidden="true" />}
      trailing={
        <Button
          type="button"
          variant="ghost"
          className="cr-auth-password-toggle"
          aria-label={visible ? "Hide password" : "Show password"}
          aria-pressed={visible}
          onClick={() => setVisible(!visible)}
        >
          {visible ? (
            <EyeOff size={16} aria-hidden="true" />
          ) : (
            <Eye size={16} aria-hidden="true" />
          )}
        </Button>
      }
    />
  );
}

export function LoginBlock({
  onSubmit,
  signupHref,
  forgotHref,
}: {
  onSubmit: FormAction;
  signupHref: string;
  forgotHref: string;
}) {
  return (
    <AuthFrame
      title="Welcome back."
      description="Sign in to your workspace and pick up where you left off."
      eyebrow="Your workspace"
      icon={<LockKeyhole size={24} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          New here?{" "}
          <a className="cr-auth-link" href={signupHref}>
            Create an account <ArrowRight size={14} aria-hidden="true" />
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Sign in"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Signed in."
      >
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Password">
          <PasswordInput name="password" autoComplete="current-password" />
        </Field>
        <div className="cr-auth-assistance">
          <a className="cr-auth-link" href={forgotHref}>
            Forgot password?
          </a>
        </div>
      </ActionForm>
    </AuthFrame>
  );
}

export function SignupBlock({
  onSubmit,
  loginHref,
}: {
  onSubmit: FormAction;
  loginHref: string;
}) {
  return (
    <AuthFrame
      title="Make room for what’s next."
      description="Create your account. A fresh workspace starts here."
      eyebrow="A new beginning"
      icon={<UserRound size={23} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          Already have an account?{" "}
          <a className="cr-auth-link" href={loginHref}>
            Sign in <ArrowRight size={14} aria-hidden="true" />
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Create account"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Check your inbox to confirm your email address."
      >
        <Field label="Full name">
          <InputGroup
            name="name"
            autoComplete="name"
            required
            placeholder="Your full name"
            leading={<UserRound size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Password" description="Use at least 12 characters.">
          <PasswordInput
            name="password"
            autoComplete="new-password"
            minLength={12}
            placeholder="Create a password"
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function ForgotPasswordBlock({
  onSubmit,
  loginHref,
}: {
  onSubmit: FormAction;
  loginHref: string;
}) {
  return (
    <AuthFrame
      title="Let’s get you back in."
      description="Enter your account’s email address. We’ll send you a link to choose a new password."
      eyebrow="Account recovery"
      icon={<KeyRound size={24} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          <a className="cr-auth-link" href={loginHref}>
            <ArrowLeft size={14} aria-hidden="true" /> Back to sign in
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Send reset link"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="If this address has an account, a reset link is on its way."
      >
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function ResetPasswordBlock({ onSubmit }: { onSubmit: FormAction }) {
  return (
    <AuthFrame
      title="A fresh start."
      description="Choose a new password to get back to your workspace."
      eyebrow="Reset password"
      icon={<ShieldCheck size={24} strokeWidth={1.75} />}
    >
      <ActionForm
        onSubmit={onSubmit}
        validate={(data) =>
          data.get("password") !== data.get("confirmation")
            ? "Passwords do not match. Enter the same password in both fields."
            : undefined
        }
        submitLabel="Update password"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Your password has been updated."
      >
        <Field label="New password" description="Use at least 12 characters.">
          <PasswordInput
            name="password"
            autoComplete="new-password"
            minLength={12}
            placeholder="Create a new password"
          />
        </Field>
        <Field label="Confirm password">
          <PasswordInput
            name="confirmation"
            autoComplete="new-password"
            minLength={12}
            placeholder="Enter it one more time"
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function OtpBlock({
  onSubmit,
  length = 6,
}: {
  onSubmit: FormAction;
  length?: number;
}) {
  const size = Number.isFinite(length)
    ? Math.max(4, Math.min(10, Math.floor(length)))
    : 6;
  return (
    <AuthFrame
      title="Check your inbox."
      description={`Enter the ${size}-digit verification code from your email to continue.`}
      eyebrow="One more step"
      icon={<Mail size={24} strokeWidth={1.75} />}
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Verify code"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Code verified."
      >
        <Field
          label="Verification code"
          description="You can paste the entire code into this field."
        >
          <Input
            name="code"
            inputMode="numeric"
            autoComplete="one-time-code"
            minLength={size}
            maxLength={size}
            pattern={`[0-9]{${size}}`}
            required
            className="cr-otp"
            placeholder={"0".repeat(size)}
            style={{ "--cr-otp-length": size } as CSSProperties}
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}
```


---

# blocks/search

---
title: "Search"
description: "Filter and select content from a local collection."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/search

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { SearchBlock } from './components/blocks/data';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Badge](/docs/components/badge), [Button](/docs/components/button), [Card](/docs/components/card), [Data Table](/docs/components/data-table), [Empty State](/docs/components/empty-state), [Field](/docs/components/field), [Input](/docs/components/input), [Select](/docs/components/select), [Separator](/docs/components/separator).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useMemo, useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowDownRight,
  ArrowUpRight,
  ChartNoAxesColumn,
  ChevronRight,
  FileText,
  FolderPlus,
  ListFilter,
  Minus,
  Pencil,
  Plus,
  Search,
  SearchX,
  X,
} from "lucide-react";
import {
  Badge,
  Button,
  Card,
  DataTable,
  EmptyState,
  Field,
  Input,
  Select,
  Separator,
} from '../ui';

function DataHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function DataTableBlock({
  title,
  description,
  columns,
  rows,
  onCreate,
}: {
  title: string;
  description?: string;
  columns: ComponentProps<typeof DataTable>["columns"];
  rows: ComponentProps<typeof DataTable>["rows"];
  onCreate: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-data-table">
      <DataHeading
        eyebrow="Workspace data"
        title={title}
        description={description}
        action={
          <Button onClick={onCreate}>
            <Plus size={16} aria-hidden="true" />
            Add record
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>All records</span>
        <Badge variant="outline">
          {rows.length} {rows.length === 1 ? "record" : "records"}
        </Badge>
      </div>
      <DataTable caption={title} columns={columns} rows={rows} />
    </Card>
  );
}

export function FiltersBlock({
  onChange,
  statuses,
}: {
  onChange: (filters: { query: string; status: string }) => void;
  statuses: Array<{ value: string; label: string }>;
}) {
  const [query, setQuery] = useState(""),
    [status, setStatus] = useState("all");
  const active = Number(Boolean(query)) + Number(status !== "all");
  return (
    <Card className="cr-workspace-block cr-workspace-filter-block">
      <div className="cr-workspace-filter-heading">
        <span>
          <ListFilter size={17} aria-hidden="true" />
          <strong>Filter records</strong>
        </span>
        {active > 0 && <Badge variant="outline">{active} active</Badge>}
      </div>
      <div className="cr-block-filters cr-workspace-filters">
        <Field label="Search">
          <div className="cr-workspace-search-field">
            <Search size={17} aria-hidden="true" />
            <Input
              type="search"
              value={query}
              placeholder="Name or keyword…"
              onChange={(event) => {
                setQuery(event.target.value);
                onChange({ query: event.target.value, status });
              }}
            />
          </div>
        </Field>
        <Field label="Status">
          <Select
            label="Status"
            value={status}
            options={[
              { value: "all", label: "All statuses" },
              ...statuses.filter((item) => item.value !== "all"),
            ]}
            onValueChange={(value) => {
              const next = value ?? "all";
              setStatus(next);
              onChange({ query, status: next });
            }}
          />
        </Field>
        <Button
          variant="ghost"
          disabled={!active}
          onClick={() => {
            setQuery("");
            setStatus("all");
            onChange({ query: "", status: "all" });
          }}
        >
          <X size={15} aria-hidden="true" />
          Clear filters
        </Button>
      </div>
    </Card>
  );
}

export function SearchBlock({
  items,
  onSelect,
}: {
  items: Array<{ id: string; title: string; description: string }>;
  onSelect: (id: string) => void;
}) {
  const [query, setQuery] = useState("");
  const results = useMemo(
    () =>
      items.filter((item) =>
        `${item.title} ${item.description}`
          .toLowerCase()
          .includes(query.toLowerCase()),
      ),
    [items, query],
  );
  return (
    <Card className="cr-workspace-block cr-workspace-search-block">
      <DataHeading
        eyebrow="Workspace search"
        title="Find your next step"
        description="Documents, projects and ideas. Right where you need them."
      />
      <div className="cr-workspace-search-field">
        <Search size={18} aria-hidden="true" />
        <Input
          aria-label="Search content"
          type="search"
          value={query}
          placeholder="Search your workspace…"
          onChange={(event) => setQuery(event.target.value)}
        />
      </div>
      <div className="cr-workspace-list-heading">
        <span>{query ? "Matching results" : "All items"}</span>
        <span className="cr-description" role="status">
          {results.length} {results.length === 1 ? "result" : "results"}
        </span>
      </div>
      <ul className="cr-workspace-list cr-workspace-search-results">
        {results.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-search-result"
              onClick={() => onSelect(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                <FileText size={18} aria-hidden="true" />
              </span>
              <span>
                <strong>{item.title}</strong>
                <span className="cr-description">{item.description}</span>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!results.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <SearchX size={22} aria-hidden="true" />
          </span>
          <strong>No results found</strong>
          <p>Try a different name or keyword.</p>
        </div>
      )}
    </Card>
  );
}

export function EmptyStateBlock({
  title,
  description,
  actionLabel,
  onAction,
}: {
  title: string;
  description: string;
  actionLabel: string;
  onAction: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-empty-block">
      <EmptyState
        title={title}
        description={description}
        icon={
          <span className="cr-workspace-empty-illustration">
            <span />
            <span />
            <span>
              <FolderPlus size={30} strokeWidth={1.5} aria-hidden="true" />
            </span>
          </span>
        }
        action={
          <Button onClick={onAction}>
            <Plus size={16} aria-hidden="true" />
            {actionLabel}
          </Button>
        }
      />
    </Card>
  );
}

export function DetailViewBlock({
  title,
  status,
  fields,
  children,
  onEdit,
}: {
  title: string;
  status: string;
  fields: Array<{ label: string; value: string }>;
  children?: ReactNode;
  onEdit: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-detail">
      <DataHeading
        eyebrow="Record overview"
        title={title}
        action={
          <Button variant="outline" onClick={onEdit}>
            <Pencil size={15} aria-hidden="true" />
            Edit details
          </Button>
        }
      />
      <div className="cr-workspace-detail-status">
        <span>Status</span>
        <Badge variant="outline">
          <span className="cr-workspace-status-dot" aria-hidden="true" />
          {status}
        </Badge>
      </div>
      <dl className="cr-details cr-workspace-details">
        {fields.map((field) => (
          <div key={field.label}>
            <dt>{field.label}</dt>
            <dd>{field.value}</dd>
          </div>
        ))}
      </dl>
      {children && (
        <div className="cr-workspace-detail-content">
          <Separator />
          {children}
        </div>
      )}
    </Card>
  );
}

export function StatsBlock({
  items,
}: {
  items: Array<{
    label: string;
    value: string;
    change?: string;
    trend?: "positive" | "negative" | "neutral";
    description?: string;
    icon?: ReactNode;
  }>;
}) {
  return (
    <div className="cr-block-grid cr-workspace-stats">
      {items.map((item) => (
        <Card className="cr-workspace-stat-card" key={item.label}>
          <div className="cr-workspace-stat-heading">
            <span>{item.label}</span>
            <span className="cr-workspace-stat-icon" aria-hidden="true">
              {item.icon ?? <ChartNoAxesColumn size={17} />}
            </span>
          </div>
          <strong className="cr-stat-value">{item.value}</strong>
          {(item.change || item.description) && (
            <div className="cr-workspace-stat-footer">
              {item.change && (
                <Badge
                  variant="outline"
                  className="cr-workspace-stat-change"
                  data-trend={item.trend ?? "neutral"}
                >
                  {item.trend === "positive" ? (
                    <ArrowUpRight size={13} aria-hidden="true" />
                  ) : item.trend === "negative" ? (
                    <ArrowDownRight size={13} aria-hidden="true" />
                  ) : (
                    <Minus size={13} aria-hidden="true" />
                  )}
                  {item.change}
                </Badge>
              )}
              {item.description && <span>{item.description}</span>}
            </div>
          )}
        </Card>
      ))}
    </div>
  );
}
```


---

# blocks/settings

---
title: "Settings"
description: "Workspace and notification settings in accessible tabs."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/settings

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { SettingsBlock } from './components/blocks/application';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Sidebar](/docs/components/sidebar), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Breadcrumb](/docs/components/breadcrumb), [Button](/docs/components/button), [Card](/docs/components/card), [Dialog](/docs/components/dialog), [Dropdown](/docs/components/dropdown), [Field](/docs/components/field), [Input](/docs/components/input), [Progress](/docs/components/progress), [Switch](/docs/components/switch), [Tabs](/docs/components/tabs), [Textarea](/docs/components/textarea), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowUpRight,
  Bell,
  Building2,
  CheckCheck,
  ChevronRight,
  CreditCard,
  FileText,
  KeyRound,
  Layers2,
  LayoutGrid,
  Plus,
  Search,
  ShieldCheck,
  Trash2,
  UserRound,
  UserRoundPlus,
  UsersRound,
} from "lucide-react";
import {
  Sidebar,
  Avatar,
  Badge,
  Breadcrumb,
  Button,
  Card,
  Dialog,
  Dropdown,
  Field,
  Input,
  Progress,
  Switch,
  Tabs,
  Textarea,
} from '../ui';
import { ActionForm, type FormAction } from "./common";

function WorkspaceHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function AppSidebarBlock({
  workspace,
  items,
  accountName,
}: {
  workspace: string;
  items: ComponentProps<typeof Sidebar>["items"];
  accountName: string;
}) {
  return (
    <div className="cr-app-sidebar-block">
      <Sidebar
        brand={
          <span className="cr-workspace-brand">
            <span className="cr-workspace-brand-icon">
              <Layers2 size={19} aria-hidden="true" />
            </span>
            <span>
              <strong>{workspace}</strong>
              <small>Workspace</small>
            </span>
          </span>
        }
        items={items.map((item) => ({
          ...item,
          icon: item.icon ?? <LayoutGrid size={18} aria-hidden="true" />,
        }))}
        footer={
          <div className="cr-workspace-account">
            <Avatar name={accountName} size={34} />
            <span>
              <strong>{accountName}</strong>
              <small>Account</small>
            </span>
          </div>
        }
      />
    </div>
  );
}

export function AppHeaderBlock({
  breadcrumbs,
  accountName,
  onSearch,
  onSignOut,
}: {
  breadcrumbs: ComponentProps<typeof Breadcrumb>["items"];
  accountName: string;
  onSearch: () => void;
  onSignOut: () => void;
}) {
  return (
    <header className="cr-block-header cr-workspace-header">
      <div className="cr-workspace-header-location">
        <span className="cr-workspace-header-icon">
          <Layers2 size={18} aria-hidden="true" />
        </span>
        <Breadcrumb items={breadcrumbs} />
      </div>
      <div className="cr-workspace-header-actions">
        <Button variant="ghost" onClick={onSearch}>
          <Search size={17} aria-hidden="true" />
          <span>Search</span>
        </Button>
        <span className="cr-workspace-header-divider" aria-hidden="true" />
        <Dropdown
          trigger={
            <>
              <Avatar name={accountName} size={28} />
              <span className="cr-workspace-header-name">{accountName}</span>
              <span className="cr-sr-only">Account menu</span>
            </>
          }
          items={[{ label: "Sign out", onSelect: onSignOut }]}
        />
      </div>
    </header>
  );
}

export function ProfileBlock({
  name,
  email,
  bio = "",
  onSave,
}: {
  name: string;
  email: string;
  bio?: string;
  onSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-profile">
      <WorkspaceHeading
        eyebrow="Account"
        title="Your profile"
        description="The details your team sees when you work together."
      />
      <div className="cr-workspace-identity">
        <Avatar name={name} size={58} />
        <div>
          <strong>{name}</strong>
          <span>{email}</span>
        </div>
        <span className="cr-workspace-icon-tile">
          <UserRound size={20} aria-hidden="true" />
        </span>
      </div>
      <ActionForm onSubmit={onSave}>
        <div className="cr-workspace-form-grid">
          <Field label="Display name">
            <Input
              name="name"
              defaultValue={name}
              autoComplete="name"
              required
            />
          </Field>
          <Field label="Email address">
            <Input
              name="email"
              type="email"
              defaultValue={email}
              autoComplete="email"
              required
            />
          </Field>
        </div>
        <Field label="About you">
          <Textarea
            name="bio"
            defaultValue={bio}
            placeholder="A few words about you and your work."
          />
        </Field>
      </ActionForm>
    </Card>
  );
}

export function SettingsBlock({
  workspaceName,
  onSave,
  onNotificationSave,
}: {
  workspaceName: string;
  onSave: FormAction;
  onNotificationSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-settings">
      <WorkspaceHeading
        eyebrow="Workspace"
        title="Settings"
        description="A few details that make this space yours."
        action={
          <span className="cr-workspace-icon-tile">
            <Building2 size={20} aria-hidden="true" />
          </span>
        }
      />
      <Tabs
        label="Settings sections"
        items={[
          {
            value: "general",
            label: "General",
            content: (
              <ActionForm onSubmit={onSave}>
                <Field label="Workspace name">
                  <Input
                    name="workspace"
                    defaultValue={workspaceName}
                    required
                  />
                </Field>
                <Field label="Description">
                  <Textarea
                    name="description"
                    placeholder="What are you building?"
                  />
                </Field>
              </ActionForm>
            ),
          },
          {
            value: "notifications",
            label: "Notifications",
            content: (
              <ActionForm onSubmit={onNotificationSave}>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <FileText size={18} aria-hidden="true" />
                    </span>
                    <p>A summary of what happened across your workspace.</p>
                  </div>
                  <Switch name="digest" label="Weekly digest" defaultChecked />
                </div>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <Bell size={18} aria-hidden="true" />
                    </span>
                    <p>Stay in the loop when someone needs your attention.</p>
                  </div>
                  <Switch
                    name="mentions"
                    label="Mention notifications"
                    defaultChecked
                  />
                </div>
              </ActionForm>
            ),
          },
        ]}
      />
    </Card>
  );
}

export interface TeamMember {
  id: string;
  name: string;
  email: string;
  role: string;
}
export function TeamBlock({
  members,
  onInvite,
  onRemove,
}: {
  members: TeamMember[];
  onInvite: FormAction;
  onRemove: (id: string) => void | Promise<void>;
}) {
  const [removing, setRemoving] = useState<string | null>(null),
    [error, setError] = useState(false);
  return (
    <Card className="cr-workspace-block cr-workspace-team">
      <WorkspaceHeading
        eyebrow="People & access"
        title="Your team"
        description="Good work starts with the right people."
        action={
          <Dialog
            trigger={
              <>
                <UserRoundPlus size={16} aria-hidden="true" />
                Invite member
              </>
            }
            title="Invite someone to your team"
            description="Enter the email address of the person you’d like to invite."
            footer={null}
          >
            <ActionForm
              onSubmit={onInvite}
              submitLabel="Send invitation"
              successMessage="Invitation sent."
            >
              <Field label="Email address">
                <Input
                  name="email"
                  type="email"
                  autoComplete="email"
                  placeholder="colleague@company.com"
                  required
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>
          <UsersRound size={15} aria-hidden="true" />
          Team members
        </span>
        <Badge variant="outline">
          {members.length} {members.length === 1 ? "member" : "members"}
        </Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-member-list">
        {members.map((member) => (
          <li key={member.id}>
            <Avatar name={member.name} size={36} />
            <div className="cr-workspace-person">
              <strong>{member.name}</strong>
              <span>{member.email}</span>
            </div>
            <Badge variant="outline">{member.role}</Badge>
            <Button
              variant="ghost"
              size="sm"
              className="cr-workspace-icon-button"
              disabled={Boolean(removing)}
              loading={removing === member.id}
              aria-label={`Remove ${member.name}`}
              onClick={async () => {
                setRemoving(member.id);
                setError(false);
                try {
                  await onRemove(member.id);
                } catch {
                  setError(true);
                } finally {
                  setRemoving(null);
                }
              }}
            >
              {removing !== member.id && (
                <Trash2 size={16} aria-hidden="true" />
              )}
            </Button>
          </li>
        ))}
      </ul>
      {!members.length && (
        <p className="cr-block-empty">
          No team members yet. Invite someone to get started.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to remove this member.
        </p>
      )}
    </Card>
  );
}

export function BillingBlock({
  plan,
  price,
  renewal,
  usage,
  limit,
  onManage,
  invoices,
}: {
  plan: string;
  price: string;
  renewal: string;
  usage: number;
  limit: number;
  onManage: () => void;
  invoices: Array<{ id: string; date: string; amount: string; href: string }>;
}) {
  const safeLimit = Number.isFinite(limit) && limit > 0 ? limit : 1;
  const safeUsage = Number.isFinite(usage)
    ? Math.max(0, Math.min(usage, safeLimit))
    : 0;
  return (
    <Card className="cr-workspace-block cr-workspace-billing">
      <WorkspaceHeading
        eyebrow="Subscription"
        title="Billing"
        description="Your plan, usage and invoices in one place."
        action={
          <span className="cr-workspace-icon-tile">
            <CreditCard size={20} aria-hidden="true" />
          </span>
        }
      />
      <div className="cr-workspace-plan">
        <div className="cr-workspace-plan-main">
          <Badge variant="outline">{plan} plan</Badge>
          <strong className="cr-workspace-plan-price">{price}</strong>
          <span className="cr-description">{renewal}</span>
        </div>
        <Button variant="outline" onClick={onManage}>
          Manage plan
          <ArrowUpRight size={16} aria-hidden="true" />
        </Button>
      </div>
      <div className="cr-workspace-usage">
        <div className="cr-workspace-list-heading">
          <span>Team seats</span>
          <span>
            {usage} <span className="cr-description">/ {limit} used</span>
          </span>
        </div>
        <Progress label="Seats used" value={safeUsage} max={safeLimit} />
      </div>
      <div className="cr-workspace-list-heading">
        <span>Invoice history</span>
        <Badge variant="outline">{invoices.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-invoice-list">
        {invoices.map((invoice) => (
          <li key={invoice.id}>
            <span className="cr-workspace-icon-tile">
              <FileText size={17} aria-hidden="true" />
            </span>
            <span>{invoice.date}</span>
            <strong>{invoice.amount}</strong>
            <a
              className="cr-link cr-workspace-invoice-link"
              href={invoice.href}
              aria-label={`View invoice dated ${invoice.date}`}
            >
              View
              <ArrowUpRight size={15} aria-hidden="true" />
            </a>
          </li>
        ))}
      </ul>
      {!invoices.length && (
        <p className="cr-block-empty">
          No invoices yet. They will appear here after your first payment.
        </p>
      )}
    </Card>
  );
}

export function ApiKeysBlock({
  keys,
  onCreate,
  onRevoke,
}: {
  keys: Array<{ id: string; name: string; prefix: string; created: string }>;
  onCreate: FormAction;
  onRevoke: (id: string) => void | Promise<void>;
}) {
  const [error, setError] = useState(false),
    [busy, setBusy] = useState<string | null>(null);
  return (
    <Card className="cr-workspace-block cr-workspace-keys">
      <WorkspaceHeading
        eyebrow="Developer settings"
        title="API keys"
        description="Connect your tools to your workspace."
        action={
          <Dialog
            trigger={
              <>
                <Plus size={16} aria-hidden="true" />
                Create key
              </>
            }
            title="Create an API key"
            description="Give this key a name that helps you recognize its integration."
            footer={null}
          >
            <ActionForm
              onSubmit={onCreate}
              submitLabel="Create key"
              successMessage="Key created. Follow your application’s secure delivery flow."
            >
              <Field label="Key name">
                <Input
                  name="name"
                  required
                  placeholder="Production integration"
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-security-note">
        <ShieldCheck size={17} aria-hidden="true" />
        <span>
          Use keys on your server. Keep them out of public repositories and
          client-side code.
        </span>
      </div>
      <div className="cr-workspace-list-heading">
        <span>Secret keys</span>
        <Badge variant="outline">{keys.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-key-list">
        {keys.map((key) => (
          <li key={key.id}>
            <span className="cr-workspace-icon-tile">
              <KeyRound size={18} aria-hidden="true" />
            </span>
            <div className="cr-workspace-person">
              <strong>{key.name}</strong>
              <span>
                <code>{key.prefix}••••</code>
                <span className="cr-workspace-key-date">
                  Created {key.created}
                </span>
              </span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              disabled={Boolean(busy)}
              loading={busy === key.id}
              aria-label={`Revoke ${key.name}`}
              onClick={async () => {
                setBusy(key.id);
                setError(false);
                try {
                  await onRevoke(key.id);
                } catch {
                  setError(true);
                } finally {
                  setBusy(null);
                }
              }}
            >
              Revoke
            </Button>
          </li>
        ))}
      </ul>
      {!keys.length && (
        <p className="cr-block-empty">
          No API keys yet. Create a key to connect an integration.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to revoke this key.
        </p>
      )}
    </Card>
  );
}

export function NotificationsBlock({
  items,
  onReadAll,
  onOpen,
}: {
  items: Array<{
    id: string;
    title: string;
    description: string;
    time: string;
    unread: boolean;
  }>;
  onReadAll: () => void;
  onOpen: (id: string) => void;
}) {
  const unread = items.filter((item) => item.unread).length;
  return (
    <Card className="cr-workspace-block cr-workspace-notifications">
      <WorkspaceHeading
        eyebrow="Your inbox"
        title="Notifications"
        description="The latest from your team and workspace."
        action={
          <Button
            variant="ghost"
            size="sm"
            onClick={onReadAll}
            disabled={!unread}
          >
            <CheckCheck size={16} aria-hidden="true" />
            Mark all read
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>Recent activity</span>
        <Badge variant={unread ? "primary" : "outline"}>{unread} unread</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-notification-list">
        {items.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-notification"
              data-unread={item.unread || undefined}
              onClick={() => onOpen(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                {item.unread ? (
                  <Bell size={18} aria-hidden="true" />
                ) : (
                  <CheckCheck size={18} aria-hidden="true" />
                )}
              </span>
              <span className="cr-workspace-notification-copy">
                <strong>
                  {item.title}
                  {item.unread && (
                    <>
                      <span aria-hidden="true" className="cr-unread-dot" />
                      <span className="cr-sr-only">Unread</span>
                    </>
                  )}
                </strong>
                <span className="cr-description">{item.description}</span>
                <small>{item.time}</small>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!items.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <CheckCheck size={22} aria-hidden="true" />
          </span>
          <strong>You’re all caught up.</strong>
          <p>New updates will appear here.</p>
        </div>
      )}
    </Card>
  );
}
```


---

# blocks/signup

---
title: "Sign Up"
description: "A registration form with email and password validation."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/signup

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { SignupBlock } from './components/blocks/auth';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Button](/docs/components/button), [Card](/docs/components/card), [Field](/docs/components/field), [Input](/docs/components/input), [Input Group](/docs/components/input-group), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useId, useState, type CSSProperties, type ReactNode } from "react";
import {
  ArrowLeft,
  ArrowRight,
  Eye,
  EyeOff,
  KeyRound,
  LockKeyhole,
  Mail,
  ShieldCheck,
  UserRound,
} from "lucide-react";
import { Button, Card, Field, Input, InputGroup } from '../ui';
import { ActionForm, type FormAction } from "./common";

function AuthFrame({
  title,
  description,
  eyebrow,
  icon,
  footer,
  children,
}: {
  title: string;
  description: string;
  eyebrow: string;
  icon: ReactNode;
  footer?: ReactNode;
  children: ReactNode;
}) {
  const titleId = useId();
  return (
    <div className="cr-block-form cr-auth-shell">
      <Card className="cr-auth-card" aria-labelledby={titleId} footer={footer}>
        <header className="cr-auth-header">
          <div className="cr-auth-intro">
            <span className="cr-auth-symbol" aria-hidden="true">
              {icon}
            </span>
            <span className="cr-auth-eyebrow">{eyebrow}</span>
          </div>
          <h2 id={titleId} className="cr-auth-title">
            {title}
          </h2>
          <p className="cr-auth-description">{description}</p>
        </header>
        {children}
      </Card>
    </div>
  );
}

function PasswordInput({
  name,
  autoComplete,
  minLength,
  placeholder = "Enter your password",
}: {
  name: string;
  autoComplete: "current-password" | "new-password";
  minLength?: number;
  placeholder?: string;
}) {
  const [visible, setVisible] = useState(false);
  return (
    <InputGroup
      name={name}
      type={visible ? "text" : "password"}
      autoComplete={autoComplete}
      minLength={minLength}
      required
      placeholder={placeholder}
      leading={<LockKeyhole size={16} aria-hidden="true" />}
      trailing={
        <Button
          type="button"
          variant="ghost"
          className="cr-auth-password-toggle"
          aria-label={visible ? "Hide password" : "Show password"}
          aria-pressed={visible}
          onClick={() => setVisible(!visible)}
        >
          {visible ? (
            <EyeOff size={16} aria-hidden="true" />
          ) : (
            <Eye size={16} aria-hidden="true" />
          )}
        </Button>
      }
    />
  );
}

export function LoginBlock({
  onSubmit,
  signupHref,
  forgotHref,
}: {
  onSubmit: FormAction;
  signupHref: string;
  forgotHref: string;
}) {
  return (
    <AuthFrame
      title="Welcome back."
      description="Sign in to your workspace and pick up where you left off."
      eyebrow="Your workspace"
      icon={<LockKeyhole size={24} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          New here?{" "}
          <a className="cr-auth-link" href={signupHref}>
            Create an account <ArrowRight size={14} aria-hidden="true" />
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Sign in"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Signed in."
      >
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Password">
          <PasswordInput name="password" autoComplete="current-password" />
        </Field>
        <div className="cr-auth-assistance">
          <a className="cr-auth-link" href={forgotHref}>
            Forgot password?
          </a>
        </div>
      </ActionForm>
    </AuthFrame>
  );
}

export function SignupBlock({
  onSubmit,
  loginHref,
}: {
  onSubmit: FormAction;
  loginHref: string;
}) {
  return (
    <AuthFrame
      title="Make room for what’s next."
      description="Create your account. A fresh workspace starts here."
      eyebrow="A new beginning"
      icon={<UserRound size={23} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          Already have an account?{" "}
          <a className="cr-auth-link" href={loginHref}>
            Sign in <ArrowRight size={14} aria-hidden="true" />
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Create account"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Check your inbox to confirm your email address."
      >
        <Field label="Full name">
          <InputGroup
            name="name"
            autoComplete="name"
            required
            placeholder="Your full name"
            leading={<UserRound size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
        <Field label="Password" description="Use at least 12 characters.">
          <PasswordInput
            name="password"
            autoComplete="new-password"
            minLength={12}
            placeholder="Create a password"
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function ForgotPasswordBlock({
  onSubmit,
  loginHref,
}: {
  onSubmit: FormAction;
  loginHref: string;
}) {
  return (
    <AuthFrame
      title="Let’s get you back in."
      description="Enter your account’s email address. We’ll send you a link to choose a new password."
      eyebrow="Account recovery"
      icon={<KeyRound size={24} strokeWidth={1.75} />}
      footer={
        <p className="cr-auth-footer">
          <a className="cr-auth-link" href={loginHref}>
            <ArrowLeft size={14} aria-hidden="true" /> Back to sign in
          </a>
        </p>
      }
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Send reset link"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="If this address has an account, a reset link is on its way."
      >
        <Field label="Email address">
          <InputGroup
            name="email"
            type="email"
            autoComplete="email"
            required
            placeholder="you@company.com"
            leading={<Mail size={16} aria-hidden="true" />}
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function ResetPasswordBlock({ onSubmit }: { onSubmit: FormAction }) {
  return (
    <AuthFrame
      title="A fresh start."
      description="Choose a new password to get back to your workspace."
      eyebrow="Reset password"
      icon={<ShieldCheck size={24} strokeWidth={1.75} />}
    >
      <ActionForm
        onSubmit={onSubmit}
        validate={(data) =>
          data.get("password") !== data.get("confirmation")
            ? "Passwords do not match. Enter the same password in both fields."
            : undefined
        }
        submitLabel="Update password"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Your password has been updated."
      >
        <Field label="New password" description="Use at least 12 characters.">
          <PasswordInput
            name="password"
            autoComplete="new-password"
            minLength={12}
            placeholder="Create a new password"
          />
        </Field>
        <Field label="Confirm password">
          <PasswordInput
            name="confirmation"
            autoComplete="new-password"
            minLength={12}
            placeholder="Enter it one more time"
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}

export function OtpBlock({
  onSubmit,
  length = 6,
}: {
  onSubmit: FormAction;
  length?: number;
}) {
  const size = Number.isFinite(length)
    ? Math.max(4, Math.min(10, Math.floor(length)))
    : 6;
  return (
    <AuthFrame
      title="Check your inbox."
      description={`Enter the ${size}-digit verification code from your email to continue.`}
      eyebrow="One more step"
      icon={<Mail size={24} strokeWidth={1.75} />}
    >
      <ActionForm
        onSubmit={onSubmit}
        submitLabel="Verify code"
        submitIcon={<ArrowRight size={17} aria-hidden="true" />}
        successMessage="Code verified."
      >
        <Field
          label="Verification code"
          description="You can paste the entire code into this field."
        >
          <Input
            name="code"
            inputMode="numeric"
            autoComplete="one-time-code"
            minLength={size}
            maxLength={size}
            pattern={`[0-9]{${size}}`}
            required
            className="cr-otp"
            placeholder={"0".repeat(size)}
            style={{ "--cr-otp-length": size } as CSSProperties}
          />
        </Field>
      </ActionForm>
    </AuthFrame>
  );
}
```


---

# blocks/stats

---
title: "Stats"
description: "Responsive metric cards with textual trend indicators."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/stats

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { StatsBlock } from './components/blocks/data';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Badge](/docs/components/badge), [Button](/docs/components/button), [Card](/docs/components/card), [Data Table](/docs/components/data-table), [Empty State](/docs/components/empty-state), [Field](/docs/components/field), [Input](/docs/components/input), [Select](/docs/components/select), [Separator](/docs/components/separator).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useMemo, useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowDownRight,
  ArrowUpRight,
  ChartNoAxesColumn,
  ChevronRight,
  FileText,
  FolderPlus,
  ListFilter,
  Minus,
  Pencil,
  Plus,
  Search,
  SearchX,
  X,
} from "lucide-react";
import {
  Badge,
  Button,
  Card,
  DataTable,
  EmptyState,
  Field,
  Input,
  Select,
  Separator,
} from '../ui';

function DataHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function DataTableBlock({
  title,
  description,
  columns,
  rows,
  onCreate,
}: {
  title: string;
  description?: string;
  columns: ComponentProps<typeof DataTable>["columns"];
  rows: ComponentProps<typeof DataTable>["rows"];
  onCreate: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-data-table">
      <DataHeading
        eyebrow="Workspace data"
        title={title}
        description={description}
        action={
          <Button onClick={onCreate}>
            <Plus size={16} aria-hidden="true" />
            Add record
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>All records</span>
        <Badge variant="outline">
          {rows.length} {rows.length === 1 ? "record" : "records"}
        </Badge>
      </div>
      <DataTable caption={title} columns={columns} rows={rows} />
    </Card>
  );
}

export function FiltersBlock({
  onChange,
  statuses,
}: {
  onChange: (filters: { query: string; status: string }) => void;
  statuses: Array<{ value: string; label: string }>;
}) {
  const [query, setQuery] = useState(""),
    [status, setStatus] = useState("all");
  const active = Number(Boolean(query)) + Number(status !== "all");
  return (
    <Card className="cr-workspace-block cr-workspace-filter-block">
      <div className="cr-workspace-filter-heading">
        <span>
          <ListFilter size={17} aria-hidden="true" />
          <strong>Filter records</strong>
        </span>
        {active > 0 && <Badge variant="outline">{active} active</Badge>}
      </div>
      <div className="cr-block-filters cr-workspace-filters">
        <Field label="Search">
          <div className="cr-workspace-search-field">
            <Search size={17} aria-hidden="true" />
            <Input
              type="search"
              value={query}
              placeholder="Name or keyword…"
              onChange={(event) => {
                setQuery(event.target.value);
                onChange({ query: event.target.value, status });
              }}
            />
          </div>
        </Field>
        <Field label="Status">
          <Select
            label="Status"
            value={status}
            options={[
              { value: "all", label: "All statuses" },
              ...statuses.filter((item) => item.value !== "all"),
            ]}
            onValueChange={(value) => {
              const next = value ?? "all";
              setStatus(next);
              onChange({ query, status: next });
            }}
          />
        </Field>
        <Button
          variant="ghost"
          disabled={!active}
          onClick={() => {
            setQuery("");
            setStatus("all");
            onChange({ query: "", status: "all" });
          }}
        >
          <X size={15} aria-hidden="true" />
          Clear filters
        </Button>
      </div>
    </Card>
  );
}

export function SearchBlock({
  items,
  onSelect,
}: {
  items: Array<{ id: string; title: string; description: string }>;
  onSelect: (id: string) => void;
}) {
  const [query, setQuery] = useState("");
  const results = useMemo(
    () =>
      items.filter((item) =>
        `${item.title} ${item.description}`
          .toLowerCase()
          .includes(query.toLowerCase()),
      ),
    [items, query],
  );
  return (
    <Card className="cr-workspace-block cr-workspace-search-block">
      <DataHeading
        eyebrow="Workspace search"
        title="Find your next step"
        description="Documents, projects and ideas. Right where you need them."
      />
      <div className="cr-workspace-search-field">
        <Search size={18} aria-hidden="true" />
        <Input
          aria-label="Search content"
          type="search"
          value={query}
          placeholder="Search your workspace…"
          onChange={(event) => setQuery(event.target.value)}
        />
      </div>
      <div className="cr-workspace-list-heading">
        <span>{query ? "Matching results" : "All items"}</span>
        <span className="cr-description" role="status">
          {results.length} {results.length === 1 ? "result" : "results"}
        </span>
      </div>
      <ul className="cr-workspace-list cr-workspace-search-results">
        {results.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-search-result"
              onClick={() => onSelect(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                <FileText size={18} aria-hidden="true" />
              </span>
              <span>
                <strong>{item.title}</strong>
                <span className="cr-description">{item.description}</span>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!results.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <SearchX size={22} aria-hidden="true" />
          </span>
          <strong>No results found</strong>
          <p>Try a different name or keyword.</p>
        </div>
      )}
    </Card>
  );
}

export function EmptyStateBlock({
  title,
  description,
  actionLabel,
  onAction,
}: {
  title: string;
  description: string;
  actionLabel: string;
  onAction: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-empty-block">
      <EmptyState
        title={title}
        description={description}
        icon={
          <span className="cr-workspace-empty-illustration">
            <span />
            <span />
            <span>
              <FolderPlus size={30} strokeWidth={1.5} aria-hidden="true" />
            </span>
          </span>
        }
        action={
          <Button onClick={onAction}>
            <Plus size={16} aria-hidden="true" />
            {actionLabel}
          </Button>
        }
      />
    </Card>
  );
}

export function DetailViewBlock({
  title,
  status,
  fields,
  children,
  onEdit,
}: {
  title: string;
  status: string;
  fields: Array<{ label: string; value: string }>;
  children?: ReactNode;
  onEdit: () => void;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-detail">
      <DataHeading
        eyebrow="Record overview"
        title={title}
        action={
          <Button variant="outline" onClick={onEdit}>
            <Pencil size={15} aria-hidden="true" />
            Edit details
          </Button>
        }
      />
      <div className="cr-workspace-detail-status">
        <span>Status</span>
        <Badge variant="outline">
          <span className="cr-workspace-status-dot" aria-hidden="true" />
          {status}
        </Badge>
      </div>
      <dl className="cr-details cr-workspace-details">
        {fields.map((field) => (
          <div key={field.label}>
            <dt>{field.label}</dt>
            <dd>{field.value}</dd>
          </div>
        ))}
      </dl>
      {children && (
        <div className="cr-workspace-detail-content">
          <Separator />
          {children}
        </div>
      )}
    </Card>
  );
}

export function StatsBlock({
  items,
}: {
  items: Array<{
    label: string;
    value: string;
    change?: string;
    trend?: "positive" | "negative" | "neutral";
    description?: string;
    icon?: ReactNode;
  }>;
}) {
  return (
    <div className="cr-block-grid cr-workspace-stats">
      {items.map((item) => (
        <Card className="cr-workspace-stat-card" key={item.label}>
          <div className="cr-workspace-stat-heading">
            <span>{item.label}</span>
            <span className="cr-workspace-stat-icon" aria-hidden="true">
              {item.icon ?? <ChartNoAxesColumn size={17} />}
            </span>
          </div>
          <strong className="cr-stat-value">{item.value}</strong>
          {(item.change || item.description) && (
            <div className="cr-workspace-stat-footer">
              {item.change && (
                <Badge
                  variant="outline"
                  className="cr-workspace-stat-change"
                  data-trend={item.trend ?? "neutral"}
                >
                  {item.trend === "positive" ? (
                    <ArrowUpRight size={13} aria-hidden="true" />
                  ) : item.trend === "negative" ? (
                    <ArrowDownRight size={13} aria-hidden="true" />
                  ) : (
                    <Minus size={13} aria-hidden="true" />
                  )}
                  {item.change}
                </Badge>
              )}
              {item.description && <span>{item.description}</span>}
            </div>
          )}
        </Card>
      ))}
    </div>
  );
}
```


---

# blocks/team

---
title: "Team"
description: "A member list with invitation and removal callbacks."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/team

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { TeamBlock } from './components/blocks/application';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Sidebar](/docs/components/sidebar), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Breadcrumb](/docs/components/breadcrumb), [Button](/docs/components/button), [Card](/docs/components/card), [Dialog](/docs/components/dialog), [Dropdown](/docs/components/dropdown), [Field](/docs/components/field), [Input](/docs/components/input), [Progress](/docs/components/progress), [Switch](/docs/components/switch), [Tabs](/docs/components/tabs), [Textarea](/docs/components/textarea), [Alert](/docs/components/alert).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import { useState, type ComponentProps, type ReactNode } from "react";
import {
  ArrowUpRight,
  Bell,
  Building2,
  CheckCheck,
  ChevronRight,
  CreditCard,
  FileText,
  KeyRound,
  Layers2,
  LayoutGrid,
  Plus,
  Search,
  ShieldCheck,
  Trash2,
  UserRound,
  UserRoundPlus,
  UsersRound,
} from "lucide-react";
import {
  Sidebar,
  Avatar,
  Badge,
  Breadcrumb,
  Button,
  Card,
  Dialog,
  Dropdown,
  Field,
  Input,
  Progress,
  Switch,
  Tabs,
  Textarea,
} from '../ui';
import { ActionForm, type FormAction } from "./common";

function WorkspaceHeading({
  eyebrow,
  title,
  description,
  action,
}: {
  eyebrow: string;
  title: string;
  description?: string;
  action?: ReactNode;
}) {
  return (
    <header className="cr-workspace-heading">
      <div>
        <span className="cr-workspace-eyebrow">{eyebrow}</span>
        <h3>{title}</h3>
        {description && <p>{description}</p>}
      </div>
      {action && <div className="cr-workspace-heading-action">{action}</div>}
    </header>
  );
}

export function AppSidebarBlock({
  workspace,
  items,
  accountName,
}: {
  workspace: string;
  items: ComponentProps<typeof Sidebar>["items"];
  accountName: string;
}) {
  return (
    <div className="cr-app-sidebar-block">
      <Sidebar
        brand={
          <span className="cr-workspace-brand">
            <span className="cr-workspace-brand-icon">
              <Layers2 size={19} aria-hidden="true" />
            </span>
            <span>
              <strong>{workspace}</strong>
              <small>Workspace</small>
            </span>
          </span>
        }
        items={items.map((item) => ({
          ...item,
          icon: item.icon ?? <LayoutGrid size={18} aria-hidden="true" />,
        }))}
        footer={
          <div className="cr-workspace-account">
            <Avatar name={accountName} size={34} />
            <span>
              <strong>{accountName}</strong>
              <small>Account</small>
            </span>
          </div>
        }
      />
    </div>
  );
}

export function AppHeaderBlock({
  breadcrumbs,
  accountName,
  onSearch,
  onSignOut,
}: {
  breadcrumbs: ComponentProps<typeof Breadcrumb>["items"];
  accountName: string;
  onSearch: () => void;
  onSignOut: () => void;
}) {
  return (
    <header className="cr-block-header cr-workspace-header">
      <div className="cr-workspace-header-location">
        <span className="cr-workspace-header-icon">
          <Layers2 size={18} aria-hidden="true" />
        </span>
        <Breadcrumb items={breadcrumbs} />
      </div>
      <div className="cr-workspace-header-actions">
        <Button variant="ghost" onClick={onSearch}>
          <Search size={17} aria-hidden="true" />
          <span>Search</span>
        </Button>
        <span className="cr-workspace-header-divider" aria-hidden="true" />
        <Dropdown
          trigger={
            <>
              <Avatar name={accountName} size={28} />
              <span className="cr-workspace-header-name">{accountName}</span>
              <span className="cr-sr-only">Account menu</span>
            </>
          }
          items={[{ label: "Sign out", onSelect: onSignOut }]}
        />
      </div>
    </header>
  );
}

export function ProfileBlock({
  name,
  email,
  bio = "",
  onSave,
}: {
  name: string;
  email: string;
  bio?: string;
  onSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-profile">
      <WorkspaceHeading
        eyebrow="Account"
        title="Your profile"
        description="The details your team sees when you work together."
      />
      <div className="cr-workspace-identity">
        <Avatar name={name} size={58} />
        <div>
          <strong>{name}</strong>
          <span>{email}</span>
        </div>
        <span className="cr-workspace-icon-tile">
          <UserRound size={20} aria-hidden="true" />
        </span>
      </div>
      <ActionForm onSubmit={onSave}>
        <div className="cr-workspace-form-grid">
          <Field label="Display name">
            <Input
              name="name"
              defaultValue={name}
              autoComplete="name"
              required
            />
          </Field>
          <Field label="Email address">
            <Input
              name="email"
              type="email"
              defaultValue={email}
              autoComplete="email"
              required
            />
          </Field>
        </div>
        <Field label="About you">
          <Textarea
            name="bio"
            defaultValue={bio}
            placeholder="A few words about you and your work."
          />
        </Field>
      </ActionForm>
    </Card>
  );
}

export function SettingsBlock({
  workspaceName,
  onSave,
  onNotificationSave,
}: {
  workspaceName: string;
  onSave: FormAction;
  onNotificationSave: FormAction;
}) {
  return (
    <Card className="cr-workspace-block cr-workspace-settings">
      <WorkspaceHeading
        eyebrow="Workspace"
        title="Settings"
        description="A few details that make this space yours."
        action={
          <span className="cr-workspace-icon-tile">
            <Building2 size={20} aria-hidden="true" />
          </span>
        }
      />
      <Tabs
        label="Settings sections"
        items={[
          {
            value: "general",
            label: "General",
            content: (
              <ActionForm onSubmit={onSave}>
                <Field label="Workspace name">
                  <Input
                    name="workspace"
                    defaultValue={workspaceName}
                    required
                  />
                </Field>
                <Field label="Description">
                  <Textarea
                    name="description"
                    placeholder="What are you building?"
                  />
                </Field>
              </ActionForm>
            ),
          },
          {
            value: "notifications",
            label: "Notifications",
            content: (
              <ActionForm onSubmit={onNotificationSave}>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <FileText size={18} aria-hidden="true" />
                    </span>
                    <p>A summary of what happened across your workspace.</p>
                  </div>
                  <Switch name="digest" label="Weekly digest" defaultChecked />
                </div>
                <div className="cr-workspace-preference">
                  <div>
                    <span className="cr-workspace-icon-tile">
                      <Bell size={18} aria-hidden="true" />
                    </span>
                    <p>Stay in the loop when someone needs your attention.</p>
                  </div>
                  <Switch
                    name="mentions"
                    label="Mention notifications"
                    defaultChecked
                  />
                </div>
              </ActionForm>
            ),
          },
        ]}
      />
    </Card>
  );
}

export interface TeamMember {
  id: string;
  name: string;
  email: string;
  role: string;
}
export function TeamBlock({
  members,
  onInvite,
  onRemove,
}: {
  members: TeamMember[];
  onInvite: FormAction;
  onRemove: (id: string) => void | Promise<void>;
}) {
  const [removing, setRemoving] = useState<string | null>(null),
    [error, setError] = useState(false);
  return (
    <Card className="cr-workspace-block cr-workspace-team">
      <WorkspaceHeading
        eyebrow="People & access"
        title="Your team"
        description="Good work starts with the right people."
        action={
          <Dialog
            trigger={
              <>
                <UserRoundPlus size={16} aria-hidden="true" />
                Invite member
              </>
            }
            title="Invite someone to your team"
            description="Enter the email address of the person you’d like to invite."
            footer={null}
          >
            <ActionForm
              onSubmit={onInvite}
              submitLabel="Send invitation"
              successMessage="Invitation sent."
            >
              <Field label="Email address">
                <Input
                  name="email"
                  type="email"
                  autoComplete="email"
                  placeholder="colleague@company.com"
                  required
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>
          <UsersRound size={15} aria-hidden="true" />
          Team members
        </span>
        <Badge variant="outline">
          {members.length} {members.length === 1 ? "member" : "members"}
        </Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-member-list">
        {members.map((member) => (
          <li key={member.id}>
            <Avatar name={member.name} size={36} />
            <div className="cr-workspace-person">
              <strong>{member.name}</strong>
              <span>{member.email}</span>
            </div>
            <Badge variant="outline">{member.role}</Badge>
            <Button
              variant="ghost"
              size="sm"
              className="cr-workspace-icon-button"
              disabled={Boolean(removing)}
              loading={removing === member.id}
              aria-label={`Remove ${member.name}`}
              onClick={async () => {
                setRemoving(member.id);
                setError(false);
                try {
                  await onRemove(member.id);
                } catch {
                  setError(true);
                } finally {
                  setRemoving(null);
                }
              }}
            >
              {removing !== member.id && (
                <Trash2 size={16} aria-hidden="true" />
              )}
            </Button>
          </li>
        ))}
      </ul>
      {!members.length && (
        <p className="cr-block-empty">
          No team members yet. Invite someone to get started.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to remove this member.
        </p>
      )}
    </Card>
  );
}

export function BillingBlock({
  plan,
  price,
  renewal,
  usage,
  limit,
  onManage,
  invoices,
}: {
  plan: string;
  price: string;
  renewal: string;
  usage: number;
  limit: number;
  onManage: () => void;
  invoices: Array<{ id: string; date: string; amount: string; href: string }>;
}) {
  const safeLimit = Number.isFinite(limit) && limit > 0 ? limit : 1;
  const safeUsage = Number.isFinite(usage)
    ? Math.max(0, Math.min(usage, safeLimit))
    : 0;
  return (
    <Card className="cr-workspace-block cr-workspace-billing">
      <WorkspaceHeading
        eyebrow="Subscription"
        title="Billing"
        description="Your plan, usage and invoices in one place."
        action={
          <span className="cr-workspace-icon-tile">
            <CreditCard size={20} aria-hidden="true" />
          </span>
        }
      />
      <div className="cr-workspace-plan">
        <div className="cr-workspace-plan-main">
          <Badge variant="outline">{plan} plan</Badge>
          <strong className="cr-workspace-plan-price">{price}</strong>
          <span className="cr-description">{renewal}</span>
        </div>
        <Button variant="outline" onClick={onManage}>
          Manage plan
          <ArrowUpRight size={16} aria-hidden="true" />
        </Button>
      </div>
      <div className="cr-workspace-usage">
        <div className="cr-workspace-list-heading">
          <span>Team seats</span>
          <span>
            {usage} <span className="cr-description">/ {limit} used</span>
          </span>
        </div>
        <Progress label="Seats used" value={safeUsage} max={safeLimit} />
      </div>
      <div className="cr-workspace-list-heading">
        <span>Invoice history</span>
        <Badge variant="outline">{invoices.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-invoice-list">
        {invoices.map((invoice) => (
          <li key={invoice.id}>
            <span className="cr-workspace-icon-tile">
              <FileText size={17} aria-hidden="true" />
            </span>
            <span>{invoice.date}</span>
            <strong>{invoice.amount}</strong>
            <a
              className="cr-link cr-workspace-invoice-link"
              href={invoice.href}
              aria-label={`View invoice dated ${invoice.date}`}
            >
              View
              <ArrowUpRight size={15} aria-hidden="true" />
            </a>
          </li>
        ))}
      </ul>
      {!invoices.length && (
        <p className="cr-block-empty">
          No invoices yet. They will appear here after your first payment.
        </p>
      )}
    </Card>
  );
}

export function ApiKeysBlock({
  keys,
  onCreate,
  onRevoke,
}: {
  keys: Array<{ id: string; name: string; prefix: string; created: string }>;
  onCreate: FormAction;
  onRevoke: (id: string) => void | Promise<void>;
}) {
  const [error, setError] = useState(false),
    [busy, setBusy] = useState<string | null>(null);
  return (
    <Card className="cr-workspace-block cr-workspace-keys">
      <WorkspaceHeading
        eyebrow="Developer settings"
        title="API keys"
        description="Connect your tools to your workspace."
        action={
          <Dialog
            trigger={
              <>
                <Plus size={16} aria-hidden="true" />
                Create key
              </>
            }
            title="Create an API key"
            description="Give this key a name that helps you recognize its integration."
            footer={null}
          >
            <ActionForm
              onSubmit={onCreate}
              submitLabel="Create key"
              successMessage="Key created. Follow your application’s secure delivery flow."
            >
              <Field label="Key name">
                <Input
                  name="name"
                  required
                  placeholder="Production integration"
                />
              </Field>
            </ActionForm>
          </Dialog>
        }
      />
      <div className="cr-workspace-security-note">
        <ShieldCheck size={17} aria-hidden="true" />
        <span>
          Use keys on your server. Keep them out of public repositories and
          client-side code.
        </span>
      </div>
      <div className="cr-workspace-list-heading">
        <span>Secret keys</span>
        <Badge variant="outline">{keys.length}</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-key-list">
        {keys.map((key) => (
          <li key={key.id}>
            <span className="cr-workspace-icon-tile">
              <KeyRound size={18} aria-hidden="true" />
            </span>
            <div className="cr-workspace-person">
              <strong>{key.name}</strong>
              <span>
                <code>{key.prefix}••••</code>
                <span className="cr-workspace-key-date">
                  Created {key.created}
                </span>
              </span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              disabled={Boolean(busy)}
              loading={busy === key.id}
              aria-label={`Revoke ${key.name}`}
              onClick={async () => {
                setBusy(key.id);
                setError(false);
                try {
                  await onRevoke(key.id);
                } catch {
                  setError(true);
                } finally {
                  setBusy(null);
                }
              }}
            >
              Revoke
            </Button>
          </li>
        ))}
      </ul>
      {!keys.length && (
        <p className="cr-block-empty">
          No API keys yet. Create a key to connect an integration.
        </p>
      )}
      {error && (
        <p role="alert" className="cr-description">
          Unable to revoke this key.
        </p>
      )}
    </Card>
  );
}

export function NotificationsBlock({
  items,
  onReadAll,
  onOpen,
}: {
  items: Array<{
    id: string;
    title: string;
    description: string;
    time: string;
    unread: boolean;
  }>;
  onReadAll: () => void;
  onOpen: (id: string) => void;
}) {
  const unread = items.filter((item) => item.unread).length;
  return (
    <Card className="cr-workspace-block cr-workspace-notifications">
      <WorkspaceHeading
        eyebrow="Your inbox"
        title="Notifications"
        description="The latest from your team and workspace."
        action={
          <Button
            variant="ghost"
            size="sm"
            onClick={onReadAll}
            disabled={!unread}
          >
            <CheckCheck size={16} aria-hidden="true" />
            Mark all read
          </Button>
        }
      />
      <div className="cr-workspace-list-heading">
        <span>Recent activity</span>
        <Badge variant={unread ? "primary" : "outline"}>{unread} unread</Badge>
      </div>
      <ul className="cr-workspace-list cr-workspace-notification-list">
        {items.map((item) => (
          <li key={item.id}>
            <button
              type="button"
              className="cr-notification-item cr-workspace-notification"
              data-unread={item.unread || undefined}
              onClick={() => onOpen(item.id)}
            >
              <span className="cr-workspace-icon-tile">
                {item.unread ? (
                  <Bell size={18} aria-hidden="true" />
                ) : (
                  <CheckCheck size={18} aria-hidden="true" />
                )}
              </span>
              <span className="cr-workspace-notification-copy">
                <strong>
                  {item.title}
                  {item.unread && (
                    <>
                      <span aria-hidden="true" className="cr-unread-dot" />
                      <span className="cr-sr-only">Unread</span>
                    </>
                  )}
                </strong>
                <span className="cr-description">{item.description}</span>
                <small>{item.time}</small>
              </span>
              <ChevronRight size={16} aria-hidden="true" />
            </button>
          </li>
        ))}
      </ul>
      {!items.length && (
        <div className="cr-workspace-caught-up">
          <span className="cr-workspace-icon-tile">
            <CheckCheck size={22} aria-hidden="true" />
          </span>
          <strong>You’re all caught up.</strong>
          <p>New updates will appear here.</p>
        </div>
      )}
    </Card>
  );
}
```


---

# blocks/testimonials

---
title: "Testimonials"
description: "Customer quotations with author identities."
---

Interactive preview: https://ui.coderocket.app/docs/blocks/testimonials

## Usage

Get this block from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/blocks.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

This import is the entry point, not a complete integration example. Supply the required props and connect callbacks to your application. The full ZIP includes `examples/blocks-preview.tsx` with the populated preview and local sample callbacks; adapt those examples to your product.

```tsx
import { TestimonialsBlock } from './components/blocks/marketing';

// See Source and props below for the complete typed interface.
```

## Design system

This block consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Accordion](/docs/components/accordion), [Avatar](/docs/components/avatar), [Badge](/docs/components/badge), [Card](/docs/components/card).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor. The complete source group is included below; related blocks share it to avoid duplicating behavior.

```tsx
"use client";
import type { ReactNode } from "react";
import {
  ArrowRight,
  ArrowUpRight,
  Check,
  Layers3,
  Quote,
  SlidersHorizontal,
  Workflow,
} from "lucide-react";
import { Accordion, Avatar, Badge, Card } from '../ui';

function MarketingHeading({
  title,
  description,
  eyebrow,
}: {
  title: string;
  description?: string;
  eyebrow?: string;
}) {
  return (
    <header className="cr-marketing-heading">
      <div>
        {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
        <h2>{title}</h2>
      </div>
      {description && <p className="cr-description">{description}</p>}
    </header>
  );
}

export function HeroBlock({
  eyebrow,
  title,
  description,
  primary,
  secondary,
  children,
}: {
  eyebrow: string;
  title: string;
  description: string;
  primary: { label: string; href: string };
  secondary?: { label: string; href: string };
  children?: ReactNode;
}) {
  return (
    <section className="cr-hero cr-marketing-hero">
      <div className="cr-hero-decoration" aria-hidden="true">
        <span>
          <Layers3 strokeWidth={1.75} />
        </span>
        <span>
          <SlidersHorizontal strokeWidth={1.75} />
        </span>
        <span>
          <Workflow strokeWidth={1.75} />
        </span>
      </div>
      <div className="cr-hero-content">
        <Badge variant="outline">
          {eyebrow}
          <ArrowUpRight size={13} strokeWidth={1.75} aria-hidden="true" />
        </Badge>
        <h1>{title}</h1>
        <p className="cr-description">{description}</p>
        <div className="cr-hero-actions">
          <a className="cr-button" href={primary.href}>
            {primary.label}
            <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
          </a>
          {secondary && (
            <a className="cr-button" data-variant="ghost" href={secondary.href}>
              {secondary.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
      </div>
      {children && <div className="cr-hero-media">{children}</div>}
    </section>
  );
}

export function FeaturesBlock({
  title,
  description,
  eyebrow,
  items,
}: {
  title: string;
  description: string;
  eyebrow?: string;
  items: Array<{
    title: string;
    description: string;
    icon?: ReactNode;
    visual?: ReactNode;
    eyebrow?: string;
    href?: string;
    linkLabel?: string;
  }>;
}) {
  const fallbackIcons = [Layers3, Workflow, SlidersHorizontal];
  return (
    <section className="cr-marketing-section cr-features-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-features-grid">
        {items.map((item, index) => {
          const Icon = fallbackIcons[index % fallbackIcons.length];
          return (
            <Card
              key={item.title}
              className="cr-feature-card"
              data-featured={(index === 0 && items.length >= 3) || undefined}
              data-has-visual={Boolean(item.visual) || undefined}
            >
              <div className="cr-feature-copy">
                <div className="cr-feature-topline">
                  <span aria-hidden="true" className="cr-feature-icon">
                    {item.icon ?? <Icon size={22} strokeWidth={1.75} />}
                  </span>
                  <span className="cr-feature-index" aria-hidden="true">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                </div>
                {item.eyebrow && (
                  <p className="cr-marketing-eyebrow">{item.eyebrow}</p>
                )}
                <h3>{item.title}</h3>
                <p className="cr-description">{item.description}</p>
                {item.href && (
                  <a className="cr-feature-link" href={item.href}>
                    {item.linkLabel ?? "Explore feature"}
                    <ArrowUpRight
                      size={16}
                      strokeWidth={1.75}
                      aria-hidden="true"
                    />
                  </a>
                )}
              </div>
              {item.visual && (
                <div className="cr-feature-visual">{item.visual}</div>
              )}
            </Card>
          );
        })}
      </div>
    </section>
  );
}

export function PricingBlock({
  title,
  plans,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  plans: Array<{
    name: string;
    price: string;
    period: string;
    description: string;
    features: string[];
    href: string;
    action: string;
    featured?: boolean;
  }>;
}) {
  return (
    <section className="cr-marketing-section cr-pricing-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-pricing-grid">
        {plans.map((plan) => (
          <Card
            key={plan.name}
            className="cr-pricing-card"
            data-featured={plan.featured || undefined}
          >
            <div className="cr-plan-heading">
              <h3>{plan.name}</h3>
              <div
                className="cr-price-recommendation"
                aria-hidden={!plan.featured || undefined}
              >
                {plan.featured && <Badge variant="primary">Recommended</Badge>}
              </div>
            </div>
            <p className="cr-plan-description cr-description">
              {plan.description}
            </p>
            <p className="cr-price">
              {plan.price}
              <small>{plan.period}</small>
            </p>
            <ul className="cr-price-features">
              {plan.features.map((feature) => (
                <li key={feature}>
                  <Check size={17} strokeWidth={1.75} aria-hidden="true" />
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
            <a
              className="cr-button"
              data-variant={plan.featured ? "primary" : "outline"}
              href={plan.href}
            >
              {plan.action}
              <ArrowRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function TestimonialsBlock({
  title,
  quotes,
  eyebrow,
  description,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  quotes: Array<{ quote: string; name: string; role: string; avatar?: string }>;
}) {
  return (
    <section className="cr-marketing-section cr-testimonials-section">
      <MarketingHeading
        title={title}
        description={description}
        eyebrow={eyebrow}
      />
      <div className="cr-testimonials-grid">
        {quotes.map((quote, index) => (
          <Card
            key={quote.name}
            className="cr-testimonial-card"
            data-featured={index === 0 || undefined}
          >
            <figure className="cr-testimonial-figure">
              <Quote
                className="cr-quote-icon"
                size={26}
                strokeWidth={1.75}
                aria-hidden="true"
              />
              <blockquote className="cr-quote">
                <p>{quote.quote}</p>
              </blockquote>
              <figcaption className="cr-quote-author">
                <Avatar name={quote.name} src={quote.avatar} size={40} />
                <div>
                  <cite>{quote.name}</cite>
                  <p className="cr-description">{quote.role}</p>
                </div>
              </figcaption>
            </figure>
          </Card>
        ))}
      </div>
    </section>
  );
}

export function FaqBlock({
  title,
  items,
  eyebrow,
  description,
  contact,
}: {
  title: string;
  eyebrow?: string;
  description?: string;
  contact?: { label: string; href: string };
  items: Array<{ question: string; answer: ReactNode }>;
}) {
  return (
    <section className="cr-marketing-section cr-faq-section">
      <div className="cr-faq-layout">
        <div className="cr-faq-intro">
          <MarketingHeading
            title={title}
            description={description}
            eyebrow={eyebrow}
          />
          {contact && (
            <a className="cr-feature-link" href={contact.href}>
              {contact.label}
              <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
            </a>
          )}
        </div>
        <div className="cr-faq-content">
          <Accordion
            items={items.map((item, index) => ({
              value: String(index),
              title: item.question,
              content: item.answer,
            }))}
          />
        </div>
      </div>
    </section>
  );
}

export function CtaBlock({
  title,
  description,
  action,
  eyebrow,
  secondary,
}: {
  title: string;
  description: string;
  action: { label: string; href: string };
  eyebrow?: string;
  secondary?: { label: string; href: string };
}) {
  return (
    <Card className="cr-cta-card">
      <div className="cr-cta">
        <div className="cr-cta-content">
          {eyebrow && <p className="cr-marketing-eyebrow">{eyebrow}</p>}
          <h2>{title}</h2>
          <p className="cr-description">{description}</p>
          <div className="cr-cta-actions">
            <a className="cr-button" href={action.href}>
              {action.label}
              <ArrowRight size={17} strokeWidth={1.75} aria-hidden="true" />
            </a>
            {secondary && (
              <a className="cr-feature-link" href={secondary.href}>
                {secondary.label}
                <ArrowUpRight size={16} strokeWidth={1.75} aria-hidden="true" />
              </a>
            )}
          </div>
        </div>
        <div className="cr-cta-emblem" aria-hidden="true">
          <ArrowUpRight strokeWidth={1.75} />
        </div>
      </div>
    </Card>
  );
}

export function FooterBlock({
  brand,
  description,
  groups,
  copyright,
  logo,
  brandHref,
  legalLinks,
}: {
  brand: string;
  description: string;
  groups: Array<{
    title: string;
    links: Array<{ label: string; href: string }>;
  }>;
  copyright: string;
  logo?: ReactNode;
  brandHref?: string;
  legalLinks?: Array<{ label: string; href: string }>;
}) {
  const identity = (
    <>
      {logo && (
        <span className="cr-footer-logo" aria-hidden="true">
          {logo}
        </span>
      )}
      <strong>{brand}</strong>
    </>
  );
  return (
    <footer className="cr-footer">
      <div className="cr-footer-main">
        <div className="cr-footer-brand">
          {brandHref ? (
            <a className="cr-footer-identity" href={brandHref}>
              {identity}
            </a>
          ) : (
            <div className="cr-footer-identity">{identity}</div>
          )}
          <p className="cr-description">{description}</p>
        </div>
        <div className="cr-footer-navigation">
          {groups.map((group) => (
            <nav key={group.title} aria-label={group.title}>
              <strong>{group.title}</strong>
              {group.links.map((link) => (
                <a key={link.href} href={link.href}>
                  {link.label}
                </a>
              ))}
            </nav>
          ))}
        </div>
      </div>
      <div className="cr-footer-bottom">
        <p className="cr-description">{copyright}</p>
        {legalLinks?.length ? (
          <nav aria-label="Legal">
            {legalLinks.map((link) => (
              <a href={link.href} key={link.href}>
                {link.label}
              </a>
            ))}
          </nav>
        ) : null}
      </div>
    </footer>
  );
}
```


---

# changelog

---
title: Changelog
description: What is changing in CodeRocket UI.
---

## Vue joins the catalogue — 19 September 2026

- Create native Vue 3 libraries with the same tokens, AI proposal workflow and saved versions as React.
- Vue components use TypeScript, Reka UI, v-model and slots. Exports, CLI and MCP deliver Vue source and framework-specific instructions.
- The catalogue and documentation now include Vue components, blocks and live Vue previews. Existing React libraries are unchanged.

## September 19, 2026 — A complete date-selection workflow

- DatePicker now supports single dates and ranges, two-month calendars, shortcuts, direct date entry, clearing and optional Apply/Cancel confirmation.
- Availability constraints, ISO week numbers, month/year navigation, inline display and French control labels share the same implementation in the Studio and exported source.
- Select supports multiple values; Combobox adds controlled search, disabled options and optional clearing. Form fields and file inputs preserve validation and native form behavior.
- Overlays accept custom triggers, tables expose loading and empty states plus custom cells, and external toast managers connect to their provider.
- New integration examples document the supported APIs and their limits.

## September 2026 — Early access foundation

CodeRocket UI starts a new product: create a design system, customize React components visually, review AI proposals and export editable source.

- Structured design-system model and semantic tokens.
- React catalogue built on Base UI, plus complete application and marketing blocks.
- Private libraries, account confirmation, password recovery and version history.
- Fumadocs documentation with interactive previews and Markdown for coding assistants.
- Source archives with compiled styles and MIT-licensed components.

This product is separate from **Vue Tailwind Datepicker**. The existing datepicker package and documentation remain available. At launch, React was the only Studio renderer. Vue support was added on September 19; Svelte and Solid remain planned.


---

# components/accordion

---
title: "Accordion"
description: "Expandable sections with built-in keyboard interaction."
---

Interactive preview: https://ui.coderocket.app/docs/components/accordion

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Accordion } from './components/ui/accordion';

<Accordion items={[{value:"ownership",title:"Do I own the code?",content:"Yes. Export it and use it in your own project."},{value:"runtime",title:"Does it need a server?",content:"The exported components run independently."}]}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Accordion as Base } from "@base-ui/react/accordion";
import type { ReactNode } from "react";
export function Accordion({
  items,
  multiple = false,
  value,
  defaultValue,
  onValueChange,
  disabled = false,
  keepMounted = false,
}: {
  items: Array<{
    value: string;
    title: string;
    content: ReactNode;
    disabled?: boolean;
  }>;
  multiple?: boolean;
  value?: string[];
  defaultValue?: string[];
  onValueChange?: (value: string[]) => void;
  disabled?: boolean;
  keepMounted?: boolean;
}) {
  return (
    <Base.Root
      multiple={multiple}
      value={value}
      defaultValue={defaultValue}
      onValueChange={onValueChange}
      disabled={disabled}
      className="cr-accordion"
    >
      {items.map((item) => (
        <Base.Item
          key={item.value}
          value={item.value}
          disabled={item.disabled}
          className="cr-accordion-item"
        >
          <Base.Header>
            <Base.Trigger className="cr-accordion-trigger">
              {item.title}
              <span aria-hidden="true">
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.75"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  aria-hidden="true"
                >
                  <path d="M12 5v14M5 12h14" />
                </svg>
              </span>
            </Base.Trigger>
          </Base.Header>
          <Base.Panel keepMounted={keepMounted} className="cr-accordion-panel">
            {item.content}
          </Base.Panel>
        </Base.Item>
      ))}
    </Base.Root>
  );
}
```


---

# components/alert-dialog

---
title: "Alert Dialog"
description: "A confirmation dialog with focus management, keyboard dismissal and a labelled title."
---

Interactive preview: https://ui.coderocket.app/docs/components/alert-dialog

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { AlertDialog } from './components/ui/alert-dialog';

<AlertDialog trigger="Preview confirmation" title="Review before continuing" description="Important changes deserve a final check." closeLabel="Cancel"><p>This is a confirmation preview. No data will be changed. In your application, explain the consequences here before asking the user to confirm.</p></AlertDialog>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Focus trap
- Escape dismisses
- Focus returns to trigger

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { AlertDialog as Base } from "@base-ui/react/alert-dialog";
import type { ComponentProps, ReactNode } from "react";
import { cx, usePortalContainer } from "./utils";
export function AlertDialog({
  trigger,
  triggerRender,
  title,
  description,
  children,
  open,
  onOpenChange,
  initialFocus,
  finalFocus,
  className,
  footer,
  closeLabel = "Close",
  ...rootProps
}: Omit<ComponentProps<typeof Base.Root>, "children"> & {
  trigger?: ReactNode;
  /** Replace the trigger element without nesting interactive controls. */
  triggerRender?: ComponentProps<typeof Base.Trigger>["render"];
  className?: string;
  title: string;
  description?: string;
  children: ReactNode;
  initialFocus?: ComponentProps<typeof Base.Popup>["initialFocus"];
  finalFocus?: ComponentProps<typeof Base.Popup>["finalFocus"];
  footer?: ReactNode;
  closeLabel?: string;
}) {
  const container = usePortalContainer();
  return (
    <Base.Root {...rootProps} open={open} onOpenChange={onOpenChange}>
      {(trigger != null || triggerRender != null) && (
        <Base.Trigger
          render={triggerRender}
          className="cr-button"
          data-variant="outline"
        >
          {trigger}
        </Base.Trigger>
      )}
      <Base.Portal container={container}>
        <Base.Backdrop className="cr-backdrop" />
        <Base.Viewport className="cr-modal-viewport" data-kind="alert-dialog">
          <Base.Popup
            className={cx("cr-modal cr-alert-dialog", className)}
            initialFocus={initialFocus}
            finalFocus={finalFocus}
          >
            <header className="cr-modal-header">
              <Base.Title className="cr-modal-title">{title}</Base.Title>
              {description && (
                <Base.Description className="cr-description">
                  {description}
                </Base.Description>
              )}
              <Base.Close
                className="cr-modal-close"
                aria-label={closeLabel === "Close" ? "Close alert" : closeLabel}
              >
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.75"
                  strokeLinecap="round"
                  aria-hidden="true"
                >
                  <path d="m6 6 12 12M18 6 6 18" />
                </svg>
              </Base.Close>
            </header>
            <div className="cr-modal-content">{children}</div>
            {footer !== null && (
              <footer className="cr-modal-footer">
                {footer ?? (
                  <Base.Close className="cr-button" data-variant="secondary">
                    {closeLabel}
                  </Base.Close>
                )}
              </footer>
            )}
          </Base.Popup>
        </Base.Viewport>
      </Base.Portal>
    </Base.Root>
  );
}
```


---

# components/alert

---
title: "Alert"
description: "A contextual message with optional assertive announcement."
---

Interactive preview: https://ui.coderocket.app/docs/components/alert

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Alert } from './components/ui/alert';

<Alert title="Everything is up to date." variant="success">Your changes have been saved.</Alert>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { HTMLAttributes, ReactNode } from "react";
import { cx } from "./utils";
export function Alert({
  title,
  variant = "info",
  announce = false,
  role,
  children,
  className,
  ...props
}: Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
  title?: ReactNode;
  variant?: "info" | "success" | "warning" | "destructive";
  announce?: boolean;
}) {
  return (
    <div
      {...props}
      role={role ?? (announce ? "alert" : undefined)}
      className={cx("cr-alert", className)}
      data-variant={variant}
    >
      {title && <strong>{title}</strong>}
      {children && <div>{children}</div>}
    </div>
  );
}
```


---

# components/avatar

---
title: "Avatar"
description: "An image with an accessible fallback for a person or team."
---

Interactive preview: https://ui.coderocket.app/docs/components/avatar

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Avatar } from './components/ui/avatar';

<Avatar name="Alex Morgan"/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps, CSSProperties } from "react";
import { Avatar as Base } from "@base-ui/react/avatar";
import { cx } from "./utils";
export function Avatar({
  src,
  name,
  size = 36,
  className,
  style,
  ...props
}: Omit<
  ComponentProps<typeof Base.Root>,
  "className" | "children" | "style"
> & {
  src?: string;
  name: string;
  size?: number;
  className?: string;
  style?: CSSProperties;
}) {
  const initials =
    name
      .trim()
      .split(/\s+/)
      .slice(0, 2)
      .map((word) => Array.from(word)[0] ?? "")
      .join("")
      .toLocaleUpperCase() || "?";
  return (
    <Base.Root
      {...props}
      className={cx("cr-avatar", className)}
      style={{ width: size, height: size, ...style }}
    >
      <Base.Image src={src} alt={name} className="cr-avatar-image" />
      <Base.Fallback role="img" aria-label={name || "Avatar"}>
        {initials}
      </Base.Fallback>
    </Base.Root>
  );
}
```


---

# components/badge

---
title: "Badge"
description: "A compact non-interactive status or label."
---

Interactive preview: https://ui.coderocket.app/docs/components/badge

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Badge } from './components/ui/badge';

<Badge variant="success">Active</Badge>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { HTMLAttributes } from "react";
import { cx } from "./utils";
export function Badge({
  variant = "secondary",
  className,
  ...props
}: HTMLAttributes<HTMLSpanElement> & {
  variant?:
    "primary" | "secondary" | "success" | "warning" | "destructive" | "outline";
}) {
  return (
    <span
      {...props}
      data-variant={variant}
      className={cx("cr-badge", className)}
    />
  );
}
```


---

# components/breadcrumb

---
title: "Breadcrumb"
description: "A semantic path through your application."
---

Interactive preview: https://ui.coderocket.app/docs/components/breadcrumb

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Breadcrumb } from './components/ui/breadcrumb';

<Breadcrumb items={[{label:"Workspace",href:"#workspace"},{label:"Settings",href:"#settings"},{label:"Profile"}]}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
export function Breadcrumb({
  items,
  label = "Breadcrumb",
}: {
  items: Array<{ label: string; href?: string }>;
  label?: string;
}) {
  return (
    <nav aria-label={label}>
      <ol className="cr-breadcrumb">
        {items.map((item, index) => (
          <li key={index}>
            {index > 0 && (
              <svg
                className="cr-breadcrumb-separator"
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.75"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <path d="m9 6 6 6-6 6" />
              </svg>
            )}
            {item.href && index < items.length - 1 ? (
              <a href={item.href}>{item.label}</a>
            ) : (
              <span
                aria-current={index === items.length - 1 ? "page" : undefined}
              >
                {item.label}
              </span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}
```


---

# components/button

---
title: "Button"
description: "An action with six visual variants, three sizes and a loading state."
---

Interactive preview: https://ui.coderocket.app/docs/components/button

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Button } from './components/ui/button';

<Button>Continue</Button>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps } from "react";
import { Button as BaseButton } from "@base-ui/react/button";
import { cx } from "./utils";
export type ButtonProps = Omit<
  ComponentProps<typeof BaseButton>,
  "className"
> & {
  className?: string;
  variant?:
    "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
  size?: "sm" | "md" | "lg";
  loading?: boolean;
};
export function Button({
  className,
  variant = "primary",
  size = "md",
  loading = false,
  disabled,
  children,
  ...props
}: ButtonProps) {
  return (
    <BaseButton
      {...props}
      disabled={disabled || loading}
      aria-busy={loading || props["aria-busy"] || undefined}
      className={cx("cr-button", className)}
      data-variant={variant}
      data-size={size}
    >
      {loading && <span className="cr-spinner" aria-hidden="true" />}
      {children}
    </BaseButton>
  );
}
```


---

# components/calendar

---
title: "Calendar"
description: "A Gregorian single-date or range calendar with month/year selection, disabled dates, week numbers and keyboard navigation."
---

Interactive preview: https://ui.coderocket.app/docs/components/calendar

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Calendar } from './components/ui/calendar';

<Calendar defaultValue="2026-09-17" onValueChange={date=>console.info(date)}/>
```

## Range selection and constraints

```tsx
<Calendar
  mode="range"
  defaultValue={{ start: "2026-10-05", end: "2026-10-09" }}
  numberOfMonths={2}
  locale="fr-FR"
  weekStartsOn={1}
  showWeekNumbers
  disabledDates={["2026-10-15"]}
/>
```

Choose the start, then the end. Reverse selections are normalized into chronological order. Use `min` and `max` for inclusive boundaries and `excludeDisabled` to control whether a range can cross unavailable dates. The status explains an incomplete or invalid range. Select a month or enter a year to jump directly; `onMonthChange` observes navigation.

Calendar renders the selection interface itself. DatePicker adds the trigger, editable date fields, shortcuts, clearing, form values and optional Apply/Cancel confirmation.

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Button](/docs/components/button).

## Behavior and accessibility

- Date-only ISO values are independent of time zones and display locale.
- Arrow keys, Home/End, PageUp/PageDown and Shift+PageUp/PageDown move through days, months and years.
- Disabled dates can be listed or supplied as a predicate; range selection can reject unavailable dates inside an interval.
- Use `numberOfMonths={2}` for two months and showWeekNumbers for ISO week numbers.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import {
  useId,
  useRef,
  useState,
  useEffect,
  useEffectEvent,
  useSyncExternalStore,
  type KeyboardEvent,
  type ReactNode,
} from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Button } from "./button";
import { cx } from "./utils";

/** Values are Gregorian calendar dates, never timestamps or local-midnight instants. */
export type DateRange = { start: string; end: string };
export type DisabledDates = readonly string[] | ((date: string) => boolean);
export type CalendarLabels = {
  previousMonth: string;
  nextMonth: string;
  month: string;
  year: string;
  week: string;
  chooseDate: string;
  chooseRange: string;
  chooseEnd: string;
  unavailableRange: string;
  today: string;
  yesterday: string;
  last7Days: string;
  last30Days: string;
  thisMonth: string;
  lastMonth: string;
  clear: string;
  apply: string;
  cancel: string;
  close: string;
  startDate: string;
  endDate: string;
  invalidDate: string;
};
export function calendarLabels(
  locale = "en",
  overrides?: Partial<CalendarLabels>,
): CalendarLabels {
  return {
    ...(locale.toLowerCase().startsWith("fr")
      ? {
          previousMonth: "Mois précédent",
          nextMonth: "Mois suivant",
          month: "Mois",
          year: "Année",
          week: "Semaine",
          chooseDate: "Choisir une date",
          chooseRange: "Choisir une période",
          chooseEnd: "Choisissez la date de fin.",
          unavailableRange: "Cette période contient une date indisponible.",
          today: "Aujourd’hui",
          yesterday: "Hier",
          last7Days: "7 derniers jours",
          last30Days: "30 derniers jours",
          thisMonth: "Ce mois-ci",
          lastMonth: "Le mois dernier",
          clear: "Effacer",
          apply: "Appliquer",
          cancel: "Annuler",
          close: "Fermer le calendrier",
          startDate: "Date de début",
          endDate: "Date de fin",
          invalidDate: "Choisissez une date ou une période disponible.",
        }
      : {
          previousMonth: "Previous month",
          nextMonth: "Next month",
          month: "Month",
          year: "Year",
          week: "Week",
          chooseDate: "Choose a date",
          chooseRange: "Choose a date range",
          chooseEnd: "Choose the end date.",
          unavailableRange: "This range contains an unavailable date.",
          today: "Today",
          yesterday: "Yesterday",
          last7Days: "Last 7 days",
          last30Days: "Last 30 days",
          thisMonth: "This month",
          lastMonth: "Last month",
          clear: "Clear",
          apply: "Apply",
          cancel: "Cancel",
          close: "Close calendar",
          startDate: "Start date",
          endDate: "End date",
          invalidDate: "Choose an available date or date range.",
        }),
    ...overrides,
  };
}
export function parseCalendarDate(iso: string): Date {
  if (
    !/^\d{4}-\d{2}-\d{2}$/.test(iso) ||
    iso < "0001-01-01" ||
    iso > "9999-12-31"
  )
    throw new Error("Expected an ISO calendar date");
  const date = new Date(`${iso}T12:00:00Z`);
  if (
    !Number.isFinite(date.valueOf()) ||
    date.toISOString().slice(0, 10) !== iso
  )
    throw new Error("Invalid calendar date");
  return date;
}
export function calendarISO(date: Date) {
  return date.toISOString().slice(0, 10);
}
export function calendarToday() {
  const now = new Date();
  return `${String(now.getFullYear()).padStart(4, "0")}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
}
function subscribeToCalendarDay(notify: () => void) {
  const timer = setInterval(notify, 60_000);
  window.addEventListener("focus", notify);
  return () => {
    clearInterval(timer);
    window.removeEventListener("focus", notify);
  };
}
const serverCalendarDay = () => "";
/** Local-day features appear after hydration, never from the server's timezone. */
export function useCalendarToday() {
  return useSyncExternalStore(
    subscribeToCalendarDay,
    calendarToday,
    serverCalendarDay,
  );
}
export function addCalendarDays(value: string, amount: number) {
  const date = parseCalendarDate(value);
  date.setUTCDate(date.getUTCDate() + amount);
  return date.getUTCFullYear() < 1
    ? "0001-01-01"
    : date.getUTCFullYear() > 9999
      ? "9999-12-31"
      : calendarISO(date);
}
export function startOfCalendarMonth(value: string) {
  return value.slice(0, 7) + "-01";
}
export function addCalendarMonths(value: string, amount: number) {
  const date = parseCalendarDate(value),
    day = date.getUTCDate();
  date.setUTCDate(1);
  date.setUTCMonth(date.getUTCMonth() + amount);
  if (date.getUTCFullYear() < 1) return "0001-01-01";
  if (date.getUTCFullYear() > 9999) return "9999-12-31";
  const last = new Date(date);
  last.setUTCMonth(last.getUTCMonth() + 1);
  last.setUTCDate(0);
  date.setUTCDate(Math.min(day, last.getUTCDate()));
  return calendarISO(date);
}
export function endOfCalendarMonth(value: string) {
  const date = parseCalendarDate(value);
  date.setUTCMonth(date.getUTCMonth() + 1, 0);
  return calendarISO(date);
}
export function isoWeekNumber(value: string) {
  const date = parseCalendarDate(value);
  date.setUTCDate(date.getUTCDate() + 4 - (date.getUTCDay() || 7));
  const first = new Date(date);
  first.setUTCMonth(0, 1);
  return Math.ceil(((date.valueOf() - first.valueOf()) / 86400000 + 1) / 7);
}
export function isCalendarDateDisabled(
  value: string,
  options: { min?: string; max?: string; disabledDates?: DisabledDates } = {},
) {
  return (
    value < (options.min ?? "0001-01-01") ||
    value > (options.max ?? "9999-12-31") ||
    (typeof options.disabledDates === "function"
      ? options.disabledDates(value)
      : (options.disabledDates?.includes(value) ?? false))
  );
}
export function isCalendarRangeAvailable(
  range: DateRange,
  options: {
    min?: string;
    max?: string;
    disabledDates?: DisabledDates;
    excludeDisabled?: boolean;
  } = {},
) {
  try {
    parseCalendarDate(range.start);
    parseCalendarDate(range.end);
  } catch {
    return false;
  }
  if (
    range.start > range.end ||
    isCalendarDateDisabled(range.start, options) ||
    isCalendarDateDisabled(range.end, options)
  )
    return false;
  if (!options.disabledDates || options.excludeDisabled === false) return true;
  if (Array.isArray(options.disabledDates))
    return !options.disabledDates.some(
      (date) => date >= range.start && date <= range.end,
    );
  for (
    let date = range.start;
    date < range.end;
    date = addCalendarDays(date, 1)
  )
    if (isCalendarDateDisabled(date, options)) return false;
  return true;
}
export type CalendarBaseProps = {
  label?: string;
  min?: string;
  max?: string;
  locale?: string;
  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
  disabled?: boolean;
  disabledDates?: DisabledDates;
  excludeDisabled?: boolean;
  startFrom?: string;
  numberOfMonths?: 1 | 2;
  showWeekNumbers?: boolean;
  weekdayFormat?: "narrow" | "short" | "long";
  monthSelection?: boolean;
  labels?: Partial<CalendarLabels>;
  previousMonthLabel?: string;
  nextMonthLabel?: string;
  className?: string;
  renderDay?: (date: string) => ReactNode;
  onMonthChange?: (month: string) => void;
  /** Reports a range awaiting its second endpoint. */
  onSelectionPendingChange?: (pending: boolean) => void;
};
export type CalendarProps = CalendarBaseProps &
  (
    | {
        mode?: "single";
        value?: string | null;
        defaultValue?: string;
        onValueChange?: (date: string) => void;
      }
    | {
        mode: "range";
        value?: DateRange | null;
        defaultValue?: DateRange;
        onValueChange?: (range: DateRange | null) => void;
      }
  );

export function Calendar(props: CalendarProps) {
  const {
    min = "0001-01-01",
    max = "9999-12-31",
    locale = "en",
    weekStartsOn = 1,
    disabled = false,
    disabledDates,
    excludeDisabled = true,
    startFrom,
    numberOfMonths = props.mode === "range" ? 2 : 1,
    showWeekNumbers = false,
    weekdayFormat = "short",
    monthSelection = true,
    renderDay,
    onMonthChange,
    className,
  } = props;
  const labels = calendarLabels(locale, props.labels),
    label =
      props.label ??
      (props.mode === "range" ? labels.chooseRange : labels.chooseDate);
  const [internal, setInternal] = useState<string | DateRange | null>(
    props.defaultValue ?? null,
  );
  const chosen = props.value !== undefined ? props.value : internal;
  const selected = typeof chosen === "string" ? chosen || null : null;
  const range = chosen && typeof chosen !== "string" ? chosen : null;
  parseCalendarDate(min);
  parseCalendarDate(max);
  if (min > max) throw new Error("Calendar min exceeds max");
  if (selected) parseCalendarDate(selected);
  if (range) {
    parseCalendarDate(range.start);
    parseCalendarDate(range.end);
  }
  if (startFrom) parseCalendarDate(startFrom);
  const clamp = (date: string) => (date < min ? min : date > max ? max : date);
  const today = useCalendarToday();
  const [focused, setFocusDate] = useState<string | null>(null);
  const focusDate =
    focused ??
    clamp(selected ?? range?.start ?? startFrom ?? (today || "1970-01-01"));
  const [viewedMonth, setMonth] = useState<string | null>(null);
  const month = viewedMonth ?? startOfCalendarMonth(focusDate);
  const [anchor, setAnchor] = useState<string | null>(null),
    [hovered, setHovered] = useState<string | null>(null),
    [status, setStatus] = useState("");
  const synchronize = useEffectEvent(() => {
    if (!today && !selected && !range && !startFrom) return;
    const next = clamp(selected ?? range?.start ?? focusDate);
    setFocusDate(next);
    setMonth(startOfCalendarMonth(next));
    setAnchor(null);
    setHovered(null);
    props.onSelectionPendingChange?.(false);
  });
  useEffect(() => {
    synchronize();
  }, [selected, range?.start, range?.end, min, max, today]);
  const grid = useRef<HTMLDivElement>(null),
    headingId = useId();
  if (!today && !selected && !range && !startFrom)
    return (
      <div
        className={cx("cr-calendar cr-calendar-skeleton", className)}
        role="status"
        aria-label={label}
        aria-busy="true"
      >
        <div className="cr-calendar-months">
          {Array.from({ length: numberOfMonths }, (_, index) => (
            <div className="cr-calendar-month" key={index} aria-hidden="true">
              <span className="cr-calendar-skeleton-caption" />
              <div className="cr-calendar-skeleton-days">
                {Array.from({ length: 42 }, (_, day) => (
                  <span key={day} />
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  const months = Array.from({ length: numberOfMonths }, (_, index) =>
    startOfCalendarMonth(addCalendarMonths(month, index)),
  ).filter((date, index, all) => all.indexOf(date) === index);
  const unavailable = (date: string) =>
    disabled || isCalendarDateDisabled(date, { min, max, disabledDates });
  const fullDate = new Intl.DateTimeFormat(locale, {
    dateStyle: "full",
    timeZone: "UTC",
    calendar: "gregory",
  });
  const monthName = new Intl.DateTimeFormat(locale, {
    month: "long",
    timeZone: "UTC",
    calendar: "gregory",
  });
  const completeMonth = new Intl.DateTimeFormat(locale, {
    month: "long",
    year: "numeric",
    timeZone: "UTC",
    calendar: "gregory",
  });
  // Exactly one date remains in the keyboard tab order, including when the preferred date is disabled.
  const visibleDates: string[] = [];
  for (const current of months) {
    const date = parseCalendarDate(current),
      offset = (date.getUTCDay() - weekStartsOn + 7) % 7;
    for (let index = 0; index < 42; index++) {
      const day = new Date(date);
      day.setUTCDate(1 - offset + index);
      if (
        day.getUTCFullYear() >= 1 &&
        day.getUTCFullYear() <= 9999 &&
        (months.length === 1 || day.getUTCMonth() === date.getUTCMonth())
      )
        visibleDates.push(calendarISO(day));
    }
  }
  const tabDate =
    visibleDates.includes(focusDate) && !unavailable(focusDate)
      ? focusDate
      : visibleDates.find((date) => !unavailable(date));
  function changeMonth(next: string, focus = false) {
    const target = clamp(next),
      nextMonth = startOfCalendarMonth(target);
    setFocusDate(target);
    setMonth(nextMonth);
    onMonthChange?.(nextMonth);
    if (focus)
      requestAnimationFrame(() =>
        grid.current
          ?.querySelector<HTMLButtonElement>(`[data-date="${target}"]`)
          ?.focus(),
      );
  }
  function move(next: string, direction = 1) {
    let target = clamp(next);
    // Skip unavailable dates while bounding navigation to the configured date interval.
    let searched = 0;
    while (unavailable(target)) {
      // Bound arbitrary predicates so a fully disabled calendar never freezes the UI.
      if (++searched > 366) return;
      const candidate = addCalendarDays(target, direction);
      if (candidate === target || candidate < min || candidate > max) return;
      target = candidate;
    }
    setFocusDate(target);
    if (!visibleDates.includes(target)) {
      setMonth(startOfCalendarMonth(target));
      onMonthChange?.(startOfCalendarMonth(target));
    }
    requestAnimationFrame(() =>
      grid.current
        ?.querySelector<HTMLButtonElement>(`[data-date="${target}"]`)
        ?.focus(),
    );
  }
  function keyboard(event: KeyboardEvent<HTMLButtonElement>, date: string) {
    let next: string | undefined,
      direction = 1;
    const day = (parseCalendarDate(date).getUTCDay() - weekStartsOn + 7) % 7;
    if (event.key === "ArrowRight") next = addCalendarDays(date, 1);
    if (event.key === "ArrowLeft") {
      next = addCalendarDays(date, -1);
      direction = -1;
    }
    if (event.key === "ArrowDown") next = addCalendarDays(date, 7);
    if (event.key === "ArrowUp") {
      next = addCalendarDays(date, -7);
      direction = -1;
    }
    if (event.key === "Home") {
      next = addCalendarDays(date, -day);
      direction = 1;
    }
    if (event.key === "End") {
      next = addCalendarDays(date, 6 - day);
      direction = -1;
    }
    if (event.key === "PageUp" || event.key === "PageDown") {
      direction = event.key === "PageUp" ? -1 : 1;
      next = addCalendarMonths(date, direction * (event.shiftKey ? 12 : 1));
    }
    if (event.key === "Escape" && anchor) {
      event.preventDefault();
      event.stopPropagation();
      setAnchor(null);
      setHovered(null);
      setStatus("");
      props.onSelectionPendingChange?.(false);
    }
    if (next) {
      event.preventDefault();
      move(next, direction);
    }
  }
  function choose(date: string) {
    if (unavailable(date)) return;
    setFocusDate(date);
    setStatus("");
    if (props.mode === "range") {
      if (!anchor) {
        setAnchor(date);
        props.onSelectionPendingChange?.(true);
        setHovered(null);
        setStatus(labels.chooseEnd);
        return;
      }
      const next = {
        start: date < anchor ? date : anchor,
        end: date < anchor ? anchor : date,
      };
      if (
        !isCalendarRangeAvailable(next, {
          min,
          max,
          disabledDates,
          excludeDisabled,
        })
      ) {
        setStatus(labels.unavailableRange);
        return;
      }
      if (props.value === undefined) setInternal(next);
      props.onValueChange?.(next);
      props.onSelectionPendingChange?.(false);
      setAnchor(null);
      setHovered(null);
    } else {
      if (props.value === undefined) setInternal(date);
      props.onValueChange?.(date);
    }
  }
  const previewEnd = hovered ?? focusDate,
    preview = anchor
      ? {
          start: anchor < previewEnd ? anchor : previewEnd,
          end: anchor < previewEnd ? previewEnd : anchor,
        }
      : null;
  const displayedRange = preview ?? range;
  const minYear = Number(min.slice(0, 4)),
    maxYear = Number(max.slice(0, 4));
  return (
    <div
      className={cx("cr-calendar", className)}
      data-months={months.length}
      ref={grid}
    >
      <div className="cr-calendar-navigation">
        <Button
          variant="ghost"
          size="sm"
          aria-label={props.previousMonthLabel ?? labels.previousMonth}
          disabled={disabled || month <= startOfCalendarMonth(min)}
          onClick={() => changeMonth(addCalendarMonths(month, -1))}
        >
          <ChevronLeft size={16} aria-hidden="true" />
        </Button>
        <span id={headingId} className="cr-sr-only" aria-live="polite">
          {months
            .map((date) => completeMonth.format(parseCalendarDate(date)))
            .join(" – ")}
        </span>
        <Button
          variant="ghost"
          size="sm"
          aria-label={props.nextMonthLabel ?? labels.nextMonth}
          disabled={disabled || months.at(-1)! >= startOfCalendarMonth(max)}
          onClick={() => changeMonth(addCalendarMonths(month, 1))}
        >
          <ChevronRight size={16} aria-hidden="true" />
        </Button>
      </div>
      <div className="cr-calendar-months">
        {months.map((current, monthIndex) => {
          const date = parseCalendarDate(current),
            offset = (date.getUTCDay() - weekStartsOn + 7) % 7;
          const monthId = `${headingId}-${monthIndex}`;
          return (
            <section className="cr-calendar-month" key={monthIndex}>
              <div className="cr-calendar-caption">
                <span className="cr-sr-only" id={monthId}>
                  {completeMonth.format(date)}
                </span>
                {monthSelection ? (
                  <>
                    <select
                      aria-label={`${labels.month}${months.length > 1 ? ` ${monthIndex + 1}` : ""}`}
                      value={date.getUTCMonth()}
                      disabled={disabled}
                      onChange={(event) => {
                        const next = new Date(date);
                        next.setUTCMonth(Number(event.target.value));
                        changeMonth(
                          addCalendarMonths(calendarISO(next), -monthIndex),
                        );
                      }}
                    >
                      {Array.from({ length: 12 }, (_, index) => {
                        const option = new Date(date);
                        option.setUTCMonth(index);
                        const text = calendarISO(option);
                        return (
                          <option
                            key={index}
                            value={index}
                            disabled={
                              endOfCalendarMonth(text) < min || text > max
                            }
                          >
                            {monthName.format(option)}
                          </option>
                        );
                      })}
                    </select>
                    <input
                      type="number"
                      inputMode="numeric"
                      aria-label={`${labels.year}${months.length > 1 ? ` ${monthIndex + 1}` : ""}`}
                      defaultValue={date.getUTCFullYear()}
                      key={date.getUTCFullYear()}
                      min={minYear}
                      max={maxYear}
                      disabled={disabled}
                      onKeyDown={(event) => {
                        if (event.key === "Enter") {
                          event.preventDefault();
                          event.currentTarget.blur();
                        }
                      }}
                      onBlur={(event) => {
                        const year = Number(event.currentTarget.value);
                        if (
                          !Number.isInteger(year) ||
                          year < minYear ||
                          year > maxYear
                        ) {
                          event.currentTarget.value = String(
                            date.getUTCFullYear(),
                          );
                          return;
                        }
                        const next = new Date(date);
                        next.setUTCFullYear(year);
                        changeMonth(
                          addCalendarMonths(calendarISO(next), -monthIndex),
                        );
                      }}
                    />
                  </>
                ) : (
                  <strong>{completeMonth.format(date)}</strong>
                )}
              </div>
              <div
                role="grid"
                aria-label={label}
                aria-describedby={monthId}
                aria-multiselectable={props.mode === "range" || undefined}
              >
                <div
                  role="row"
                  className="cr-calendar-week"
                  data-week-numbers={showWeekNumbers || undefined}
                >
                  {showWeekNumbers && (
                    <span role="columnheader" aria-label={labels.week}>
                      #
                    </span>
                  )}
                  {Array.from({ length: 7 }, (_, index) => {
                    const day = parseCalendarDate(
                      addCalendarDays("2024-01-07", (index + weekStartsOn) % 7),
                    );
                    return (
                      <span
                        key={index}
                        role="columnheader"
                        aria-label={new Intl.DateTimeFormat(locale, {
                          weekday: "long",
                          timeZone: "UTC",
                          calendar: "gregory",
                        }).format(day)}
                      >
                        {new Intl.DateTimeFormat(locale, {
                          weekday: weekdayFormat,
                          timeZone: "UTC",
                          calendar: "gregory",
                        }).format(day)}
                      </span>
                    );
                  })}
                </div>
                {Array.from({ length: 6 }, (_, week) => (
                  <div
                    key={week}
                    role="row"
                    className="cr-calendar-week"
                    data-week-numbers={showWeekNumbers || undefined}
                  >
                    {showWeekNumbers && (
                      <span
                        role="rowheader"
                        className="cr-calendar-week-number"
                      >
                        {isoWeekNumber(
                          addCalendarDays(
                            current,
                            week * 7 + ((4 - weekStartsOn + 7) % 7) - offset,
                          ),
                        )}
                      </span>
                    )}
                    {Array.from({ length: 7 }, (_, dayIndex) => {
                      const day = new Date(date);
                      day.setUTCDate(1 - offset + week * 7 + dayIndex);
                      const outside = day.getUTCMonth() !== date.getUTCMonth();
                      if (
                        day.getUTCFullYear() < 1 ||
                        day.getUTCFullYear() > 9999 ||
                        (months.length > 1 && outside)
                      )
                        return <span role="gridcell" key={dayIndex} />;
                      const text = calendarISO(day),
                        blocked = unavailable(text),
                        inRange =
                          !!displayedRange &&
                          text >= displayedRange.start &&
                          text <= displayedRange.end;
                      const endpoint =
                          !!displayedRange &&
                          (text === displayedRange.start ||
                            text === displayedRange.end),
                        isSelected =
                          props.mode === "range"
                            ? !anchor && inRange
                            : selected === text;
                      return (
                        <div
                          role="gridcell"
                          aria-selected={isSelected}
                          aria-disabled={blocked || undefined}
                          data-in-range={inRange || undefined}
                          data-range-start={
                            text === displayedRange?.start || undefined
                          }
                          data-range-end={
                            text === displayedRange?.end || undefined
                          }
                          key={dayIndex}
                        >
                          <button
                            type="button"
                            data-date={text}
                            data-outside={outside || undefined}
                            data-selected={
                              endpoint || selected === text || undefined
                            }
                            data-preview={(!!anchor && inRange) || undefined}
                            aria-label={fullDate.format(day)}
                            aria-current={text === today ? "date" : undefined}
                            aria-disabled={blocked || undefined}
                            disabled={blocked}
                            tabIndex={!blocked && text === tabDate ? 0 : -1}
                            onFocus={() => {
                              setFocusDate(text);
                              if (anchor) setHovered(text);
                            }}
                            onMouseEnter={() => {
                              if (anchor) setHovered(text);
                            }}
                            onKeyDown={(event) => keyboard(event, text)}
                            onClick={() => choose(text)}
                          >
                            {renderDay ? renderDay(text) : day.getUTCDate()}
                          </button>
                        </div>
                      );
                    })}
                  </div>
                ))}
              </div>
            </section>
          );
        })}
      </div>
      <div
        className={status ? "cr-calendar-status" : "cr-sr-only"}
        role="status"
        aria-live="polite"
      >
        {status}
      </div>
    </div>
  );
}
```


---

# components/card

---
title: "Card"
description: "A surface that groups related content, with optional header and footer."
---

Interactive preview: https://ui.coderocket.app/docs/components/card

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Card } from './components/ui/card';

<Card title="Project settings" description="Make this workspace your own.">Your content goes here.</Card>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { HTMLAttributes, ReactNode } from "react";
import { cx } from "./utils";
export function Card({
  title,
  description,
  footer,
  children,
  className,
  ...props
}: Omit<HTMLAttributes<HTMLElement>, "title"> & {
  title?: ReactNode;
  description?: ReactNode;
  footer?: ReactNode;
}) {
  return (
    <section {...props} className={cx("cr-card", className)}>
      {(title || description) && (
        <header className="cr-card-header">
          {title && <h3 className="cr-card-title">{title}</h3>}
          {description && <p className="cr-description">{description}</p>}
        </header>
      )}
      <div className="cr-card-body">{children}</div>
      {footer && <footer className="cr-card-footer">{footer}</footer>}
    </section>
  );
}
```


---

# components/checkbox

---
title: "Checkbox"
description: "A labelled checkbox with checked and indeterminate states."
---

Interactive preview: https://ui.coderocket.app/docs/components/checkbox

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Checkbox } from './components/ui/checkbox';

<Checkbox label="Send me product updates" defaultChecked/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps, ReactNode } from "react";
import { Checkbox as Base } from "@base-ui/react/checkbox";
import { cx } from "./utils";
export function Checkbox({
  label,
  className,
  ...props
}: Omit<ComponentProps<typeof Base.Root>, "className"> & {
  label: ReactNode;
  className?: string;
}) {
  return (
    <label
      className="cr-check-label"
      data-disabled={props.disabled || undefined}
    >
      <Base.Root {...props} className={cx("cr-checkbox", className)}>
        <Base.Indicator className="cr-check-indicator">
          <svg
            width="13"
            height="13"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="3"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <path d={props.indeterminate ? "M5 12h14" : "m5 12 4 4L19 6"} />
          </svg>
        </Base.Indicator>
      </Base.Root>
      <span>{label}</span>
    </label>
  );
}
```


---

# components/collapsible

---
title: "Collapsible"
description: "An optional content section with a disclosure trigger."
---

Interactive preview: https://ui.coderocket.app/docs/components/collapsible

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Collapsible } from './components/ui/collapsible';

<Collapsible title="Advanced options">Additional settings for this workspace.</Collapsible>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Collapsible as Base } from "@base-ui/react/collapsible";
import type { ReactNode } from "react";
export function Collapsible({
  title,
  children,
  defaultOpen = false,
  open,
  onOpenChange,
  disabled = false,
  keepMounted = false,
}: {
  title: string;
  children: ReactNode;
  defaultOpen?: boolean;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  disabled?: boolean;
  keepMounted?: boolean;
}) {
  return (
    <Base.Root
      defaultOpen={defaultOpen}
      open={open}
      onOpenChange={onOpenChange}
      disabled={disabled}
      className="cr-collapsible"
    >
      <Base.Trigger
        className="cr-button cr-collapsible-trigger"
        data-variant="ghost"
      >
        {title}
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.75"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="m6 9 6 6 6-6" />
        </svg>
      </Base.Trigger>
      <Base.Panel keepMounted={keepMounted} className="cr-collapsible-panel">
        {children}
      </Base.Panel>
    </Base.Root>
  );
}
```


---

# components/combobox

---
title: "Combobox"
description: "Searchable single selection with controlled search, disabled options, optional clearing and form support."
---

Interactive preview: https://ui.coderocket.app/docs/components/combobox

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Combobox } from './components/ui/combobox';

<Combobox label="Framework" items={["React","Vue","Svelte","SolidJS"]}/>
```

## Search, unavailable options and clearing

`inputValue` / `onInputValueChange` control the search text; `value` / `onValueChange` control the selected value. These are independent. Pass `filter={null}` when your application supplies already filtered results, and keep server requests in your application.

```tsx
<Combobox
  label="Framework"
  name="framework"
  items={["React", "Vue", "Svelte"]}
  isItemDisabled={(item) => item !== "React"}
  clearable
  emptyLabel="No framework found."
/>
```

The default combobox selects one string value. Use Select with `multiple` for a list of multiple choices. Complex objects and asynchronous data loading belong to your application's integration.

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps } from "react";
import { Combobox as Base } from "@base-ui/react/combobox";
import { cx, usePortalContainer } from "./utils";
export type ComboboxProps = Omit<
  Base.Root.Props<string>,
  "children" | "items" | "filteredItems" | "multiple" | "virtualized" | "inline"
> & {
  label: string;
  items: readonly string[];
  filteredItems?: readonly string[];
  placeholder?: string;
  className?: string;
  inputProps?: Omit<
    ComponentProps<typeof Base.Input>,
    "className" | "render" | "value" | "defaultValue" | "disabled" | "required"
  >;
  isItemDisabled?: (item: string) => boolean;
  emptyLabel?: string;
  clearable?: boolean;
};
export function Combobox({
  label,
  items,
  placeholder = "Search…",
  className,
  inputProps,
  isItemDisabled,
  emptyLabel = "No results found.",
  clearable = false,
  ...props
}: ComboboxProps) {
  const container = usePortalContainer();
  return (
    <Base.Root {...props} items={items}>
      <Base.InputGroup className={cx("cr-input-group", className)}>
        <Base.Input
          aria-label={label}
          placeholder={placeholder}
          {...inputProps}
          className="cr-input"
        />
        {clearable && (
          <Base.Clear aria-label={"Clear " + label} className="cr-input-addon">
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.75"
              strokeLinecap="round"
              aria-hidden="true"
            >
              <path d="m6 6 12 12M6 18 18 6" />
            </svg>
          </Base.Clear>
        )}
        <Base.Trigger aria-label={"Open " + label} className="cr-input-addon">
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.75"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <path d="m6 9 6 6 6-6" />
          </svg>
        </Base.Trigger>
      </Base.InputGroup>
      <Base.Portal container={container}>
        <Base.Positioner sideOffset={6} className="cr-positioner">
          <Base.Popup className="cr-popup">
            <Base.Empty className="cr-menu-item">{emptyLabel}</Base.Empty>
            <Base.List>
              {(item: string) => (
                <Base.Item
                  key={item}
                  value={item}
                  disabled={isItemDisabled?.(item)}
                  className="cr-menu-item"
                >
                  {item}
                  <Base.ItemIndicator>
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.75"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      aria-hidden="true"
                    >
                      <path d="m20 6-11 11-5-5" />
                    </svg>
                  </Base.ItemIndicator>
                </Base.Item>
              )}
            </Base.List>
          </Base.Popup>
        </Base.Positioner>
      </Base.Portal>
    </Base.Root>
  );
}
```


---

# components/command

---
title: "Command"
description: "A searchable command palette with keyboard navigation and real action callbacks."
---

Interactive preview: https://ui.coderocket.app/docs/components/command

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Command } from './components/ui/command';

<Command items={[{value:"settings",label:"Open settings",onSelect:()=>console.info("Settings")},{value:"export",label:"Export library",onSelect:()=>console.info("Export")}]} />
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Dialog](/docs/components/dialog).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Combobox as Base } from "@base-ui/react/combobox";
import { Dialog } from "./dialog";
import { useRef, useState, type ReactNode } from "react";
export interface CommandItem {
  value: string;
  label: string;
  description?: string;
  onSelect: () => void;
  disabled?: boolean;
}
export function Command({
  trigger = "Open commands",
  title = "Command menu",
  items,
  open,
  onOpenChange,
  defaultOpen = false,
  searchLabel = "Search commands",
  searchPlaceholder = "Search commands…",
  emptyMessage = "No matching commands.",
}: {
  trigger?: ReactNode;
  title?: string;
  items: CommandItem[];
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  defaultOpen?: boolean;
  searchLabel?: string;
  searchPlaceholder?: string;
  emptyMessage?: ReactNode;
}) {
  const [internal, setInternal] = useState(defaultOpen);
  const input = useRef<HTMLInputElement>(null);
  const setOpen = (value: boolean) => {
    if (open === undefined) setInternal(value);
    onOpenChange?.(value);
  };
  return (
    <Dialog
      trigger={trigger}
      title={title}
      open={open ?? internal}
      onOpenChange={setOpen}
      initialFocus={input}
    >
      <Base.Root
        items={items}
        inline
        open={open ?? internal}
        autoHighlight
        value={null}
        itemToStringLabel={(item: CommandItem) => item.label}
        onValueChange={(item: CommandItem | null) => {
          if (item && !item.disabled) {
            item.onSelect();
            setOpen(false);
          }
        }}
      >
        <Base.Input
          ref={input}
          className="cr-input"
          aria-label={searchLabel}
          placeholder={searchPlaceholder}
        />
        <Base.Empty className="cr-description">{emptyMessage}</Base.Empty>
        <Base.List className="cr-command-list">
          {(item: CommandItem) => (
            <Base.Item
              className="cr-menu-item"
              key={item.value}
              value={item}
              disabled={item.disabled}
            >
              <span className="cr-command-item-text">
                <span>{item.label}</span>
                {item.description && (
                  <small className="cr-description">{item.description}</small>
                )}
              </span>
            </Base.Item>
          )}
        </Base.List>
      </Base.Root>
    </Dialog>
  );
}
```


---

# components/context-menu

---
title: "Context Menu"
description: "A contextual action menu available by right-click or keyboard."
---

Interactive preview: https://ui.coderocket.app/docs/components/context-menu

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { ContextMenu } from './components/ui/context-menu';

<ContextMenu items={[{label:"Open",onSelect:()=>console.info("Open")},{label:"Duplicate",onSelect:()=>console.info("Duplicate")}]}>Right-click here, or press Shift + F10.</ContextMenu>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Dropdown](/docs/components/dropdown).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { ContextMenu as Base } from "@base-ui/react/context-menu";
import { Menu } from "@base-ui/react/menu";
import type { ComponentProps, ReactNode } from "react";
import type { MenuAction } from "./dropdown";
import { usePortalContainer } from "./utils";
export function ContextMenu({
  children,
  items,
  emptyMessage = "No actions available.",
  ...rootProps
}: Omit<ComponentProps<typeof Base.Root>, "children"> & {
  children: ReactNode;
  items: MenuAction[];
  emptyMessage?: ReactNode;
}) {
  const container = usePortalContainer();
  return (
    <Base.Root {...rootProps}>
      <Base.Trigger className="cr-context-trigger" tabIndex={0}>
        {children}
      </Base.Trigger>
      <Menu.Portal container={container}>
        <Menu.Positioner className="cr-positioner">
          <Menu.Popup className="cr-popup">
            {!items.length && <p className="cr-description">{emptyMessage}</p>}
            {items.map((item, index) => (
              <Menu.Item
                key={item.id ?? index}
                render={
                  item.href && !item.disabled ? (
                    <a href={item.href}>{item.label}</a>
                  ) : undefined
                }
                className="cr-menu-item"
                data-destructive={item.destructive || undefined}
                disabled={item.disabled}
                onClick={item.onSelect}
              >
                {item.label}
              </Menu.Item>
            ))}
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Base.Root>
  );
}
```


---

# components/data-table

---
title: "Data Table"
description: "Searchable, sortable and paginated data with controlled state, custom cells, stable row keys and loading/empty states."
---

Interactive preview: https://ui.coderocket.app/docs/components/data-table

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { DataTable } from './components/ui/data-table';

<DataTable caption="Projects" columns={[{key:"name",label:"Name"},{key:"status",label:"Status"}]} rows={[{name:"Website",status:"Active"},{name:"Mobile app",status:"Planning"}]}/>
```

## Loading, custom cells and stable rows

Use `loading` while records are being fetched. `emptyMessage` and `loadingMessage` describe these states. `getRowKey` preserves row identity when sorting and filtering, and column `render` formats a value without affecting the underlying search and sort data.

```tsx
<DataTable
  caption="Projects"
  getRowKey={(row) => row.id}
  columns={[
    { key: "name", label: "Project" },
    {
      key: "status",
      label: "Status",
      render: (value) => <Badge>{value}</Badge>,
    },
  ]}
  rows={[
    { id: "website", name: "Website", status: "Active" },
    { id: "mobile", name: "Mobile app", status: "Planning" },
  ]}
  emptyMessage="No projects yet."
/>
```

`query`, `sort` and `page`, with their change callbacks, let your application control the interface. Filtering, sorting and pagination operate on the supplied rows locally. This is not a virtualized or server-paginated data grid: fetch data in your application and choose a specialized grid for very large datasets.

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Input](/docs/components/input), [Button](/docs/components/button), [Pagination](/docs/components/pagination).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
/* eslint-disable jsx-a11y/no-noninteractive-tabindex -- The named overflow region needs a tab stop for keyboard scrolling. */
import { useMemo, useState, type ReactNode } from "react";
import { Input } from "./input";
import { Button } from "./button";
import { Pagination } from "./pagination";
export interface DataColumn {
  key: string;
  label: string;
  sortable?: boolean;
  render?: (
    value: string | number | undefined,
    row: Readonly<DataRow>,
  ) => ReactNode;
}
export type DataRow = Record<string, string | number>;
export interface DataSort {
  key: string;
  direction: 1 | -1;
}
export function DataTable({
  caption,
  columns,
  rows,
  pageSize = 5,
  query: controlledQuery,
  defaultQuery = "",
  onQueryChange,
  page: controlledPage,
  defaultPage = 1,
  onPageChange,
  sort: controlledSort,
  defaultSort = null,
  onSortChange,
  getRowKey,
  loading = false,
  loadingMessage = "Loading records…",
  emptyMessage = "No matching records.",
  searchPlaceholder = "Search records…",
  searchable = true,
}: {
  caption: string;
  columns: DataColumn[];
  rows: DataRow[];
  pageSize?: number;
  query?: string;
  defaultQuery?: string;
  onQueryChange?: (query: string) => void;
  page?: number;
  defaultPage?: number;
  onPageChange?: (page: number) => void;
  sort?: DataSort | null;
  defaultSort?: DataSort | null;
  onSortChange?: (sort: DataSort | null) => void;
  getRowKey?: (row: Readonly<DataRow>, index: number) => string | number;
  loading?: boolean;
  loadingMessage?: ReactNode;
  emptyMessage?: ReactNode;
  searchPlaceholder?: string;
  searchable?: boolean;
}) {
  const [internalQuery, setInternalQuery] = useState(defaultQuery);
  const [internalSort, setInternalSort] = useState<DataSort | null>(
    defaultSort,
  );
  const [internalPage, setInternalPage] = useState(defaultPage);
  const query = controlledQuery ?? internalQuery;
  const sort = controlledSort !== undefined ? controlledSort : internalSort;
  const page = controlledPage ?? internalPage;
  const setPage = (value: number) => {
    if (controlledPage === undefined) setInternalPage(value);
    onPageChange?.(value);
  };
  const filtered = useMemo(() => {
    const list = rows.filter((row) =>
      columns.some((c) =>
        String(row[c.key] ?? "")
          .toLowerCase()
          .includes(query.toLowerCase()),
      ),
    );
    if (sort)
      list.sort((a, b) => {
        const left = a[sort.key],
          right = b[sort.key];
        const comparison =
          typeof left === "number" && typeof right === "number"
            ? left - right
            : String(left ?? "").localeCompare(String(right ?? ""), undefined, {
                numeric: true,
              });
        return comparison * sort.direction;
      });
    return list;
  }, [rows, columns, query, sort]);
  const size = Number.isFinite(pageSize)
    ? Math.max(1, Math.floor(pageSize))
    : 5;
  const total = Math.max(1, Math.ceil(filtered.length / size));
  const current = Number.isFinite(page)
    ? Math.max(1, Math.min(Math.floor(page), total))
    : 1;
  return (
    <div className="cr-data-table">
      {searchable && (
        <Input
          aria-label={"Search " + caption}
          placeholder={searchPlaceholder}
          value={query}
          onChange={(event) => {
            if (controlledQuery === undefined)
              setInternalQuery(event.target.value);
            onQueryChange?.(event.target.value);
            setPage(1);
          }}
        />
      )}
      <div
        className="cr-table-scroll"
        role="region"
        aria-label={caption}
        tabIndex={0}
      >
        <table className="cr-table" aria-busy={loading || undefined}>
          <caption>{caption}</caption>
          <thead>
            <tr>
              {columns.map((column) => (
                <th
                  key={column.key}
                  scope="col"
                  aria-sort={
                    sort?.key === column.key
                      ? sort.direction === 1
                        ? "ascending"
                        : "descending"
                      : undefined
                  }
                >
                  {column.sortable !== false ? (
                    <Button
                      variant="ghost"
                      size="sm"
                      aria-label={`Sort by ${column.label}, ${sort?.key === column.key && sort.direction === 1 ? "descending" : "ascending"}`}
                      onClick={() => {
                        const nextSort: DataSort = {
                          key: column.key,
                          direction:
                            sort?.key === column.key && sort.direction === 1
                              ? -1
                              : 1,
                        };
                        if (controlledSort === undefined)
                          setInternalSort(nextSort);
                        onSortChange?.(nextSort);
                        setPage(1);
                      }}
                    >
                      {column.label}
                      {sort?.key === column.key ? (
                        sort.direction === 1 ? (
                          <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="1.75"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            aria-hidden="true"
                          >
                            <path d="M12 19V5m-7 7 7-7 7 7" />
                          </svg>
                        ) : (
                          <svg
                            width="14"
                            height="14"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="1.75"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            aria-hidden="true"
                          >
                            <path d="M12 5v14m-7-7 7 7 7-7" />
                          </svg>
                        )
                      ) : (
                        <svg
                          width="14"
                          height="14"
                          viewBox="0 0 24 24"
                          fill="none"
                          stroke="currentColor"
                          strokeWidth="1.75"
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          aria-hidden="true"
                        >
                          <path d="M8 3v18m-4-4 4 4 4-4M16 21V3m-4 4 4-4 4 4" />
                        </svg>
                      )}
                    </Button>
                  ) : (
                    column.label
                  )}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {!loading &&
              filtered
                .slice((current - 1) * size, current * size)
                .map((row, index) => (
                  <tr
                    key={
                      getRowKey?.(row, (current - 1) * size + index) ??
                      row.id ??
                      (current - 1) * size + index
                    }
                  >
                    {columns.map((column) => (
                      <td key={column.key}>
                        {column.render
                          ? column.render(row[column.key], row)
                          : row[column.key]}
                      </td>
                    ))}
                  </tr>
                ))}
            {(loading || !filtered.length) && (
              <tr>
                <td colSpan={Math.max(1, columns.length)}>
                  {loading ? loadingMessage : emptyMessage}
                </td>
              </tr>
            )}
          </tbody>
        </table>
      </div>
      <div className="cr-data-table-footer">
        <p className="cr-description" role="status">
          {loading
            ? loadingMessage
            : filtered.length
              ? `${(current - 1) * size + 1}–${Math.min(current * size, filtered.length)} of ${filtered.length} records`
              : "0 records"}
        </p>
        <Pagination
          label={`${caption} pages`}
          page={current}
          totalPages={total}
          onPageChange={setPage}
          disabled={loading}
        />
      </div>
    </div>
  );
}
```


---

# components/date-picker

---
title: "Date Picker"
description: "Single-date and date-range selection with shortcuts, manual confirmation, localized calendars and editable date fields."
---

Interactive preview: https://ui.coderocket.app/docs/components/date-picker

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { DatePicker } from './components/ui/date-picker';

<DatePicker mode="range" label="Project dates" defaultValue={{start:"2026-09-17",end:"2026-09-23"}} autoApply={false} onValueChange={range=>console.info(range ? range.start + " – " + range.end : "Cleared")}/>
```

## Single dates and ranges

Single mode preserves the original CodeRocket API: `value` is a `YYYY-MM-DD` string or `null`; clearing calls `onValueChange("")`. Range mode uses `{ start: "YYYY-MM-DD", end: "YYYY-MM-DD" }` or `null`. These are calendar dates, not timestamps. Store them directly without converting through local time or `toISOString()`.

```tsx
<DatePicker label="Due date" name="dueDate" defaultValue="2026-10-05" />

<DatePicker
  mode="range"
  label="Travel dates"
  name="travel"
  autoApply={false}
  defaultValue={{ start: "2026-10-05", end: "2026-10-12" }}
/>
```

`autoApply={false}` keeps a draft until Apply. Cancel, Escape or dismissing the popover leaves the committed value unchanged. Range form fields use `travel[start]` and `travel[end]`. Clearing a manually confirmed picker is also a draft change until Apply.

## Availability rules

Use `min` / `max` for inclusive boundaries, and `disabledDates` for individual unavailable dates or a predicate receiving an ISO date. By default a range cannot cross an unavailable date; `excludeDisabled={false}` permits unavailable interior dates while keeping both endpoints available.

```tsx
<DatePicker
  mode="range"
  label="Booking dates"
  min="2026-10-01"
  max="2026-12-31"
  disabledDates={["2026-10-15", "2026-10-16"]}
  startFrom="2026-10-01"
/>
```

Validate dates again when processing a booking on your server. The picker handles selection rules; it does not reserve inventory or calculate time slots.

## Shortcuts and inline display

Built-in shortcuts include Today and Yesterday; range mode also provides the last 7/30 days, this month and last month. Set `shortcuts={false}` to hide them or supply custom values. Unavailable shortcuts are disabled.

```tsx
<DatePicker
  mode="range"
  inline
  numberOfMonths={2}
  shortcuts={[
    { label: "Launch week", value: { start: "2026-10-05", end: "2026-10-09" } },
  ]}
  showWeekNumbers
  weekStartsOn={1}
/>
```

## Localization and presentation

`locale` formats months, weekdays and selected dates. French and English action labels are built in. Override `labels` for another language. `weekStartsOn` accepts 0 (Sunday) through 6 (Saturday). `weekdayFormat` adjusts weekday labels, and `dateFormat` or `formatDate` customizes the trigger text without changing the value.

```tsx
<DatePicker
  mode="range"
  label="Dates du projet"
  locale="fr-FR"
  weekStartsOn={1}
  autoApply={false}
  dateFormat={{ day: "numeric", month: "long", year: "numeric" }}
  separator=" → "
/>
```

Native date fields in the panel allow direct entry and follow the browser's language. Set `showInputs={false}` for calendar-only selection. Use `triggerClassName`, `icon`, `renderTrigger` and `renderDay` for custom presentation; `renderTrigger` provides the content inside the existing accessible button, so do not return another button. `overlay` adds a modal backdrop. Colors and dark appearance follow your ThemeScope tokens.

## Coming from Vue Tailwind Datepicker

The default React component now covers the legacy picker’s principal selection features: single/range, two months, shortcuts, unavailable dates, Apply/Cancel, clearing, inline display, month/year selection and localization. React uses typed ISO values and callbacks instead of Vue `v-model`, Day.js formatter tokens and slots. It is not a drop-in Vue replacement, and there is no implicit conversion of the old array/string/object models.

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Icons use Lucide React. Install `lucide-react@1.47.0` alongside React and Base UI.

Dependencies: [Calendar](/docs/components/calendar), [Button](/docs/components/button).

## Behavior and accessibility

- Single mode returns an ISO date; range mode returns `{ start, end }`. Display formatting never changes stored values.
- Choose one or two months, navigate by keyboard or month/year controls, and enter dates directly.
- Shortcuts, disabled dates, min/max bounds, week numbers, inline display, clearing and Apply/Cancel are available.
- French and English control labels are built in; other languages can supply labels alongside an Intl locale.
- The same source and compiled styles are included in the library export.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import {
  useRef,
  useState,
  useEffect,
  useEffectEvent,
  type ReactNode,
} from "react";
import { Popover as Base } from "@base-ui/react/popover";
import { CalendarDays, X } from "lucide-react";
import {
  Calendar,
  parseCalendarDate,
  calendarLabels,
  useCalendarToday,
  addCalendarDays,
  addCalendarMonths,
  startOfCalendarMonth,
  endOfCalendarMonth,
  isCalendarDateDisabled,
  isCalendarRangeAvailable,
  type CalendarBaseProps,
  type DateRange,
} from "./calendar";
import { Button } from "./button";
import { cx, usePortalContainer } from "./utils";

type PickerValue = string | DateRange | null;
export type DatePickerShortcut = {
  label: string;
  value: string | DateRange | (() => string | DateRange);
};
export type DatePickerProps = CalendarBaseProps & {
  name?: string;
  form?: string;
  placeholder?: string;
  separator?: string;
  autoApply?: boolean;
  inline?: boolean;
  overlay?: boolean;
  clearable?: boolean;
  showInputs?: boolean;
  shortcuts?: boolean | readonly DatePickerShortcut[];
  formatDate?: (date: string, locale: string) => string;
  dateFormat?: Intl.DateTimeFormatOptions;
  triggerClassName?: string;
  icon?: ReactNode;
  renderTrigger?: (value: string, placeholder: string) => ReactNode;
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
} & (
    | {
        mode?: "single";
        value?: string | null;
        defaultValue?: string;
        onValueChange?: (date: string) => void;
      }
    | {
        mode: "range";
        value?: DateRange | null;
        defaultValue?: DateRange;
        onValueChange?: (range: DateRange | null) => void;
      }
  );

export function DatePicker(props: DatePickerProps) {
  const {
    locale = "en",
    disabled = false,
    autoApply = true,
    inline = false,
    overlay = false,
    clearable = true,
    showInputs = true,
    shortcuts = true,
    separator = " – ",
    name,
    className,
    triggerClassName,
  } = props;
  const labels = calendarLabels(locale, props.labels),
    label =
      props.label ??
      (props.mode === "range" ? labels.chooseRange : labels.chooseDate);
  const placeholder = props.placeholder ?? label,
    container = usePortalContainer();
  const root = useRef<HTMLDivElement>(null);
  const [internal, setInternal] = useState<PickerValue>(
      props.defaultValue ?? null,
    ),
    [internalOpen, setInternalOpen] = useState(false);
  const chosen: PickerValue =
    props.value !== undefined ? props.value : internal;
  const [selectionPending, setSelectionPending] = useState(false);
  const [calendarKey, setCalendarKey] = useState(0);
  const [draft, setDraft] = useState<PickerValue>(chosen),
    [error, setError] = useState("");
  const getStart = (value: PickerValue) =>
    typeof value === "string" ? value : (value?.start ?? "");
  const getEnd = (value: PickerValue) =>
    typeof value === "object" && value ? value.end : "";
  const [startInput, setStartInput] = useState(getStart(chosen)),
    [endInput, setEndInput] = useState(getEnd(chosen));
  const synchronize = useEffectEvent(() => {
    setDraft(chosen);
    setStartInput(getStart(chosen));
    setEndInput(getEnd(chosen));
    setError("");
  });
  const chosenStart = getStart(chosen),
    chosenEnd = getEnd(chosen);
  useEffect(() => {
    synchronize();
  }, [chosenStart, chosenEnd]);
  const resetForm = useEffectEvent(() => {
    const next =
      props.value === undefined ? (props.defaultValue ?? null) : props.value;
    if (props.value === undefined) setInternal(next);
    setDraft(next);
    setStartInput(getStart(next));
    setEndInput(getEnd(next));
    setSelectionPending(false);
    setCalendarKey((current) => current + 1);
    setError("");
    if (props.open === undefined) setInternalOpen(false);
    props.onOpenChange?.(false);
  });
  useEffect(() => {
    const form = props.form
      ? document.getElementById(props.form)
      : root.current?.closest("form");
    if (!(form instanceof HTMLFormElement)) return;
    const reset = (event: Event) => {
      queueMicrotask(() => {
        if (!event.defaultPrevented) resetForm();
      });
    };
    form.addEventListener("reset", reset);
    return () => form.removeEventListener("reset", reset);
  }, [props.form]);
  const open = (props.open ?? internalOpen) && !disabled;
  function setOpen(next: boolean) {
    if (next && disabled) return;
    if (props.open === undefined) setInternalOpen(next);
    if (next) {
      setDraft(chosen);
      setStartInput(getStart(chosen));
      setEndInput(getEnd(chosen));
      setError("");
    }
    props.onOpenChange?.(next);
  }
  const options = {
    min: props.min,
    max: props.max,
    disabledDates: props.disabledDates,
    excludeDisabled: props.excludeDisabled,
  };
  function valid(value: PickerValue) {
    if (!value) return true;
    if (typeof value === "object")
      return props.mode === "range" && isCalendarRangeAvailable(value, options);
    try {
      parseCalendarDate(value);
    } catch {
      return false;
    }
    return props.mode !== "range" && !isCalendarDateDisabled(value, options);
  }
  function commit(value: PickerValue) {
    if (disabled || !valid(value)) return;
    if (props.value === undefined) setInternal(value);
    if (props.mode === "range")
      props.onValueChange?.(value && typeof value === "object" ? value : null);
    else props.onValueChange?.(typeof value === "string" ? value : "");
  }
  function select(value: PickerValue, close = true, resetCalendar = false) {
    if (disabled) return;
    if (!valid(value)) {
      setError(labels.invalidDate);
      return;
    }
    const visibleValue =
      autoApply && props.value !== undefined ? chosen : value;
    setDraft(visibleValue);
    setSelectionPending(false);
    if (resetCalendar) setCalendarKey((current) => current + 1);
    setStartInput(getStart(visibleValue));
    setEndInput(getEnd(visibleValue));
    setError("");
    if (autoApply) {
      commit(value);
      if (!inline && close) setOpen(false);
    }
  }
  function edit(start: string, end: string) {
    setStartInput(start);
    setEndInput(end);
    const next =
      props.mode === "range" ? (start && end ? { start, end } : null) : start;
    if ((props.mode === "range" && !!start !== !!end) || !valid(next)) {
      setError(labels.invalidDate);
      return;
    }
    setError("");
    setDraft(next);
    setSelectionPending(false);
    setCalendarKey((current) => current + 1);
    if (autoApply) commit(next);
  }
  function finishInput() {
    if (autoApply && props.value !== undefined && !error) {
      setStartInput(getStart(chosen));
      setEndInput(getEnd(chosen));
    }
  }
  const format = (date: string) =>
    props.formatDate?.(date, locale) ??
    new Intl.DateTimeFormat(
      locale,
      props.dateFormat
        ? { ...props.dateFormat, timeZone: "UTC", calendar: "gregory" }
        : { dateStyle: "medium", timeZone: "UTC", calendar: "gregory" },
    ).format(parseCalendarDate(date));
  const display = chosen
    ? typeof chosen === "string"
      ? format(chosen)
      : `${format(chosen.start)}${separator}${format(chosen.end)}`
    : "";
  const localToday = useCalendarToday();
  const today = localToday || "1970-01-01",
    yesterday = addCalendarDays(today, -1),
    thisMonth = startOfCalendarMonth(today),
    lastMonth = startOfCalendarMonth(addCalendarMonths(today, -1));
  const defaults: DatePickerShortcut[] =
    props.mode === "range"
      ? [
          { label: labels.today, value: { start: today, end: today } },
          {
            label: labels.yesterday,
            value: { start: yesterday, end: yesterday },
          },
          {
            label: labels.last7Days,
            value: { start: addCalendarDays(today, -6), end: today },
          },
          {
            label: labels.last30Days,
            value: { start: addCalendarDays(today, -29), end: today },
          },
          {
            label: labels.thisMonth,
            value: { start: thisMonth, end: endOfCalendarMonth(today) },
          },
          {
            label: labels.lastMonth,
            value: { start: lastMonth, end: endOfCalendarMonth(lastMonth) },
          },
        ]
      : [
          { label: labels.today, value: today },
          { label: labels.yesterday, value: yesterday },
        ];
  const items = Array.isArray(shortcuts)
    ? shortcuts
    : shortcuts
      ? defaults
      : [];
  const common: CalendarBaseProps = {
    label,
    min: props.min,
    max: props.max,
    locale,
    weekStartsOn: props.weekStartsOn,
    disabled,
    disabledDates: props.disabledDates,
    excludeDisabled: props.excludeDisabled,
    startFrom: props.startFrom,
    numberOfMonths: props.numberOfMonths,
    showWeekNumbers: props.showWeekNumbers,
    weekdayFormat: props.weekdayFormat,
    monthSelection: props.monthSelection,
    labels: props.labels,
    previousMonthLabel: props.previousMonthLabel,
    nextMonthLabel: props.nextMonthLabel,
    renderDay: props.renderDay,
    onMonthChange: props.onMonthChange,
    onSelectionPendingChange: (pending) => {
      setSelectionPending(pending);
      props.onSelectionPendingChange?.(pending);
    },
  };
  const fields =
    name &&
    (props.mode === "range" ? (
      <>
        <input
          type="hidden"
          form={props.form}
          name={`${name}[start]`}
          value={getStart(chosen)}
          disabled={disabled}
        />
        <input
          type="hidden"
          form={props.form}
          name={`${name}[end]`}
          value={getEnd(chosen)}
          disabled={disabled}
        />
      </>
    ) : (
      <input
        type="hidden"
        form={props.form}
        name={name}
        value={getStart(chosen)}
        disabled={disabled}
      />
    ));
  const calendarValue = autoApply ? chosen : draft;
  const content = (
    <>
      <div className="cr-date-picker-body">
        {items.length > 0 && (
          <div className="cr-date-picker-shortcuts" aria-label={label}>
            {items.map((item, index) => {
              const value =
                typeof item.value === "function" ? item.value() : item.value;
              return (
                <Button
                  key={index}
                  variant="ghost"
                  size="sm"
                  disabled={
                    disabled ||
                    (!localToday && !Array.isArray(shortcuts)) ||
                    !valid(value)
                  }
                  onClick={() => select(value, true, true)}
                >
                  {item.label}
                </Button>
              );
            })}
          </div>
        )}
        {showInputs && (
          <div className="cr-date-picker-inputs">
            <label>
              <span>{props.mode === "range" ? labels.startDate : label}</span>
              <input
                type="date"
                onBlur={finishInput}
                value={startInput}
                min={props.min ?? "0001-01-01"}
                max={props.max ?? "9999-12-31"}
                disabled={disabled}
                aria-invalid={!!error || undefined}
                onChange={(event) => edit(event.target.value, endInput)}
              />
            </label>
            {props.mode === "range" && (
              <label>
                <span>{labels.endDate}</span>
                <input
                  type="date"
                  onBlur={finishInput}
                  value={endInput}
                  min={startInput || props.min || "0001-01-01"}
                  max={props.max ?? "9999-12-31"}
                  disabled={disabled}
                  aria-invalid={!!error || undefined}
                  onChange={(event) => edit(startInput, event.target.value)}
                />
              </label>
            )}
          </div>
        )}
        <div>
          {props.mode === "range" ? (
            <Calendar
              {...common}
              key={calendarKey}
              mode="range"
              value={
                calendarValue && typeof calendarValue === "object"
                  ? calendarValue
                  : null
              }
              onValueChange={select}
            />
          ) : (
            <Calendar
              {...common}
              key={calendarKey}
              value={typeof calendarValue === "string" ? calendarValue : null}
              onValueChange={select}
            />
          )}
        </div>
        {error && (
          <p className="cr-date-picker-error" role="alert">
            {error}
          </p>
        )}
      </div>
      {(clearable || !autoApply) && (
        <div className="cr-date-picker-footer">
          {clearable && (
            <Button
              variant="ghost"
              size="sm"
              disabled={disabled || (!startInput && !endInput)}
              onClick={() =>
                select(props.mode === "range" ? null : "", false, true)
              }
            >
              {labels.clear}
            </Button>
          )}
          {!autoApply && (
            <div className="cr-date-picker-actions">
              <Button
                variant="ghost"
                size="sm"
                disabled={disabled}
                onClick={() => {
                  setDraft(chosen);
                  setSelectionPending(false);
                  setCalendarKey((current) => current + 1);
                  setStartInput(getStart(chosen));
                  setEndInput(getEnd(chosen));
                  setError("");
                  if (!inline) setOpen(false);
                }}
              >
                {labels.cancel}
              </Button>
              <Button
                size="sm"
                disabled={
                  disabled || selectionPending || !!error || !valid(draft)
                }
                onClick={() => {
                  commit(draft);
                  if (!inline) setOpen(false);
                }}
              >
                {labels.apply}
              </Button>
            </div>
          )}
        </div>
      )}
    </>
  );
  if (inline)
    return (
      <div
        ref={root}
        className={cx("cr-date-picker cr-date-picker-inline", className)}
        role="group"
        aria-label={label}
      >
        {fields}
        {content}
      </div>
    );
  return (
    <div ref={root} className={cx("cr-date-picker", className)}>
      {fields}
      <Base.Root
        open={open}
        onOpenChange={setOpen}
        modal={overlay ? true : "trap-focus"}
      >
        <Base.Trigger
          className={cx("cr-button cr-date-picker-trigger", triggerClassName)}
          data-variant="outline"
          disabled={disabled}
          aria-label={`${label}${display ? `: ${display}` : ""}`}
        >
          {props.renderTrigger ? (
            props.renderTrigger(display, placeholder)
          ) : (
            <>
              <span data-placeholder={!display || undefined}>
                {display || placeholder}
              </span>
              {props.icon ?? <CalendarDays size={16} aria-hidden="true" />}
            </>
          )}
        </Base.Trigger>
        <Base.Portal container={container}>
          {overlay && <Base.Backdrop className="cr-date-picker-backdrop" />}
          <Base.Positioner
            sideOffset={8}
            collisionPadding={16}
            collisionAvoidance={{ side: "shift", align: "shift" }}
            className="cr-positioner cr-date-picker-positioner"
          >
            <Base.Popup
              className="cr-popup cr-date-picker-popup"
              // Focus the first control (Close), keeping month controls visible on opening.
              initialFocus={true}
            >
              <div className="cr-date-picker-heading">
                <Base.Title>{label}</Base.Title>
                <Base.Close
                  className="cr-date-picker-close"
                  aria-label={labels.close}
                >
                  <X size={16} aria-hidden="true" />
                </Base.Close>
              </div>
              {content}
            </Base.Popup>
          </Base.Positioner>
        </Base.Portal>
      </Base.Root>
    </div>
  );
}
```


---

# components/dialog

---
title: "Dialog"
description: "A modal dialog with focus management, keyboard dismissal and a labelled title."
---

Interactive preview: https://ui.coderocket.app/docs/components/dialog

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Dialog } from './components/ui/dialog';

<Dialog trigger="Open dialog" title="Workspace settings" description="Manage the details of your workspace."><Input aria-label="Workspace name" placeholder="Acme"/></Dialog>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Input](/docs/components/input).

## Behavior and accessibility

- Focus trap
- Escape dismisses
- Focus returns to trigger

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Dialog as Base } from "@base-ui/react/dialog";
import type { ComponentProps, ReactNode } from "react";
import { cx, usePortalContainer } from "./utils";
export function Dialog({
  trigger,
  triggerRender,
  title,
  description,
  children,
  open,
  onOpenChange,
  initialFocus,
  finalFocus,
  className,
  footer,
  closeLabel = "Close",
  size = "default",
  ...rootProps
}: Omit<ComponentProps<typeof Base.Root>, "children"> & {
  size?: "default" | "wide";
  trigger?: ReactNode;
  /** Replace the trigger element without nesting interactive controls. */
  triggerRender?: ComponentProps<typeof Base.Trigger>["render"];
  className?: string;
  title: string;
  description?: string;
  children: ReactNode;
  initialFocus?: ComponentProps<typeof Base.Popup>["initialFocus"];
  finalFocus?: ComponentProps<typeof Base.Popup>["finalFocus"];
  footer?: ReactNode;
  closeLabel?: string;
}) {
  const container = usePortalContainer();
  return (
    <Base.Root {...rootProps} open={open} onOpenChange={onOpenChange}>
      {(trigger != null || triggerRender != null) && (
        <Base.Trigger
          render={triggerRender}
          className="cr-button"
          data-variant="outline"
        >
          {trigger}
        </Base.Trigger>
      )}
      <Base.Portal container={container}>
        <Base.Backdrop className="cr-backdrop" />
        <Base.Viewport className="cr-modal-viewport" data-kind="dialog">
          <Base.Popup
            className={cx("cr-modal cr-dialog", className)}
            data-size={size}
            initialFocus={initialFocus}
            finalFocus={finalFocus}
          >
            <header className="cr-modal-header">
              <Base.Title className="cr-modal-title">{title}</Base.Title>
              {description && (
                <Base.Description className="cr-description">
                  {description}
                </Base.Description>
              )}
              <Base.Close
                className="cr-modal-close"
                aria-label={
                  closeLabel === "Close" ? "Close dialog" : closeLabel
                }
              >
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.75"
                  strokeLinecap="round"
                  aria-hidden="true"
                >
                  <path d="m6 6 12 12M18 6 6 18" />
                </svg>
              </Base.Close>
            </header>
            <div className="cr-modal-content">{children}</div>
            {footer !== null && (
              <footer className="cr-modal-footer">
                {footer ?? (
                  <Base.Close className="cr-button" data-variant="secondary">
                    {closeLabel}
                  </Base.Close>
                )}
              </footer>
            )}
          </Base.Popup>
        </Base.Viewport>
      </Base.Portal>
    </Base.Root>
  );
}
```


---

# components/drawer

---
title: "Drawer"
description: "A swipeable drawer with focus management, keyboard dismissal and a labelled title."
---

Interactive preview: https://ui.coderocket.app/docs/components/drawer

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Drawer } from './components/ui/drawer';

<Drawer trigger="Open drawer" title="Workspace settings" description="Manage the details of your workspace."><Input aria-label="Workspace name" placeholder="Acme"/></Drawer>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Input](/docs/components/input).

## Behavior and accessibility

- Focus trap
- Escape dismisses
- Focus returns to trigger

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Drawer as Base } from "@base-ui/react/drawer";
import type { ComponentProps, ReactNode } from "react";
import { cx, usePortalContainer } from "./utils";
export function Drawer({
  trigger,
  triggerRender,
  title,
  description,
  children,
  open,
  onOpenChange,
  initialFocus,
  finalFocus,
  className,
  footer,
  closeLabel = "Close",
  ...rootProps
}: Omit<ComponentProps<typeof Base.Root>, "children"> & {
  trigger?: ReactNode;
  /** Replace the trigger element without nesting interactive controls. */
  triggerRender?: ComponentProps<typeof Base.Trigger>["render"];
  className?: string;
  title: string;
  description?: string;
  children: ReactNode;
  initialFocus?: ComponentProps<typeof Base.Popup>["initialFocus"];
  finalFocus?: ComponentProps<typeof Base.Popup>["finalFocus"];
  footer?: ReactNode;
  closeLabel?: string;
}) {
  const container = usePortalContainer();
  return (
    <Base.Root {...rootProps} open={open} onOpenChange={onOpenChange}>
      {(trigger != null || triggerRender != null) && (
        <Base.Trigger
          render={triggerRender}
          className="cr-button"
          data-variant="outline"
        >
          {trigger}
        </Base.Trigger>
      )}
      <Base.Portal container={container}>
        <Base.Backdrop className="cr-backdrop" />
        <Base.Viewport className="cr-modal-viewport" data-kind="drawer">
          <Base.Popup
            className={cx("cr-modal cr-drawer", className)}
            initialFocus={initialFocus}
            finalFocus={finalFocus}
          >
            <header className="cr-modal-header">
              <Base.Title className="cr-modal-title">{title}</Base.Title>
              {description && (
                <Base.Description className="cr-description">
                  {description}
                </Base.Description>
              )}
              <Base.Close
                className="cr-modal-close"
                aria-label={
                  closeLabel === "Close" ? "Close drawer" : closeLabel
                }
              >
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.75"
                  strokeLinecap="round"
                  aria-hidden="true"
                >
                  <path d="m6 6 12 12M18 6 6 18" />
                </svg>
              </Base.Close>
            </header>
            <div className="cr-modal-content">{children}</div>
            {footer !== null && (
              <footer className="cr-modal-footer">
                {footer ?? (
                  <Base.Close className="cr-button" data-variant="secondary">
                    {closeLabel}
                  </Base.Close>
                )}
              </footer>
            )}
          </Base.Popup>
        </Base.Viewport>
      </Base.Portal>
    </Base.Root>
  );
}
```


---

# components/dropdown

---
title: "Dropdown"
description: "A keyboard-accessible menu of actions."
---

Interactive preview: https://ui.coderocket.app/docs/components/dropdown

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Dropdown } from './components/ui/dropdown';

<Dropdown trigger="Project actions" items={[{label:"Rename",onSelect:()=>console.info("Rename")},{label:"Archive",onSelect:()=>console.info("Archive")} ]}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Menu as Base } from "@base-ui/react/menu";
import type { ComponentProps, ReactNode } from "react";
import { usePortalContainer } from "./utils";
export interface MenuAction {
  id?: string;
  label: string;
  onSelect?: () => void;
  href?: string;
  disabled?: boolean;
  destructive?: boolean;
}
export function Dropdown({
  trigger,
  triggerRender,
  items,
  disabled = false,
  side = "bottom",
  align = "start",
  emptyMessage = "No actions available.",
  ...rootProps
}: Omit<ComponentProps<typeof Base.Root>, "children"> & {
  trigger?: ReactNode;
  triggerRender?: ComponentProps<typeof Base.Trigger>["render"];
  items: MenuAction[];
  disabled?: boolean;
  side?: ComponentProps<typeof Base.Positioner>["side"];
  align?: ComponentProps<typeof Base.Positioner>["align"];
  emptyMessage?: ReactNode;
}) {
  const container = usePortalContainer();
  return (
    <Base.Root {...rootProps}>
      <Base.Trigger
        render={triggerRender}
        disabled={disabled}
        className="cr-button"
        data-variant="outline"
      >
        {trigger}
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.75"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="m6 9 6 6 6-6" />
        </svg>
      </Base.Trigger>
      <Base.Portal container={container}>
        <Base.Positioner
          side={side}
          align={align}
          sideOffset={6}
          className="cr-positioner"
        >
          <Base.Popup className="cr-popup">
            {!items.length && <p className="cr-description">{emptyMessage}</p>}
            {items.map((item, index) => (
              <Base.Item
                key={item.id ?? index}
                render={
                  item.href && !item.disabled ? (
                    <a href={item.href}>{item.label}</a>
                  ) : undefined
                }
                className="cr-menu-item"
                data-destructive={item.destructive || undefined}
                disabled={item.disabled}
                onClick={item.onSelect}
              >
                {item.label}
              </Base.Item>
            ))}
          </Base.Popup>
        </Base.Positioner>
      </Base.Portal>
    </Base.Root>
  );
}
```


---

# components/empty-state

---
title: "Empty State"
description: "A useful empty state with an optional next action."
---

Interactive preview: https://ui.coderocket.app/docs/components/empty-state

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { EmptyState } from './components/ui/empty-state';

<EmptyState title="No projects yet" description="Create your first project to get started." action={<Button>Create project</Button>}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Button](/docs/components/button).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ReactNode } from "react";
export function EmptyState({
  title,
  description,
  icon,
  action,
}: {
  title: string;
  description?: string;
  icon?: ReactNode;
  action?: ReactNode;
}) {
  return (
    <section className="cr-empty-state">
      {icon && (
        <div aria-hidden="true" className="cr-empty-icon">
          {icon}
        </div>
      )}
      <h3>{title}</h3>
      {description && <p className="cr-description">{description}</p>}
      {action}
    </section>
  );
}
```


---

# components/field

---
title: "Field"
description: "A labelled field with description, validation and accessible errors."
---

Interactive preview: https://ui.coderocket.app/docs/components/field

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Field } from './components/ui/field';

<Field label="Email" description="We’ll use this for account updates."><Input type="email" placeholder="you@company.com"/></Field>
```

## Validation feedback

Wrap a control in Field to connect its visible label, help text and error. Native constraints and Base UI validation can produce the error; you do not need to supply an explicit message for every invalid state.

```tsx
<Field label="Work email" description="Used for account notifications.">
  <Input name="email" type="email" required />
</Field>

<Field label="Workspace name" error="This name is already taken.">
  <Input name="workspace" defaultValue="Acme" />
</Field>
```

Use a native form or Base UI Form for submission and server validation. Keep credentials and server-side validation in your application.

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Input](/docs/components/input).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps, ReactNode } from "react";
import { Field as Base } from "@base-ui/react/field";
import { cx } from "./utils";
export function Field({
  label,
  description,
  error,
  children,
  className,
  ...props
}: Omit<ComponentProps<typeof Base.Root>, "className"> & {
  label: ReactNode;
  className?: string;
  description?: ReactNode;
  error?: ReactNode;
}) {
  return (
    <Base.Root
      {...props}
      invalid={Boolean(error) || props.invalid}
      className={cx("cr-field", className)}
    >
      <Base.Label className="cr-label">{label}</Base.Label>
      {description && (
        <Base.Description className="cr-description">
          {description}
        </Base.Description>
      )}
      {children}
      {error ? (
        <Base.Error match className="cr-field-error">
          {error}
        </Base.Error>
      ) : (
        <Base.Error className="cr-field-error" />
      )}
    </Base.Root>
  );
}
```


---

# components/file-upload

---
title: "File Upload"
description: "A validated drag-and-drop file input with cancellable upload and real progress callbacks."
---

Interactive preview: https://ui.coderocket.app/docs/components/file-upload

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { FileUpload } from './components/ui/file-upload';

<FileUpload label="Project attachment" onFileSelect={file=>console.info(file.name)}/>
```

## Integrating a real upload

The default component selects one file. `accept` and `maxBytes` validate the selection, including files dropped onto the control. Set `name` to include the file in native `FormData`; `form` connects it to an external form. `required` prevents empty form submission.

`onFileSelect` runs when a valid file is selected. `onFileChange` also receives `null` when the selection is removed, rejected or reset, allowing your application to clear its own state. An upload handler can report real progress and receives an abort signal for cancellation; no storage service is bundled.

```tsx
<FileUpload
  label="Project attachment"
  name="attachment"
  accept=".pdf,image/*"
  maxBytes={5 * 1024 * 1024}
  required
  onFileChange={(file) => console.info(file?.name ?? "Selection cleared")}
/>
```

Validate file types and size again on your server. The browser's `accept` attribute is a convenience, not a security boundary.

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Button](/docs/components/button), [Progress](/docs/components/progress).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { useEffect, useId, useRef, useState } from "react";
import { cx } from "./utils";
import { Button } from "./button";
import { Progress } from "./progress";
export interface UploadContext {
  signal: AbortSignal;
  onProgress: (percent: number) => void;
}
export interface FileUploadProps {
  id?: string;
  name?: string;
  form?: string;
  required?: boolean;
  label?: string;
  disabled?: boolean;
  className?: string;
  accept?: string;
  maxBytes?: number;
  onUpload?: (file: File, context: UploadContext) => Promise<void>;
  /** Called when a valid file is selected. */
  onFileSelect?: (file: File) => void;
  /** Also reports removal, rejection and native form resets with null. */
  onFileChange?: (file: File | null) => void;
}
function formatUploadSize(bytes: number): string {
  return bytes >= 1024 * 1024
    ? `${Number((bytes / 1024 / 1024).toFixed(1))} MB`
    : `${Math.ceil(bytes / 1024)} KB`;
}
export function validateUploadFile(
  file: Pick<File, "name" | "size" | "type">,
  accept: string | undefined,
  maxBytes: number,
): string | null {
  if (file.size > maxBytes) {
    const limit = formatUploadSize(maxBytes);
    return `Choose a file no larger than ${limit}.`;
  }
  const rules =
    accept
      ?.split(",")
      .map((rule) => rule.trim().toLowerCase())
      .filter(Boolean) ?? [];
  if (
    rules.length > 0 &&
    !rules.some((rule) => {
      const mimeType = file.type.toLowerCase();
      return rule.startsWith(".")
        ? file.name.toLowerCase().endsWith(rule)
        : rule.endsWith("/*")
          ? mimeType.startsWith(rule.slice(0, -1))
          : mimeType === rule;
    })
  )
    return "This file type is not supported.";
  return null;
}
export function FileUpload({
  id,
  name,
  form,
  required = false,
  label = "Upload a file",
  accept,
  maxBytes = 10 * 1024 * 1024,
  onUpload,
  onFileSelect,
  onFileChange,
  disabled = false,
  className,
}: FileUploadProps) {
  const generatedId = useId(),
    hintId = useId(),
    errorId = useId(),
    controller = useRef<AbortController | null>(null),
    input = useRef<HTMLInputElement>(null);
  const inputId = id ?? generatedId;
  const [file, setFile] = useState<File | null>(null),
    [dragging, setDragging] = useState(false),
    [error, setError] = useState(""),
    [status, setStatus] = useState<"idle" | "uploading" | "done">("idle"),
    [progress, setProgress] = useState<number | null>(null);
  useEffect(() => () => controller.current?.abort(), []);
  useEffect(() => {
    const owner = input.current?.form;
    if (!owner) return;
    function reset(event: Event) {
      queueMicrotask(() => {
        if (event.defaultPrevented) return;
        controller.current?.abort();
        setFile(null);
        setStatus("idle");
        setProgress(null);
        setError("");
        setDragging(false);
        onFileChange?.(null);
      });
    }
    owner.addEventListener("reset", reset);
    return () => owner.removeEventListener("reset", reset);
  }, [form, onFileChange]);
  function choose(next: File | undefined, fromDrop = false) {
    if (!next || disabled || status === "uploading") return;
    const validationError = validateUploadFile(next, accept, maxBytes);
    setError(validationError ?? "");
    if (validationError) {
      setFile(null);
      setStatus("idle");
      setProgress(null);
      if (input.current) input.current.value = "";
      onFileChange?.(null);
      return;
    }
    if (fromDrop && input.current) {
      const transfer = new DataTransfer();
      transfer.items.add(next);
      input.current.files = transfer.files;
    }
    controller.current?.abort();
    setFile(next);
    setStatus("idle");
    setProgress(null);
    onFileSelect?.(next);
    onFileChange?.(next);
  }
  async function upload() {
    if (!file || !onUpload || disabled || status === "uploading") return;
    const active = new AbortController();
    controller.current = active;
    setStatus("uploading");
    setError("");
    setProgress(null);
    try {
      await onUpload(file, {
        signal: active.signal,
        onProgress: (value) => {
          if (!active.signal.aborted)
            setProgress(
              Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : null,
            );
        },
      });
      if (!active.signal.aborted) {
        setProgress(100);
        setStatus("done");
      }
    } catch {
      if (!active.signal.aborted) {
        setError("Upload failed. Please try again.");
        setStatus("idle");
      }
    }
  }
  return (
    <div
      className={cx("cr-file-upload", className)}
      aria-busy={status === "uploading" || undefined}
    >
      <div
        className="cr-dropzone"
        data-dragging={dragging || undefined}
        data-disabled={disabled || status === "uploading" || undefined}
        onDragOver={(event) => {
          event.preventDefault();
          if (!disabled && status !== "uploading") setDragging(true);
        }}
        onDragLeave={() => setDragging(false)}
        onDrop={(event) => {
          event.preventDefault();
          setDragging(false);
          if (status !== "uploading") choose(event.dataTransfer.files[0], true);
        }}
      >
        <svg
          width="24"
          height="24"
          className="cr-upload-icon"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.75"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" />
        </svg>
        <label htmlFor={inputId} className="cr-label">
          {label}
        </label>
        <input
          ref={input}
          id={inputId}
          type="file"
          name={name}
          form={form}
          required={required}
          accept={accept}
          disabled={disabled || status === "uploading"}
          aria-describedby={error ? `${hintId} ${errorId}` : hintId}
          aria-invalid={error ? true : undefined}
          onChange={(event) => choose(event.target.files?.[0])}
        />
        <p id={hintId} className="cr-description">
          Choose or drop one file. Up to {formatUploadSize(maxBytes)}.
        </p>
      </div>
      {file && (
        <div
          className="cr-stack"
          style={{ marginTop: "calc(var(--cr-space)*4)" }}
        >
          <p className="cr-description">
            {file.name} · {Math.ceil(file.size / 1024)} KB
          </p>
          {status === "uploading" && (
            <Progress label="Upload progress" value={progress} />
          )}
          <div className="cr-row">
            {onUpload && status !== "done" && (
              <Button
                disabled={disabled}
                loading={status === "uploading"}
                onClick={upload}
              >
                Upload
              </Button>
            )}
            <Button
              variant="outline"
              disabled={disabled}
              onClick={() => {
                controller.current?.abort();
                setStatus("idle");
                setFile(null);
                setProgress(null);
                setError("");
                onFileChange?.(null);
                if (input.current) {
                  input.current.value = "";
                  input.current.focus();
                }
              }}
            >
              {status === "uploading" ? "Cancel upload" : "Remove file"}
            </Button>
          </div>
          {status === "done" && (
            <p role="status" className="cr-description">
              Upload complete.
            </p>
          )}
          {!onUpload && (
            <p className="cr-description">
              File selected locally. Connect onUpload to send it to your storage
              service.
            </p>
          )}
        </div>
      )}
      {error && (
        <p
          id={errorId}
          role="alert"
          className="cr-description"
          style={{ color: "var(--cr-destructive)" }}
        >
          {error}
        </p>
      )}
    </div>
  );
}
```


---

# components/hover-card

---
title: "Hover Card"
description: "A preview card for supplementary link information."
---

Interactive preview: https://ui.coderocket.app/docs/components/hover-card

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { HoverCard } from './components/ui/hover-card';

<HoverCard label="@alex" href="#profile"><strong>Alex Morgan</strong><p className="cr-description">Designer and developer.</p></HoverCard>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { PreviewCard as Base } from "@base-ui/react/preview-card";
import type { ComponentProps, ReactNode } from "react";
import { usePortalContainer } from "./utils";
export function HoverCard({
  label,
  href,
  children,
  side = "bottom",
  align = "start",
  ...rootProps
}: Omit<ComponentProps<typeof Base.Root>, "children"> & {
  label: string;
  href: string;
  children: ReactNode;
  side?: ComponentProps<typeof Base.Positioner>["side"];
  align?: ComponentProps<typeof Base.Positioner>["align"];
}) {
  const container = usePortalContainer();
  return (
    <Base.Root {...rootProps}>
      <Base.Trigger href={href} className="cr-link">
        {label}
      </Base.Trigger>
      <Base.Portal container={container}>
        <Base.Positioner
          side={side}
          align={align}
          sideOffset={8}
          className="cr-positioner"
        >
          <Base.Popup className="cr-popup cr-hover-card">{children}</Base.Popup>
        </Base.Positioner>
      </Base.Portal>
    </Base.Root>
  );
}
```


---

# components/index

---
title: React components
description: 48 components that follow your design system. Editable source, typed props and live previews.
---

- [Accordion](https://ui.coderocket.app/docs/components/accordion): Expandable sections with built-in keyboard interaction.
- [Alert](https://ui.coderocket.app/docs/components/alert): A contextual message with optional assertive announcement.
- [Alert Dialog](https://ui.coderocket.app/docs/components/alert-dialog): A confirmation dialog with focus management, keyboard dismissal and a labelled title.
- [Avatar](https://ui.coderocket.app/docs/components/avatar): An image with an accessible fallback for a person or team.
- [Badge](https://ui.coderocket.app/docs/components/badge): A compact non-interactive status or label.
- [Breadcrumb](https://ui.coderocket.app/docs/components/breadcrumb): A semantic path through your application.
- [Button](https://ui.coderocket.app/docs/components/button): An action with six visual variants, three sizes and a loading state.
- [Calendar](https://ui.coderocket.app/docs/components/calendar): A Gregorian single-date or range calendar with month/year selection, disabled dates, week numbers and keyboard navigation.
- [Card](https://ui.coderocket.app/docs/components/card): A surface that groups related content, with optional header and footer.
- [Checkbox](https://ui.coderocket.app/docs/components/checkbox): A labelled checkbox with checked and indeterminate states.
- [Collapsible](https://ui.coderocket.app/docs/components/collapsible): An optional content section with a disclosure trigger.
- [Combobox](https://ui.coderocket.app/docs/components/combobox): Searchable single selection with controlled search, disabled options, optional clearing and form support.
- [Command](https://ui.coderocket.app/docs/components/command): A searchable command palette with keyboard navigation and real action callbacks.
- [Context Menu](https://ui.coderocket.app/docs/components/context-menu): A contextual action menu available by right-click or keyboard.
- [Data Table](https://ui.coderocket.app/docs/components/data-table): Searchable, sortable and paginated data with controlled state, custom cells, stable row keys and loading/empty states.
- [Date Picker](https://ui.coderocket.app/docs/components/date-picker): Single-date and date-range selection with shortcuts, manual confirmation, localized calendars and editable date fields.
- [Dialog](https://ui.coderocket.app/docs/components/dialog): A modal dialog with focus management, keyboard dismissal and a labelled title.
- [Drawer](https://ui.coderocket.app/docs/components/drawer): A swipeable drawer with focus management, keyboard dismissal and a labelled title.
- [Dropdown](https://ui.coderocket.app/docs/components/dropdown): A keyboard-accessible menu of actions.
- [Empty State](https://ui.coderocket.app/docs/components/empty-state): A useful empty state with an optional next action.
- [Field](https://ui.coderocket.app/docs/components/field): A labelled field with description, validation and accessible errors.
- [File Upload](https://ui.coderocket.app/docs/components/file-upload): A validated drag-and-drop file input with cancellable upload and real progress callbacks.
- [Hover Card](https://ui.coderocket.app/docs/components/hover-card): A preview card for supplementary link information.
- [Input](https://ui.coderocket.app/docs/components/input): A text input that inherits the library’s field tokens.
- [Input Group](https://ui.coderocket.app/docs/components/input-group): A text input with leading and trailing content.
- [Keyboard Key](https://ui.coderocket.app/docs/components/kbd): A keyboard shortcut hint.
- [Label](https://ui.coderocket.app/docs/components/label): An explicit label linked to a form control.
- [Navigation Menu](https://ui.coderocket.app/docs/components/navigation-menu): A navigation bar with expandable groups and real link semantics.
- [Number Field](https://ui.coderocket.app/docs/components/number-field): A numeric field with increment, decrement, constraints and locale formatting.
- [Pagination](https://ui.coderocket.app/docs/components/pagination): A controlled page navigator with bounded page selection.
- [Popover](https://ui.coderocket.app/docs/components/popover): A non-modal panel anchored to a trigger.
- [Progress](https://ui.coderocket.app/docs/components/progress): A determinate or indeterminate progress bar with a label.
- [Radio Group](https://ui.coderocket.app/docs/components/radio-group): One selection from a labelled set, with arrow-key navigation.
- [Select](https://ui.coderocket.app/docs/components/select): Accessible single or multiple selection with disabled options, controlled state and native form support.
- [Separator](https://ui.coderocket.app/docs/components/separator): A visual and semantic divider.
- [Sheet](https://ui.coderocket.app/docs/components/sheet): A side panel with focus management, keyboard dismissal and a labelled title.
- [Sidebar](https://ui.coderocket.app/docs/components/sidebar): A collapsible application sidebar with active-link semantics.
- [Skeleton](https://ui.coderocket.app/docs/components/skeleton): A reduced-motion-aware placeholder while content is loading.
- [Slider](https://ui.coderocket.app/docs/components/slider): A bounded numeric value with keyboard controls and a visible output.
- [Spinner](https://ui.coderocket.app/docs/components/spinner): An accessible loading indicator that respects reduced motion.
- [Switch](https://ui.coderocket.app/docs/components/switch): An immediate on/off setting with a visible label.
- [Table](https://ui.coderocket.app/docs/components/table): A semantic table with a caption and responsive overflow.
- [Tabs](https://ui.coderocket.app/docs/components/tabs): Related panels connected to an accessible tab list.
- [Textarea](https://ui.coderocket.app/docs/components/textarea): A multiline input with native form semantics.
- [Toast](https://ui.coderocket.app/docs/components/toast): Accessible notifications with a provider, imperative manager and dismiss controls.
- [Toggle](https://ui.coderocket.app/docs/components/toggle): A pressable on/off button with an accessible pressed state.
- [Toggle Group](https://ui.coderocket.app/docs/components/toggle-group): A labelled group of toggle buttons with keyboard navigation.
- [Tooltip](https://ui.coderocket.app/docs/components/tooltip): Additional non-essential text shown on hover or keyboard focus.


---

# components/input-group

---
title: "Input Group"
description: "A text input with leading and trailing content."
---

Interactive preview: https://ui.coderocket.app/docs/components/input-group

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { InputGroup } from './components/ui/input-group';

<InputGroup aria-label="Website" leading="https://" placeholder="your-company.com"/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Input](/docs/components/input).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ReactNode } from "react";
import { Input, type InputProps } from "./input";
export function InputGroup({
  leading,
  trailing,
  ...props
}: InputProps & { leading?: ReactNode; trailing?: ReactNode }) {
  return (
    <div className="cr-input-group">
      {leading && <span className="cr-input-addon">{leading}</span>}
      <Input {...props} />
      {trailing && <span className="cr-input-addon">{trailing}</span>}
    </div>
  );
}
```


---

# components/input

---
title: "Input"
description: "A text input that inherits the library’s field tokens."
---

Interactive preview: https://ui.coderocket.app/docs/components/input

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Input } from './components/ui/input';

<Input aria-label="Email address" type="email" placeholder="you@company.com"/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps } from "react";
import { Input as Base } from "@base-ui/react/input";
import { cx } from "./utils";
export type InputProps = Omit<ComponentProps<typeof Base>, "className"> & {
  className?: string;
};
export function Input({ className, ...props }: InputProps) {
  return <Base {...props} className={cx("cr-input", className)} />;
}
```


---

# components/kbd

---
title: "Keyboard Key"
description: "A keyboard shortcut hint."
---

Interactive preview: https://ui.coderocket.app/docs/components/kbd

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Kbd } from './components/ui/kbd';

<span>Open search <Kbd>⌘ K</Kbd></span>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { HTMLAttributes } from "react";
import { cx } from "./utils";
export function Kbd({ className, ...props }: HTMLAttributes<HTMLElement>) {
  return <kbd {...props} className={cx("cr-kbd", className)} />;
}
```


---

# components/label

---
title: "Label"
description: "An explicit label linked to a form control."
---

Interactive preview: https://ui.coderocket.app/docs/components/label

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Label } from './components/ui/label';

<div><Label htmlFor="label-demo">Full name</Label><input id="label-demo" className="cr-input"/></div>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { LabelHTMLAttributes } from "react";
import { cx } from "./utils";
export function Label({
  className,
  htmlFor,
  children,
  ...props
}: LabelHTMLAttributes<HTMLLabelElement>) {
  return (
    <label {...props} htmlFor={htmlFor} className={cx("cr-label", className)}>
      {children}
    </label>
  );
}
```


---

# components/navigation-menu

---
title: "Navigation Menu"
description: "A navigation bar with expandable groups and real link semantics."
---

Interactive preview: https://ui.coderocket.app/docs/components/navigation-menu

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { NavigationMenu } from './components/ui/navigation-menu';

<NavigationMenu items={[{label:"Product",links:[{label:"Overview",href:"#overview",description:"Explore the platform."},{label:"Components",href:"#components"}]}]}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { NavigationMenu as Base } from "@base-ui/react/navigation-menu";
import { usePortalContainer } from "./utils";
export function NavigationMenu({
  label = "Main navigation",
  items,
  value,
  defaultValue,
  onValueChange,
}: {
  label?: string;
  value?: string | null;
  defaultValue?: string | null;
  onValueChange?: (value: string | null) => void;
  items: Array<{
    value?: string;
    label: string;
    links: Array<{
      label: string;
      href: string;
      description?: string;
      active?: boolean;
    }>;
  }>;
}) {
  const container = usePortalContainer();
  return (
    <Base.Root
      value={value}
      defaultValue={defaultValue}
      onValueChange={onValueChange}
      className="cr-navigation"
      aria-label={label}
    >
      <Base.List className="cr-navigation-list">
        {items.map((item, index) => (
          <Base.Item
            key={item.value ?? index}
            value={item.value ?? String(index)}
          >
            <Base.Trigger className="cr-button" data-variant="ghost">
              {item.label}{" "}
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.75"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <path d="m6 9 6 6 6-6" />
              </svg>
            </Base.Trigger>
            <Base.Content className="cr-navigation-content">
              {item.links.map((link) => (
                <Base.Link
                  key={link.href}
                  href={link.href}
                  active={link.active}
                  closeOnClick
                  className="cr-navigation-link"
                >
                  <strong>{link.label}</strong>
                  {link.description && <span>{link.description}</span>}
                </Base.Link>
              ))}
            </Base.Content>
          </Base.Item>
        ))}
      </Base.List>
      <Base.Portal container={container}>
        <Base.Positioner sideOffset={8} className="cr-positioner">
          <Base.Popup className="cr-popup">
            <Base.Viewport />
          </Base.Popup>
        </Base.Positioner>
      </Base.Portal>
    </Base.Root>
  );
}
```


---

# components/number-field

---
title: "Number Field"
description: "A numeric field with increment, decrement, constraints and locale formatting."
---

Interactive preview: https://ui.coderocket.app/docs/components/number-field

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { NumberField } from './components/ui/number-field';

<NumberField label="Team size" defaultValue={5} min={1} max={100}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { useId, type ComponentProps } from "react";
import { NumberField as Base } from "@base-ui/react/number-field";
import { cx } from "./utils";
export type NumberFieldProps = Omit<
  ComponentProps<typeof Base.Root>,
  "className" | "children"
> & {
  label: string;
  className?: string;
};
export function NumberField({
  label,
  id,
  className,
  step = 1,
  defaultValue = 0,
  locale = "en-US",
  ...props
}: NumberFieldProps) {
  const generatedId = useId();
  const inputId = id ?? generatedId;
  return (
    <Base.Root
      {...props}
      id={inputId}
      step={step}
      defaultValue={defaultValue}
      locale={locale}
      className={cx("cr-number-field", className)}
    >
      <Base.ScrubArea>
        <label htmlFor={inputId} className="cr-label">
          {label}
        </label>
        <Base.ScrubAreaCursor>
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <path d="m5 8-4 4 4 4M1 12h22m-4-4 4 4-4 4" />
          </svg>
        </Base.ScrubAreaCursor>
      </Base.ScrubArea>
      <Base.Group className="cr-number-group">
        <Base.Decrement aria-label={"Decrease " + label}>
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            aria-hidden="true"
          >
            <path d="M5 12h14" />
          </svg>
        </Base.Decrement>
        <Base.Input />
        <Base.Increment aria-label={"Increase " + label}>
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="2"
            strokeLinecap="round"
            aria-hidden="true"
          >
            <path d="M5 12h14M12 5v14" />
          </svg>
        </Base.Increment>
      </Base.Group>
    </Base.Root>
  );
}
```


---

# components/pagination

---
title: "Pagination"
description: "A controlled page navigator with bounded page selection."
---

Interactive preview: https://ui.coderocket.app/docs/components/pagination

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Pagination } from './components/ui/pagination';

<Pagination page={2} totalPages={8} onPageChange={page=>console.info(page)}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Button](/docs/components/button).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Button } from "./button";
export function Pagination({
  page,
  totalPages,
  onPageChange,
  label = "Pagination",
  disabled = false,
  previousLabel = "Previous",
  nextLabel = "Next",
  pageLabel = (value) => `Page ${value}`,
}: {
  page: number;
  totalPages: number;
  onPageChange: (page: number) => void;
  label?: string;
  disabled?: boolean;
  previousLabel?: string;
  nextLabel?: string;
  pageLabel?: (page: number) => string;
}) {
  const total = Number.isFinite(totalPages)
    ? Math.max(1, Math.floor(totalPages))
    : 1;
  const current = Number.isFinite(page)
    ? Math.max(1, Math.min(total, Math.floor(page)))
    : 1;
  const pages = Array.from(
    { length: Math.min(total, 5) },
    (_, i) => Math.max(1, Math.min(current - 2, total - 4)) + i,
  );
  return (
    <nav aria-label={label} className="cr-pagination">
      <Button
        variant="outline"
        size="sm"
        aria-label={previousLabel}
        disabled={disabled || current === 1}
        onClick={() => onPageChange(current - 1)}
      >
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.75"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="m15 18-6-6 6-6" />
        </svg>
      </Button>
      {pages.map((p) => (
        <Button
          key={p}
          size="sm"
          variant={p === current ? "primary" : "ghost"}
          aria-current={p === current ? "page" : undefined}
          aria-label={pageLabel(p)}
          disabled={disabled}
          onClick={() => onPageChange(p)}
        >
          {p}
        </Button>
      ))}
      <Button
        variant="outline"
        size="sm"
        aria-label={nextLabel}
        disabled={disabled || current === total}
        onClick={() => onPageChange(current + 1)}
      >
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.75"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="m9 6 6 6-6 6" />
        </svg>
      </Button>
    </nav>
  );
}
```


---

# components/popover

---
title: "Popover"
description: "A non-modal panel anchored to a trigger."
---

Interactive preview: https://ui.coderocket.app/docs/components/popover

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Popover } from './components/ui/popover';

<Popover trigger="Set dimensions" title="Dimensions"><Input aria-label="Width" placeholder="Width"/></Popover>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Input](/docs/components/input).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Popover as Base } from "@base-ui/react/popover";
import type { ComponentProps, ReactNode } from "react";
import { usePortalContainer } from "./utils";
export function Popover({
  trigger,
  triggerRender,
  title,
  children,
  open,
  onOpenChange,
  disabled,
  triggerLabel,
  initialFocus,
  finalFocus,
  side = "bottom",
  align = "center",
  closeLabel = "Close popover",
  ...rootProps
}: Omit<ComponentProps<typeof Base.Root>, "children"> & {
  trigger?: ReactNode;
  triggerRender?: ComponentProps<typeof Base.Trigger>["render"];
  title: string;
  children: ReactNode;
  disabled?: boolean;
  triggerLabel?: string;
  initialFocus?: ComponentProps<typeof Base.Popup>["initialFocus"];
  finalFocus?: ComponentProps<typeof Base.Popup>["finalFocus"];
  side?: ComponentProps<typeof Base.Positioner>["side"];
  align?: ComponentProps<typeof Base.Positioner>["align"];
  closeLabel?: string;
}) {
  const container = usePortalContainer();
  return (
    <Base.Root {...rootProps} open={open} onOpenChange={onOpenChange}>
      {(trigger != null || triggerRender != null) && (
        <Base.Trigger
          render={triggerRender}
          className="cr-button"
          data-variant="outline"
          disabled={disabled}
          aria-label={triggerLabel}
        >
          {trigger}
        </Base.Trigger>
      )}
      <Base.Portal container={container}>
        <Base.Positioner
          side={side}
          align={align}
          sideOffset={8}
          className="cr-positioner"
        >
          <Base.Popup
            className="cr-popup cr-popover"
            initialFocus={initialFocus}
            finalFocus={finalFocus}
          >
            <Base.Title className="cr-popover-title">{title}</Base.Title>
            {children}
            <Base.Close aria-label={closeLabel} className="cr-popover-close">
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.75"
                strokeLinecap="round"
                aria-hidden="true"
              >
                <path d="m6 6 12 12M18 6 6 18" />
              </svg>
            </Base.Close>
          </Base.Popup>
        </Base.Positioner>
      </Base.Portal>
    </Base.Root>
  );
}
```


---

# components/progress

---
title: "Progress"
description: "A determinate or indeterminate progress bar with a label."
---

Interactive preview: https://ui.coderocket.app/docs/components/progress

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Progress } from './components/ui/progress';

<Progress label="Upload progress" value={65}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps } from "react";
import { Progress as Base } from "@base-ui/react/progress";
export function Progress({
  label,
  value,
  max = 100,
  locale = "en-US",
}: {
  label: string;
  value: number | null;
  max?: number;
  locale?: ComponentProps<typeof Base.Root>["locale"];
}) {
  return (
    <Base.Root
      value={value}
      max={max}
      locale={locale}
      aria-label={label}
      className="cr-progress"
    >
      <div className="cr-row">
        <Base.Label className="cr-label">{label}</Base.Label>
        <Base.Value className="cr-description" />
      </div>
      <Base.Track className="cr-progress-track">
        <Base.Indicator className="cr-progress-indicator" />
      </Base.Track>
    </Base.Root>
  );
}
```


---

# components/radio-group

---
title: "Radio Group"
description: "One selection from a labelled set, with arrow-key navigation."
---

Interactive preview: https://ui.coderocket.app/docs/components/radio-group

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { RadioGroup } from './components/ui/radio-group';

<RadioGroup label="Plan" defaultValue="personal" options={[{value:"personal",label:"Personal"},{value:"team",label:"Team"}]}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps } from "react";
import { RadioGroup as Group } from "@base-ui/react/radio-group";
import { Radio as Base } from "@base-ui/react/radio";
import { cx } from "./utils";
export function RadioGroup({
  label,
  options,
  className,
  ...props
}: Omit<ComponentProps<typeof Group>, "className" | "children"> & {
  label: string;
  className?: string;
  options: Array<{ value: string; label: string; disabled?: boolean }>;
}) {
  return (
    <Group
      {...props}
      aria-label={label}
      className={cx("cr-radio-group", className)}
    >
      {options.map((option) => (
        <label
          className="cr-check-label"
          key={option.value}
          data-disabled={props.disabled || option.disabled || undefined}
        >
          <Base.Root
            value={option.value}
            disabled={option.disabled}
            className="cr-radio"
          >
            <Base.Indicator className="cr-radio-indicator" />
          </Base.Root>
          {option.label}
        </label>
      ))}
    </Group>
  );
}
```


---

# components/select

---
title: "Select"
description: "Accessible single or multiple selection with disabled options, controlled state and native form support."
---

Interactive preview: https://ui.coderocket.app/docs/components/select

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Select } from './components/ui/select';

<Select label="Timezone" defaultValue="paris" options={[{value:"paris",label:"Europe / Paris"},{value:"new-york",label:"America / New York"}]}/>
```

## Multiple values and forms

Use `multiple` for a typed array of string values. `name`, `form`, `required`, `disabled`, `readOnly`, `value` and `onValueChange` are forwarded to Base UI. Use `triggerProps` to connect additional help or validation messages.

```tsx
<Select
  label="Project labels"
  name="labels"
  multiple
  defaultValue={["design"]}
  options={[
    { value: "design", label: "Design" },
    { value: "engineering", label: "Engineering" },
    { value: "archived", label: "Archived", disabled: true },
  ]}
/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps } from "react";
import { Select as Base } from "@base-ui/react/select";
import { cx, usePortalContainer } from "./utils";
export type SelectProps<Multiple extends boolean | undefined = false> = Omit<
  Base.Root.Props<string, Multiple>,
  "children" | "items"
> & {
  label: string;
  options: ReadonlyArray<{ value: string; label: string; disabled?: boolean }>;
  placeholder?: string;
  className?: string;
  triggerProps?: Omit<
    ComponentProps<typeof Base.Trigger>,
    "children" | "className" | "render" | "disabled"
  >;
};
export function Select<Multiple extends boolean | undefined = false>({
  label,
  options,
  placeholder = "Select an option",
  className,
  triggerProps,
  ...props
}: SelectProps<Multiple>) {
  const container = usePortalContainer();
  return (
    <Base.Root {...props} items={options}>
      <Base.Trigger
        aria-label={label}
        {...triggerProps}
        className={cx("cr-select-trigger", className)}
      >
        <Base.Value placeholder={placeholder} className="cr-select-value" />
        <Base.Icon>
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth="1.75"
            strokeLinecap="round"
            strokeLinejoin="round"
            aria-hidden="true"
          >
            <path d="m6 9 6 6 6-6" />
          </svg>
        </Base.Icon>
      </Base.Trigger>
      <Base.Portal container={container}>
        <Base.Positioner
          sideOffset={6}
          alignItemWithTrigger={false}
          className="cr-positioner"
        >
          <Base.Popup className="cr-popup">
            <Base.List>
              {options.map((option) => (
                <Base.Item
                  key={option.value}
                  value={option.value}
                  disabled={option.disabled}
                  className="cr-menu-item"
                >
                  <Base.ItemText>{option.label}</Base.ItemText>
                  <Base.ItemIndicator>
                    <svg
                      width="16"
                      height="16"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.75"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      aria-hidden="true"
                    >
                      <path d="m20 6-11 11-5-5" />
                    </svg>
                  </Base.ItemIndicator>
                </Base.Item>
              ))}
            </Base.List>
          </Base.Popup>
        </Base.Positioner>
      </Base.Portal>
    </Base.Root>
  );
}
```


---

# components/separator

---
title: "Separator"
description: "A visual and semantic divider."
---

Interactive preview: https://ui.coderocket.app/docs/components/separator

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Separator } from './components/ui/separator';

<div>Account<Separator/>Preferences</div>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps } from "react";
import { Separator as Base } from "@base-ui/react/separator";
import { cx } from "./utils";
export function Separator({
  className,
  ...props
}: Omit<ComponentProps<typeof Base>, "className"> & { className?: string }) {
  return <Base {...props} className={cx("cr-separator", className)} />;
}
```


---

# components/sheet

---
title: "Sheet"
description: "A side panel with focus management, keyboard dismissal and a labelled title."
---

Interactive preview: https://ui.coderocket.app/docs/components/sheet

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Sheet } from './components/ui/sheet';

<Sheet trigger="Open sheet" title="Workspace settings" description="Manage the details of your workspace."><Input aria-label="Workspace name" placeholder="Acme"/></Sheet>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Input](/docs/components/input).

## Behavior and accessibility

- Focus trap
- Escape dismisses
- Focus returns to trigger

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Dialog as Base } from "@base-ui/react/dialog";
import type { ComponentProps, ReactNode } from "react";
import { cx, usePortalContainer } from "./utils";
export function Sheet({
  trigger,
  triggerRender,
  title,
  description,
  children,
  open,
  onOpenChange,
  initialFocus,
  finalFocus,
  className,
  footer,
  closeLabel = "Close",
  ...rootProps
}: Omit<ComponentProps<typeof Base.Root>, "children"> & {
  trigger?: ReactNode;
  /** Replace the trigger element without nesting interactive controls. */
  triggerRender?: ComponentProps<typeof Base.Trigger>["render"];
  className?: string;
  title: string;
  description?: string;
  children: ReactNode;
  initialFocus?: ComponentProps<typeof Base.Popup>["initialFocus"];
  finalFocus?: ComponentProps<typeof Base.Popup>["finalFocus"];
  footer?: ReactNode;
  closeLabel?: string;
}) {
  const container = usePortalContainer();
  return (
    <Base.Root {...rootProps} open={open} onOpenChange={onOpenChange}>
      {(trigger != null || triggerRender != null) && (
        <Base.Trigger
          render={triggerRender}
          className="cr-button"
          data-variant="outline"
        >
          {trigger}
        </Base.Trigger>
      )}
      <Base.Portal container={container}>
        <Base.Backdrop className="cr-backdrop" />
        <Base.Viewport className="cr-modal-viewport" data-kind="sheet">
          <Base.Popup
            className={cx("cr-modal cr-sheet", className)}
            initialFocus={initialFocus}
            finalFocus={finalFocus}
          >
            <header className="cr-modal-header">
              <Base.Title className="cr-modal-title">{title}</Base.Title>
              {description && (
                <Base.Description className="cr-description">
                  {description}
                </Base.Description>
              )}
              <Base.Close
                className="cr-modal-close"
                aria-label={closeLabel === "Close" ? "Close panel" : closeLabel}
              >
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.75"
                  strokeLinecap="round"
                  aria-hidden="true"
                >
                  <path d="m6 6 12 12M18 6 6 18" />
                </svg>
              </Base.Close>
            </header>
            <div className="cr-modal-content">{children}</div>
            {footer !== null && (
              <footer className="cr-modal-footer">
                {footer ?? (
                  <Base.Close className="cr-button" data-variant="secondary">
                    {closeLabel}
                  </Base.Close>
                )}
              </footer>
            )}
          </Base.Popup>
        </Base.Viewport>
      </Base.Portal>
    </Base.Root>
  );
}
```


---

# components/sidebar

---
title: "Sidebar"
description: "A collapsible application sidebar with active-link semantics."
---

Interactive preview: https://ui.coderocket.app/docs/components/sidebar

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Sidebar } from './components/ui/sidebar';

<Sidebar brand="Acme" items={[{label:"Overview",href:"#overview",active:true},{label:"Projects",href:"#projects"},{label:"Settings",href:"#settings"}]}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Button](/docs/components/button).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { useId, useState, type ReactNode } from "react";
import { Button } from "./button";
export function Sidebar({
  brand,
  items,
  footer,
  label = "Workspace navigation",
  collapsed: controlledCollapsed,
  defaultCollapsed = false,
  onCollapsedChange,
}: {
  brand: ReactNode;
  items: Array<{
    label: string;
    href: string;
    icon?: ReactNode;
    active?: boolean;
  }>;
  footer?: ReactNode;
  label?: string;
  collapsed?: boolean;
  defaultCollapsed?: boolean;
  onCollapsedChange?: (collapsed: boolean) => void;
}) {
  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
  const collapsed = controlledCollapsed ?? internalCollapsed;
  const setCollapsed = (value: boolean) => {
    if (controlledCollapsed === undefined) setInternalCollapsed(value);
    onCollapsedChange?.(value);
  };
  const navigationId = useId();
  return (
    <aside className="cr-sidebar" data-collapsed={collapsed}>
      <div className="cr-sidebar-header">
        {!collapsed && brand}
        <Button
          variant="ghost"
          size="sm"
          aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
          aria-expanded={!collapsed}
          aria-controls={navigationId}
          className="cr-sidebar-toggle"
          onClick={() => setCollapsed(!collapsed)}
        >
          {collapsed ? (
            <svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.75"
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
            >
              <rect x="3" y="3" width="18" height="18" rx="2" />
              <path d="M9 3v18m4-12 3 3-3 3" />
            </svg>
          ) : (
            <svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.75"
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
            >
              <rect x="3" y="3" width="18" height="18" rx="2" />
              <path d="M9 3v18m7-12-3 3 3 3" />
            </svg>
          )}
        </Button>
      </div>
      <nav id={navigationId} aria-label={label}>
        {items.map((item) => (
          <a
            key={item.href}
            href={item.href}
            aria-label={collapsed ? item.label : undefined}
            aria-current={item.active ? "page" : undefined}
            title={collapsed ? item.label : undefined}
          >
            <span className="cr-sidebar-icon" aria-hidden="true">
              {item.icon || (
                <svg
                  width="18"
                  height="18"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.75"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  aria-hidden="true"
                >
                  <circle cx="12" cy="12" r="9" strokeDasharray="3 3" />
                </svg>
              )}
            </span>
            {!collapsed && item.label}
          </a>
        ))}
      </nav>
      {!collapsed && footer && <footer>{footer}</footer>}
    </aside>
  );
}
```


---

# components/skeleton

---
title: "Skeleton"
description: "A reduced-motion-aware placeholder while content is loading."
---

Interactive preview: https://ui.coderocket.app/docs/components/skeleton

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Skeleton } from './components/ui/skeleton';

<div style={{width:240,display:"grid",gap:12}}><Skeleton style={{height:20,width:"60%"}}/><Skeleton style={{height:80}}/></div>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { HTMLAttributes } from "react";
import { cx } from "./utils";
export function Skeleton({
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>) {
  return (
    <div
      {...props}
      aria-hidden="true"
      className={cx("cr-skeleton", className)}
    />
  );
}
```


---

# components/slider

---
title: "Slider"
description: "A bounded numeric value with keyboard controls and a visible output."
---

Interactive preview: https://ui.coderocket.app/docs/components/slider

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Slider } from './components/ui/slider';

<Slider label="Volume" defaultValue={40} min={0} max={100}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Slider as Base } from "@base-ui/react/slider";
import { cx } from "./utils";
export type SliderProps<
  Value extends number | readonly number[] = number | readonly number[],
> = Omit<Base.Root.Props<Value>, "className" | "children"> & {
  label: string;
  className?: string;
  thumbLabels?: readonly string[];
};
export function Slider<Value extends number | readonly number[]>({
  label,
  className,
  thumbLabels,
  locale = "en-US",
  ...props
}: SliderProps<Value>) {
  const initialValue = props.value ?? props.defaultValue;
  const thumbCount = Array.isArray(initialValue) ? initialValue.length : 1;
  return (
    <Base.Root
      {...props}
      locale={locale}
      className={cx("cr-slider", className)}
    >
      <div className="cr-row">
        <Base.Label className="cr-label">{label}</Base.Label>
        <Base.Value className="cr-description" />
      </div>
      <Base.Control className="cr-slider-control">
        <Base.Track className="cr-slider-track">
          <Base.Indicator className="cr-slider-indicator" />
          {Array.from({ length: thumbCount }, (_, index) => (
            <Base.Thumb
              key={index}
              index={index}
              className="cr-slider-thumb"
              aria-label={
                thumbLabels?.[index] ??
                (thumbCount === 1
                  ? label
                  : `${label}, ${index + 1} of ${thumbCount}`)
              }
            />
          ))}
        </Base.Track>
      </Base.Control>
    </Base.Root>
  );
}
```


---

# components/spinner

---
title: "Spinner"
description: "An accessible loading indicator that respects reduced motion."
---

Interactive preview: https://ui.coderocket.app/docs/components/spinner

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Spinner } from './components/ui/spinner';

<Spinner label="Loading your workspace"/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
export function Spinner({ label = "Loading" }: { label?: string }) {
  return (
    <span className="cr-spinner-container" role="status">
      <span className="cr-spinner" aria-hidden="true" />
      <span className="cr-sr-only">{label}</span>
    </span>
  );
}
```


---

# components/switch

---
title: "Switch"
description: "An immediate on/off setting with a visible label."
---

Interactive preview: https://ui.coderocket.app/docs/components/switch

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Switch } from './components/ui/switch';

<Switch label="Email notifications" defaultChecked/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps, ReactNode } from "react";
import { Switch as Base } from "@base-ui/react/switch";
import { cx } from "./utils";
export function Switch({
  label,
  className,
  ...props
}: Omit<ComponentProps<typeof Base.Root>, "className"> & {
  label: ReactNode;
  className?: string;
}) {
  return (
    <label
      className="cr-check-label"
      data-disabled={props.disabled || undefined}
    >
      <Base.Root {...props} className={cx("cr-switch", className)}>
        <Base.Thumb className="cr-switch-thumb" />
      </Base.Root>
      <span>{label}</span>
    </label>
  );
}
```


---

# components/table

---
title: "Table"
description: "A semantic table with a caption and responsive overflow."
---

Interactive preview: https://ui.coderocket.app/docs/components/table

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Table } from './components/ui/table';

<Table caption="Team members" columns={["Name","Role"]} rows={[["Alex Morgan","Owner"],["Sam Taylor","Developer"]]}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
/* eslint-disable jsx-a11y/no-noninteractive-tabindex -- The named overflow region needs a tab stop for keyboard scrolling. */
import type { ReactNode } from "react";
export function Table({
  caption,
  columns,
  rows,
  loading = false,
  loadingMessage = "Loading records…",
  emptyMessage = "No records yet.",
  getRowKey,
}: {
  caption: string;
  columns: string[];
  rows: ReactNode[][];
  loading?: boolean;
  loadingMessage?: ReactNode;
  emptyMessage?: ReactNode;
  getRowKey?: (row: ReactNode[], index: number) => string | number;
}) {
  return (
    <div
      className="cr-table-scroll"
      role="region"
      aria-label={caption}
      tabIndex={0}
    >
      <table className="cr-table" aria-busy={loading || undefined}>
        <caption>{caption}</caption>
        <thead>
          <tr>
            {columns.map((column, index) => (
              <th key={index} scope="col">
                {column}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {!loading &&
            rows.map((row, index) => (
              <tr key={getRowKey?.(row, index) ?? index}>
                {row.map((value, column) => (
                  <td key={column}>{value}</td>
                ))}
              </tr>
            ))}
          {(loading || !rows.length) && (
            <tr>
              <td colSpan={Math.max(1, columns.length)}>
                {loading ? loadingMessage : emptyMessage}
              </td>
            </tr>
          )}
        </tbody>
      </table>
    </div>
  );
}
```


---

# components/tabs

---
title: "Tabs"
description: "Related panels connected to an accessible tab list."
---

Interactive preview: https://ui.coderocket.app/docs/components/tabs

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Tabs } from './components/ui/tabs';

<Tabs label="Account" items={[{value:"profile",label:"Profile",content:"Your profile settings."},{value:"notifications",label:"Notifications",content:"Choose how you stay informed."}]}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Tabs as Base } from "@base-ui/react/tabs";
import type { ReactNode } from "react";
export function Tabs({
  label,
  items,
  value,
  defaultValue,
  onValueChange,
  keepMounted = false,
  activateOnFocus = false,
}: {
  label: string;
  items: Array<{
    value: string;
    label: string;
    content: ReactNode;
    disabled?: boolean;
  }>;
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  keepMounted?: boolean;
  activateOnFocus?: boolean;
}) {
  return (
    <Base.Root
      value={value}
      defaultValue={defaultValue ?? items.find((item) => !item.disabled)?.value}
      onValueChange={(v) => {
        if (typeof v === "string") onValueChange?.(v);
      }}
      className="cr-tabs"
    >
      <Base.List
        activateOnFocus={activateOnFocus}
        aria-label={label}
        className="cr-tabs-list"
      >
        {items.map((item) => (
          <Base.Tab
            key={item.value}
            value={item.value}
            disabled={item.disabled}
            className="cr-tab"
          >
            {item.label}
          </Base.Tab>
        ))}
      </Base.List>
      {items.map((item) => (
        <Base.Panel
          key={item.value}
          value={item.value}
          className="cr-tab-panel"
          keepMounted={keepMounted}
        >
          {item.content}
        </Base.Panel>
      ))}
    </Base.Root>
  );
}
```


---

# components/textarea

---
title: "Textarea"
description: "A multiline input with native form semantics."
---

Interactive preview: https://ui.coderocket.app/docs/components/textarea

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Textarea } from './components/ui/textarea';

<Textarea aria-label="Project description" placeholder="Tell us about your project…"/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import type { ComponentProps } from "react";
import { Field as Base } from "@base-ui/react/field";
import { cx } from "./utils";
export function Textarea({
  className,
  rows = 4,
  id,
  name,
  value,
  defaultValue,
  disabled,
  required,
  readOnly,
  autoFocus,
  form,
  ...props
}: ComponentProps<"textarea">) {
  const controlProps = {
    id,
    name,
    value,
    defaultValue,
    disabled,
    required,
    readOnly,
    autoFocus,
    form,
  };
  return (
    <Base.Control
      {...controlProps}
      render={<textarea {...props} rows={rows} />}
      className={cx("cr-textarea", className)}
    />
  );
}
```


---

# components/toast

---
title: "Toast"
description: "Accessible notifications with a provider, imperative manager and dismiss controls."
---

Interactive preview: https://ui.coderocket.app/docs/components/toast

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Toast } from './components/ui/toast';

<Toast/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

Dependencies: [Button](/docs/components/button).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Toast as Base } from "@base-ui/react/toast";
import { usePortalContainer } from "./utils";
import { Button } from "./button";
import type { ComponentProps } from "react";
export const useToast = Base.useToastManager;
export const createToastManager = Base.createToastManager;
export function ToastProvider({
  children,
  limit = 3,
  timeout = 6000,
  dismissLabel = "Dismiss notification",
  ...props
}: ComponentProps<typeof Base.Provider> & { dismissLabel?: string }) {
  return (
    <Base.Provider {...props} limit={limit} timeout={timeout}>
      {children}
      <ToastViewport dismissLabel={dismissLabel} />
    </Base.Provider>
  );
}
function ToastViewport({ dismissLabel }: { dismissLabel: string }) {
  const { toasts } = Base.useToastManager();
  const container = usePortalContainer();
  return (
    <Base.Portal container={container}>
      <Base.Viewport className="cr-toast-viewport">
        {toasts.map((toast) => (
          <Base.Root key={toast.id} toast={toast} className="cr-toast">
            <Base.Content>
              <Base.Title className="cr-toast-title" />
              <Base.Description className="cr-description" />
              {toast.actionProps && (
                <Base.Action className="cr-button" data-variant="secondary" />
              )}
            </Base.Content>
            <Base.Close aria-label={dismissLabel} className="cr-toast-close">
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.75"
                strokeLinecap="round"
                aria-hidden="true"
              >
                <path d="m6 6 12 12M18 6 6 18" />
              </svg>
            </Base.Close>
          </Base.Root>
        ))}
      </Base.Viewport>
    </Base.Portal>
  );
}
/** A self-contained notification example. Applications should use ToastProvider + useToast. */
export function Toast({
  title = "Changes saved",
  description = "Your preferences are up to date.",
}: {
  title?: string;
  description?: string;
}) {
  return (
    <ToastProvider>
      <ToastTrigger title={title} description={description} />
    </ToastProvider>
  );
}
function ToastTrigger({
  title,
  description,
}: {
  title: string;
  description: string;
}) {
  const manager = useToast();
  return (
    <Button onClick={() => manager.add({ title, description })}>
      Show notification
    </Button>
  );
}
```


---

# components/toggle-group

---
title: "Toggle Group"
description: "A labelled group of toggle buttons with keyboard navigation."
---

Interactive preview: https://ui.coderocket.app/docs/components/toggle-group

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { ToggleGroup } from './components/ui/toggle-group';

<ToggleGroup label="Text alignment" items={[{value:"left",label:"Left"},{value:"center",label:"Center"},{value:"right",label:"Right"}]}/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { ToggleGroup as Group } from "@base-ui/react/toggle-group";
import { Toggle } from "@base-ui/react/toggle";
import { cx } from "./utils";
export type ToggleGroupProps<Value extends string = string> = Omit<
  Group.Props<Value>,
  "className" | "children"
> & {
  label: string;
  className?: string;
  items: Array<{ value: Value; label: string; disabled?: boolean }>;
};
export function ToggleGroup<Value extends string>({
  label,
  items,
  className,
  multiple = false,
  ...props
}: ToggleGroupProps<Value>) {
  return (
    <Group
      {...props}
      aria-label={label}
      multiple={multiple}
      className={cx("cr-toggle-group", className)}
    >
      {items.map((item) => (
        <Toggle
          key={item.value}
          value={item.value}
          disabled={item.disabled}
          className="cr-toggle"
        >
          {item.label}
        </Toggle>
      ))}
    </Group>
  );
}
```


---

# components/toggle

---
title: "Toggle"
description: "A pressable on/off button with an accessible pressed state."
---

Interactive preview: https://ui.coderocket.app/docs/components/toggle

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Toggle } from './components/ui/toggle';

<Toggle aria-label="Bold text">B</Toggle>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Toggle as Base } from "@base-ui/react/toggle";
import type { ComponentProps } from "react";
import { cx } from "./utils";
export function Toggle({
  className,
  ...props
}: Omit<ComponentProps<typeof Base>, "className"> & { className?: string }) {
  return <Base {...props} className={cx("cr-toggle", className)} />;
}
```


---

# components/tooltip

---
title: "Tooltip"
description: "Additional non-essential text shown on hover or keyboard focus."
---

Interactive preview: https://ui.coderocket.app/docs/components/tooltip

## Usage

Get this component from a [saved library export](/docs/export) or the [connected CLI](/docs/agents). The imports below refer to local files installed in your app.

Import `styles/components.css`, then `styles/theme.css` once. Wrap your app in `ThemeScope` from `components/ui/utils` so typography, focus and overlays share the theme. The [installation guide](/docs/export) covers runtime dependencies and React/Next.js setup.

```tsx
import { Tooltip } from './components/ui/tooltip';

<Tooltip trigger="Save" content="Save your changes to this library"/>
```

## Design system

This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in [Export](/docs/export).

## Behavior and accessibility

- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.

Status: **experimental** during early access. Sample previews do not send emails, process payments or upload files to a service.

## Source and props

This is the exported source, using the same implementation as the editor.

```tsx
"use client";
import { Tooltip as Base } from "@base-ui/react/tooltip";
import type { ComponentProps, ReactNode } from "react";
import { usePortalContainer } from "./utils";
export function Tooltip({
  trigger,
  triggerRender,
  content,
  side = "top",
  align = "center",
  delay,
  ...rootProps
}: Omit<ComponentProps<typeof Base.Root>, "children"> & {
  trigger?: ReactNode;
  triggerRender?: ComponentProps<typeof Base.Trigger>["render"];
  content: ReactNode;
  side?: ComponentProps<typeof Base.Positioner>["side"];
  align?: ComponentProps<typeof Base.Positioner>["align"];
  delay?: ComponentProps<typeof Base.Provider>["delay"];
}) {
  const container = usePortalContainer();
  return (
    <Base.Provider delay={delay}>
      <Base.Root {...rootProps}>
        <Base.Trigger
          render={triggerRender}
          className="cr-button"
          data-variant="outline"
        >
          {trigger}
        </Base.Trigger>
        <Base.Portal container={container}>
          <Base.Positioner
            side={side}
            align={align}
            sideOffset={6}
            className="cr-positioner"
          >
            <Base.Popup className="cr-tooltip">
              {content}
              <Base.Arrow />
            </Base.Popup>
          </Base.Positioner>
        </Base.Portal>
      </Base.Root>
    </Base.Provider>
  );
}
```


---

# design-system

---
title: Design system
description: Make one set of design decisions, then apply it consistently across your entire library.
---

Your design system is the shared foundation behind every component: the color of a primary action, the height of an input, the typeface of a heading, and the space between elements. CodeRocket stores those decisions as a structured model and turns them into CSS.

## Start with global tokens

A **token** is a named design value. Instead of choosing a different blue for every button, you define `primary` once and reuse it throughout the library.

| In Customize      | What it controls                                       | Example output              |
| ----------------- | ------------------------------------------------------ | --------------------------- |
| Colors            | Semantic backgrounds, text, borders and states         | `--cr-primary: #2563eb`     |
| Typography        | Body and heading fonts, scale, weights and line height | `--cr-font-size: 14px`      |
| Spacing & density | Spacing rhythm and control height                      | `--cr-control-height: 32px` |
| Shape             | Corner radii, borders and shadows                      | `--cr-radius-md: 6px`       |
| Motion            | Transition duration and easing                         | `--cr-motion: 150ms`        |

Changes apply to components that inherit those values. Open a complete block alongside individual components to check whether your choices still work in context.

## Keep color pairs together

Semantic colors describe a purpose: `primary` for the main action, `surface` for a card, and `destructive` for a destructive action. Each background has a matching foreground for readable content.

For example, these values belong together:

```css title="styles/theme.css"
:root {
  --cr-primary: #2563eb;
  --cr-primary-foreground: #ffffff;
  --cr-surface: #ffffff;
  --cr-surface-foreground: #171717;
  --cr-radius-md: 6px;
  --cr-control-height: 32px;
}
```

The **Accessibility** view checks the main text/background pairs against a 4.5:1 contrast threshold. Changing only a background can make its text unreadable. Review focus, hover, disabled and error states in your application as well.

## Give one component an override

An override changes a particular component while keeping the rest of your system consistent. For example, you can give dialogs a larger corner radius without rounding every input.

1. Open **Components** and select **Dialog**.
2. In **Customize**, adjust its component-specific **Corner radius**.
3. Switch to **Button** to confirm that its shared radius is unchanged.
4. Use **Reset** in the Dialog override section to return to the inherited value.

The style model resolves from the broadest rule to the most specific:

```text
Global tokens → Component recipe → Component override → Instance style
```

Recipes provide component defaults. Overrides are your library-level exceptions. After export, your application can provide instance props, classes or styles when one use needs a different treatment.

## Typography and font loading

Set the body and heading families separately. The visual controls offer system sans, serif and monospace stacks, which work without external font requests.

The model also accepts `inter` and `geist`. If you use either in a generated or imported design, load that font in your application. Selecting a family in the model does not download a font file. Use the exported `ThemeScope` so components inherit the intended typography and overlays share the same theme.

## Light and dark appearance

Switching appearance in the editor starts from the corresponding semantic palette. It replaces the current color palette; use **Undo** if you want your previous edited colors back.

An export contains the appearance you saved. For a runtime theme toggle in your app, maintain a token set for each appearance and switch the CSS scope in your application.

## A model you can keep

Every export includes `design-system.json` with `schemaVersion: 1`. It contains the saved name, framework, appearance, global tokens, recipes and overrides. The model is separate from the generated React or Vue source, so you can keep both under version control.

**Save** records a new version of the model. Restoring a version changes the design preview; it does not delete custom components saved to the library. [Export and installation](/docs/export) explains how to move the complete library into your project.


---

# export

---
title: Export and installation
description: Install your saved React or Vue library as local source, with or without Tailwind.
---

Your export contains the components, blocks and theme from your saved library. The files live in your application and can be edited like any other source. You do not need a CodeRocket connection for them to render.

Vue libraries export native `.vue` components, Vue-specific CLI/MCP rules and the same theme files. Follow [Vue and Nuxt installation](/docs/vue). The React setup below applies to React libraries.

## Install through npm

For ongoing updates, use the official CLI with Node.js 24 or newer. Save your library and create a token in **Connect**, then run these commands from your application folder with the library ID shown there:

In bash or zsh, paste your connection token at the hidden prompt and press Enter:

```bash
printf "Connection token: "
read -rs CODEROCKET_TOKEN
export CODEROCKET_TOKEN
printf "\n"
npx @coderocketapp/cli@latest init YOUR_LIBRARY_ID
npx @coderocketapp/cli@latest add button dialog
```

The CLI writes source and styles into your application and prints the runtime dependencies to install. Use `npx @coderocketapp/cli@latest list` to browse items and `npx @coderocketapp/cli@latest sync` after saving design changes. Keep the token in your environment. See [CLI and coding agents](/docs/agents) for local-edit protection, blocks and MCP setup.

Hosted registry access needs an account, a saved library and its token. The [MIT-licensed component source](https://github.com/elreco/coderocket-ui) can be used without an account. The ZIP workflow below is also available for a saved Studio library.

## Download

Save your library and select **Export**. The archive includes:

```text
components/ui/             React primitives and controls
components/blocks/         Complete patterns with typed callbacks
styles/components.css     Compiled component styles
styles/blocks.css          Compiled block styles
styles/theme.css           Your generated theme
examples/blocks-preview.tsx Interactive examples from the Studio
design-system.json        Your versioned design model
AGENTS.md                 Design rules for coding agents
LICENSE                   MIT license for exported source
```

## Install dependencies

Use matching versions of React and React DOM. The current components are tested with React 19.3; Calendar and DatePicker require at least React 19.2 because they use `useEffectEvent`. Lucide supplies icons for the calendar, datepicker and blocks.

```bash
npm install react@19.3.0 react-dom@19.3.0 @base-ui/react@1.8.0 lucide-react@1.47.0
```

Copy the folders into your app. Import styles once in your entry point or root layout:

```tsx
import "./styles/components.css";
import "./styles/blocks.css";
import "./styles/theme.css";
```

Then use a component directly:

```tsx
import { Button } from "./components/ui/button";

export function SaveAction() {
  return (
    <Button onClick={() => console.info("Save requested")}>Save changes</Button>
  );
}
```

## Tailwind or plain CSS

Tailwind is optional for consumers. The archive contains compiled styles. You can add Tailwind utilities in your app, but the exported components do not require a Tailwind plugin or a build-time connection to CodeRocket.

## Next.js

Interactive component files include `'use client'`. You can import them from Server Components. Place client event handlers inside your own Client Component and import global styles from your root layout.

## Blocks connect to your backend

The full export includes `examples/blocks-preview.tsx`. Render its `BlockShowcase` inside `ThemeScope`, for example `<BlockShowcase slug="features" />`, to start from the same visual example shown in the Studio. Copy and adapt its props, illustrations and callbacks for your product. Example actions only update local sample data.

Block action callbacks receive form data or record identifiers. Implement those callbacks in your application. Authentication, billing, email delivery, invitations and file storage are not bundled backends.

For example, `FileUpload` accepts `onUpload(file, { signal, onProgress })`. Report actual transport progress, honor cancellation and reject the promise when the upload fails.

## Ownership and updates

Edit any exported file. Your modifications belong in your codebase. Keep your export under version control and review changes when installing a newer version. The CodeRocket CLI detects local modifications before replacing files.

## Theme and overlays

Wrap your application in the exported `ThemeScope` to share typography, focus styles and the theme with popovers and dialogs:

```tsx
import { ThemeScope } from "./components/ui/utils";
import "./styles/components.css";
import "./styles/theme.css";

export function App() {
  return <ThemeScope>{/* Your application */}</ThemeScope>;
}
```

Custom compositions saved in the editor are included as `custom-<slug>.tsx`. Pass your own `onAction(action, values)` handler to connect forms and actions to your backend. The editor preview uses a local status message to show which callback fired.

## Import an existing project

Run `coderocket import` in your project, using the CLI available in **Connect**. The command writes `.coderocket/import-report.json` locally and does not upload source code.

In the editor, press **⌘ K** (or **Ctrl K**) and choose **Import project tokens**. Select the report, inspect the before/after values, then apply the reviewed tokens. Save the library when the preview looks right.

The first importer supports recognized hex color variables and px/rem radius variables. Custom font installation, HSL/OKLCH conversion and existing component source adoption require manual review. Existing source files are listed as an inventory and remain in your project.


---

# getting-started

---
title: Quick start
description: Create a library, customize a real component, and use the exported source in your app.
---

For Vue, follow the [Vue setup guide](/docs/vue); the Studio workflow and AI tools are the same.

This walkthrough uses a React library called **Acme UI**. You can complete the design manually; AI is optional.

You can use the [MIT-licensed component source](https://github.com/elreco/coderocket-ui) without an account. This walkthrough uses the hosted Studio to save a customized library and install it through its private registry, which requires an account and a library connection token.

## 1. Create your library

[Create an account](/signup), confirm your email address, then open the editor. Your libraries are private to your account.

Choose **New library**, name it **Acme UI**, and select React with a light starting appearance. Leave the optional design description empty for this walkthrough, then select **Create library**.

## 2. Set a visual direction

Open **Customize** and try these changes:

| Control            | Value     | What to look for                                |
| ------------------ | --------- | ----------------------------------------------- |
| Primary color      | `#2563eb` | Primary actions use the same blue accent        |
| Primary foreground | `#ffffff` | Button text stays readable on that accent       |
| Density            | Compact   | Form controls become shorter                    |
| Radius md          | `6px`     | Standard controls use a consistent corner shape |

The preview updates immediately. Switch between **Components** and **Blocks** to check the same choices across different interfaces. The **Accessibility** view reports text contrast for the main semantic color pairs.

Want one component to look different? Select it in **Components**, then adjust its override at the top of **Customize**. **Reset** removes that override and restores the shared design values.

## 3. Optionally refine with AI

Open **AI assistant** and describe a concrete change:

> Make this a compact developer workspace. Keep the blue accent, use subtle shadows, and reduce the dialog corner radius to 8px.

Inspect the proposed changes before applying them. You can undo a change in the preview. If the assistant asks for clarification, answer it before applying anything. See [working with AI](/docs/ai) for custom components and the limits of generation.

## 4. Save a version

Select **Save** to store the current design. **Version history** lets you restore an earlier design into the preview, then save it as a new version. Restoring a theme does not remove custom components already saved to the library.

If another session has changed the library, saving reports a conflict. Reload and inspect the newer version before continuing.

## 5. Install and render a component

Save any pending changes, then open **Connect** and choose **Create connection**. Copy the token shown once. With Node.js 24 or newer installed, run the official CLI from your application's folder using the library ID shown in **Connect**:

In bash or zsh, paste your connection token at the hidden prompt and press Enter:

```bash
printf "Connection token: "
read -rs CODEROCKET_TOKEN
export CODEROCKET_TOKEN
printf "\n"
npx @coderocketapp/cli@latest init YOUR_LIBRARY_ID
npx @coderocketapp/cli@latest add button
```

Keep your token in the terminal environment, outside source and version control. The CLI remembers the library ID in `.coderocket/manifest.json` and prints the required runtime dependencies; install those in your app. React and React DOM must use matching versions. See [CLI and coding agents](/docs/agents) for configuration and token renewal.

You can also choose **Export** and copy the ZIP's `components/` and `styles/` folders into your app. Follow [export and installation](/docs/export) for that setup.

Import the compiled styles once, then use the source directly:

```tsx title="src/App.tsx"
import { Button } from "./components/ui/button";
import { ThemeScope } from "./components/ui/utils";
import "./styles/components.css";
import "./styles/theme.css";

export default function App() {
  return (
    <ThemeScope>
      <Button>Save changes</Button>
    </ThemeScope>
  );
}
```

Your button uses the saved Acme UI theme. It renders from local source and CSS. Connect its `onClick` callback to your application when you add behavior.

Keep `CODEROCKET_TOKEN` set when using the CLI again. List available items, add more components, or save a new design in the Studio and sync it:

```bash
npx @coderocketapp/cli@latest list
npx @coderocketapp/cli@latest add dialog
npx @coderocketapp/cli@latest sync
```

The CLI preserves locally edited files and places conflicting updates in a review folder.


  - [Understand the design system →](/docs/design-system): Learn how global tokens and component overrides work together.
  - [Finish your integration →](/docs/export): Set up blocks, Next.js, optional Tailwind, and source updates.



---

# index

---
title: Introduction
description: Create a React or Vue component library for your product. Define its style, build with it, and bring the source into your app.
---

**CodeRocket UI is a visual workspace for building your own component library.** Choose your colors, typography and spacing once. Preview those choices across buttons, forms, dashboards and other interface patterns. Use AI when you want help refining the design or composing a new component.

The result is a library of **editable React or Vue source files and local CSS**, ready to live in your codebase.

Start with the [React setup](/docs/getting-started) or [Vue setup](/docs/vue), or explore the components in your framework:


  - [React components →](/docs/components): Try the 48 React components and inspect their props, behavior, and source.
  - [Vue components →](/docs/vue/components): Try the 48 Vue components and inspect their props, behavior, and source.


## From a direction to your codebase

1. **Define the foundation.** Start from a light or dark palette. Adjust colors, fonts, spacing and shapes with visual controls.
2. **See the whole system.** Changes flow through the component catalogue and 26 complete blocks, so you can judge a design in context.
3. **Make it yours.** Override an individual component, or describe a new form or layout to AI. Inspect each proposal before accepting it.
4. **Take the source.** Save a version and download a ZIP. For ongoing use, connect your project through the registry, CLI or a coding agent.

## What you are creating

| Part                | What it contains                                                 | Where it goes                                                |
| ------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------ |
| Design system       | Your colors, typography, spacing, shapes and component overrides | A versioned `design-system.json` and generated theme CSS     |
| Components          | Individual controls, such as buttons, inputs and dialogs         | Editable React or Vue files in `components/ui/`              |
| Blocks              | Complete interface patterns built from those controls            | React or Vue files in `components/blocks/`                   |
| Custom compositions | The component or block you generate and approve                  | Source, a structured specification, a story and a smoke test |

A block supplies the interface. Your application provides its data, authentication, payments and other backend behavior through typed props and callbacks.

## Build your way


  - [Design tokens and themes](/docs/design-system): Understand global styles, component overrides, and the CSS your app receives.
  - [Working with AI](/docs/ai): Refine a theme or compose a component, with a review step before saving.
  - [Export and installation](/docs/export): Install your saved source in React, Vue, Next.js or Nuxt, with or without Tailwind.
  - [Coding agents and CLI](/docs/agents): Give your development tools the same components and design rules.


## Current availability

**React and Vue are available today**, with 48 components and 26 blocks each. [Explore React](/docs/components) or [explore Vue](/docs/vue/components). Svelte and Solid remain planned; their framework options record interest. The catalogue is experimental during free early access, so verify components in your application before shipping.

Exported component source is **MIT licensed**. It runs locally with React and Base UI, or Vue and Reka UI, plus CSS, and makes no runtime requests to CodeRocket. The hosted Studio and its design-system engine are separate from that source license.


---

# pilot

---
title: Free & Pro access
description: Start with a free editor and source export. Request Pro for 100 AI generations per month, with payment and access arranged personally.
---

The CodeRocket UI editor, component catalogue and editable source export are free. **Pro adds more AI generations**, using the same tools and components.

[Request Pro access →](/contact?intent=pro)

## Choose your AI allowance

|                                      | Free                                     | Pro                                                    |
| ------------------------------------ | ---------------------------------------- | ------------------------------------------------------ |
| Editor, components and source export | Included                                 | Included                                               |
| AI generations                       | 5 trial generations in total per account | 100 per UTC calendar month while paid access is active |
| Activation                           | Create an account                        | Arranged personally after payment                      |
| Payment                              | None                                     | Price and access period agreed with the owner          |

The Free trial does not reset daily or monthly. You can continue editing manually and exporting source after using it.

Pro's AI allowance resets at the beginning of each calendar month in UTC. Unused generations do not carry over. Pro is active only for the agreed paid period; a monthly quota reset does not extend that period.

**Both plans are subject to a shared service limit.** AI can be temporarily unavailable when that limit is reached or when the provider is unavailable. The manual editor and export remain usable.

## How a Pro subscription works

1. [Request Pro access](/contact?intent=pro). Use the email address of your CodeRocket UI account, if you already have one, and tell us how you plan to use it.
2. We reply personally to agree on the price, payment arrangements and access period. There is no fixed public price at this stage.
3. After payment, we activate Pro manually on your account for that period. Your account badge shows your current plan and remaining AI allowance.
4. To continue after the agreed end date, arrange a renewal with us. There is no automatic billing or automatic renewal.

Sending the form is only an enquiry. It does not charge you, activate Pro or start a subscription. Your saved libraries and source export remain available when paid access ends.

## Need integration help instead?

We can also discuss a focused piece of work around your design system or React or Vue integration. Select **Help with an integration** in the [contact form](/contact?intent=integration). This is a separate conversation about scope and price; hands-on services are not included automatically in Pro.

## Framework availability

**React and Vue are available today.** Svelte and SolidJS support is planned, with no announced release dates. [Register your framework interest](/contact?intent=framework) to explain what you need. Buying Pro does not provide an unreleased framework implementation or guarantee a release date.

## What happens to your request

Your name, email and project details are saved in our private administration workspace. The owner receives a notification and reviews the request personally, then replies using the email address you provided. No response time is guaranteed.

We ask for your permission to contact you about that enquiry. The form does not sign you up for a newsletter or an automatic sales sequence. Please leave out passwords, API keys and confidential client data.

[Request Pro access →](/contact?intent=pro)


---

# vue/blocks/api-keys

---
title: "API Keys"
description: "A masked key list with creation and revocation callbacks."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/api-keys

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import ApiKeysBlock from './components/blocks/api-keys.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import WorkspaceHeading from "./workspace-heading.vue";
import ActionForm from "./action-form.vue";
import type { FormAction } from "./common";
import Card from "../ui/card.vue";
import Dialog from "../ui/dialog.vue";
import Button from "../ui/button.vue";
import Field from "../ui/field.vue";
import Input from "../ui/input.vue";
import Badge from "../ui/badge.vue";
import { ref } from "vue";
import { Plus, ShieldCheck, KeyRound } from "@lucide/vue";
const props = defineProps<{
  keys: Array<{ id: string; name: string; prefix: string; created: string }>;
  onCreate: FormAction;
  onRevoke: (id: string) => void | Promise<void>;
}>();
const error = ref(false),
  busy = ref<string | null>(null);
async function revoke(id: string) {
  if (busy.value) return;
  busy.value = id;
  error.value = false;
  try {
    await props.onRevoke(id);
  } catch {
    error.value = true;
  } finally {
    busy.value = null;
  }
}
</script>
<template>
  <Card class="cr-workspace-block cr-workspace-keys"
    ><WorkspaceHeading
      eyebrow="Developer settings"
      title="API keys"
      description="Connect your tools to your workspace."
      ><template #action
        ><Dialog
          title="Create an API key"
          description="Give this key a name that helps you recognize its integration."
          :footer="null"
          ><template #trigger
            ><Button variant="outline"
              ><Plus :size="16" aria-hidden="true" />Create key</Button
            ></template
          ><ActionForm
            :on-submit="onCreate"
            submit-label="Create key"
            success-message="Key created. Follow your application’s secure delivery flow."
            ><Field label="Key name"
              ><Input
                name="name"
                required
                placeholder="Production integration" /></Field></ActionForm></Dialog></template
    ></WorkspaceHeading>
    <div class="cr-workspace-security-note">
      <ShieldCheck :size="17" aria-hidden="true" /><span
        >Use keys on your server. Keep them out of public repositories and
        client-side code.</span
      >
    </div>
    <div class="cr-workspace-list-heading">
      <span>Secret keys</span><Badge variant="outline">{{ keys.length }}</Badge>
    </div>
    <ul class="cr-workspace-list cr-workspace-key-list">
      <li v-for="key in keys" :key="key.id">
        <span class="cr-workspace-icon-tile"
          ><KeyRound :size="18" aria-hidden="true"
        /></span>
        <div class="cr-workspace-person">
          <strong>{{ key.name }}</strong
          ><span
            ><code>{{ key.prefix }}••••</code
            ><span class="cr-workspace-key-date"
              >Created {{ key.created }}</span
            ></span
          >
        </div>
        <Button
          variant="ghost"
          size="sm"
          :disabled="!!busy"
          :loading="busy === key.id"
          :aria-label="`Revoke ${key.name}`"
          @click="revoke(key.id)"
          >Revoke</Button
        >
      </li>
    </ul>
    <p v-if="!keys.length" class="cr-block-empty">
      No API keys yet. Create a key to connect an integration.
    </p>
    <p v-if="error" role="alert" class="cr-description">
      Unable to revoke this key.
    </p></Card
  >
</template>
```


---

# vue/blocks/app-header

---
title: "App Header"
description: "Breadcrumbs, search and account actions in an application header."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/app-header

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import AppHeaderBlock from './components/blocks/app-header.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import Breadcrumb from "../ui/breadcrumb.vue";
import Button from "../ui/button.vue";
import Dropdown from "../ui/dropdown.vue";
import Avatar from "../ui/avatar.vue";
import { Layers2, Search } from "@lucide/vue";
defineProps<{
  breadcrumbs: Array<{ label: string; href?: string }>;
  accountName: string;
  onSearch: () => void;
  onSignOut: () => void;
}>();
</script>
<template>
  <header class="cr-block-header cr-workspace-header">
    <div class="cr-workspace-header-location">
      <span class="cr-workspace-header-icon"
        ><Layers2 :size="18" aria-hidden="true" /></span
      ><Breadcrumb :items="breadcrumbs" />
    </div>
    <div class="cr-workspace-header-actions">
      <Button variant="ghost" @click="onSearch"
        ><Search :size="17" aria-hidden="true" /><span>Search</span></Button
      ><span class="cr-workspace-header-divider" aria-hidden="true" /><Dropdown
        :items="[{ label: 'Sign out', onSelect: onSignOut }]"
        ><template #trigger
          ><Button variant="outline"
            ><Avatar :name="accountName" :size="28" /><span
              class="cr-workspace-header-name"
              >{{ accountName }}</span
            ><span class="cr-sr-only">Account menu</span></Button
          ></template
        ></Dropdown
      >
    </div>
  </header>
</template>
```


---

# vue/blocks/app-sidebar

---
title: "App Sidebar"
description: "Collapsible workspace navigation with account identity."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/app-sidebar

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import AppSidebarBlock from './components/blocks/app-sidebar.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import Sidebar from "../ui/sidebar.vue";
import Avatar from "../ui/avatar.vue";
import { Layers2, LayoutGrid } from "@lucide/vue";
import { RenderContent } from "../ui/display-utils";
import type { SidebarItem } from "./common";
defineProps<{ workspace: string; items: SidebarItem[]; accountName: string }>();
</script>
<template>
  <div class="cr-app-sidebar-block">
    <Sidebar :items="items"
      ><template #brand
        ><span class="cr-workspace-brand"
          ><span class="cr-workspace-brand-icon"
            ><Layers2 :size="19" aria-hidden="true" /></span
          ><span
            ><strong>{{ workspace }}</strong
            ><small>Workspace</small></span
          ></span
        ></template
      ><template #icon="{ item }"
        ><RenderContent v-if="item.icon" :content="item.icon" /><LayoutGrid
          v-else
          :size="18"
          aria-hidden="true" /></template
      ><template #footer
        ><div class="cr-workspace-account">
          <Avatar :name="accountName" :size="34" /><span
            ><strong>{{ accountName }}</strong
            ><small>Account</small></span
          >
        </div></template
      ></Sidebar
    >
  </div>
</template>
```


---

# vue/blocks/billing

---
title: "Billing"
description: "Subscription summary, seat usage and invoice links."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/billing

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import BillingBlock from './components/blocks/billing.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import WorkspaceHeading from "./workspace-heading.vue";
import type { FormAction } from "./common";
import Card from "../ui/card.vue";
import Badge from "../ui/badge.vue";
import Button from "../ui/button.vue";
import Progress from "../ui/progress.vue";
import { computed } from "vue";
import { CreditCard, ArrowUpRight, FileText } from "@lucide/vue";
const props = defineProps<{
  plan: string;
  price: string;
  renewal: string;
  usage: number;
  limit: number;
  onManage: () => void;
  invoices: Array<{ id: string; date: string; amount: string; href: string }>;
}>();
const safeLimit = computed(() =>
  Number.isFinite(props.limit) && props.limit > 0 ? props.limit : 1,
);
const safeUsage = computed(() =>
  Number.isFinite(props.usage)
    ? Math.max(0, Math.min(props.usage, safeLimit.value))
    : 0,
);
</script>
<template>
  <Card class="cr-workspace-block cr-workspace-billing"
    ><WorkspaceHeading
      eyebrow="Subscription"
      title="Billing"
      description="Your plan, usage and invoices in one place."
      ><template #action
        ><span class="cr-workspace-icon-tile"
          ><CreditCard :size="20" aria-hidden="true" /></span></template
    ></WorkspaceHeading>
    <div class="cr-workspace-plan">
      <div class="cr-workspace-plan-main">
        <Badge variant="outline">{{ plan }} plan</Badge
        ><strong class="cr-workspace-plan-price">{{ price }}</strong
        ><span class="cr-description">{{ renewal }}</span>
      </div>
      <Button variant="outline" @click="onManage"
        >Manage plan<ArrowUpRight :size="16" aria-hidden="true"
      /></Button>
    </div>
    <div class="cr-workspace-usage">
      <div class="cr-workspace-list-heading">
        <span>Team seats</span
        ><span
          >{{ usage }}
          <span class="cr-description">/ {{ limit }} used</span></span
        >
      </div>
      <Progress label="Seats used" :value="safeUsage" :max="safeLimit" />
    </div>
    <div class="cr-workspace-list-heading">
      <span>Invoice history</span
      ><Badge variant="outline">{{ invoices.length }}</Badge>
    </div>
    <ul class="cr-workspace-list cr-workspace-invoice-list">
      <li v-for="invoice in invoices" :key="invoice.id">
        <span class="cr-workspace-icon-tile"
          ><FileText :size="17" aria-hidden="true" /></span
        ><span>{{ invoice.date }}</span
        ><strong>{{ invoice.amount }}</strong
        ><a
          class="cr-link cr-workspace-invoice-link"
          :href="invoice.href"
          :aria-label="`View invoice dated ${invoice.date}`"
          >View<ArrowUpRight :size="15" aria-hidden="true"
        /></a>
      </li>
    </ul>
    <p v-if="!invoices.length" class="cr-block-empty">
      No invoices yet. They will appear here after your first payment.
    </p></Card
  >
</template>
```


---

# vue/blocks/cta

---
title: "Call to Action"
description: "A call-to-action panel with product copy."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/cta

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import CtaBlock from './components/blocks/cta.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { ArrowRight, ArrowUpRight } from "@lucide/vue";
import Card from "../ui/card.vue";
defineProps<{
  title: string;
  description: string;
  action: { label: string; href: string };
  eyebrow?: string;
  secondary?: { label: string; href: string };
}>();
</script>
<template>
  <Card class-name="cr-cta-card"
    ><div class="cr-cta">
      <div class="cr-cta-content">
        <p v-if="eyebrow" class="cr-marketing-eyebrow">{{ eyebrow }}</p>
        <h2>{{ title }}</h2>
        <p class="cr-description">{{ description }}</p>
        <div class="cr-cta-actions">
          <a class="cr-button" :href="action.href"
            >{{ action.label
            }}<ArrowRight
              :size="17"
              :stroke-width="1.75"
              aria-hidden="true" /></a
          ><a v-if="secondary" class="cr-feature-link" :href="secondary.href"
            >{{ secondary.label
            }}<ArrowUpRight :size="16" :stroke-width="1.75" aria-hidden="true"
          /></a>
        </div>
      </div>
      <div class="cr-cta-emblem" aria-hidden="true">
        <ArrowUpRight :stroke-width="1.75" />
      </div></div
  ></Card>
</template>
```


---

# vue/blocks/data-table

---
title: "Data Table"
description: "A searchable, sortable, paginated records panel."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/data-table

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import DataTableBlock from './components/blocks/data-table.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import WorkspaceHeading from "./workspace-heading.vue";
import type { FormAction } from "./common";
import Card from "../ui/card.vue";
import DataTable from "../ui/data-table.vue";
import Button from "../ui/button.vue";
import Badge from "../ui/badge.vue";
import { Plus } from "@lucide/vue";
import type { DataColumn, DataRow } from "../ui/display-types";
defineProps<{
  title: string;
  description?: string;
  columns: DataColumn[];
  rows: DataRow[];
  onCreate: () => void;
}>();
</script>
<template>
  <Card class="cr-workspace-block cr-workspace-data-table"
    ><WorkspaceHeading
      eyebrow="Workspace data"
      :title="title"
      :description="description"
      ><template #action
        ><Button @click="onCreate"
          ><Plus :size="16" aria-hidden="true" />Add record</Button
        ></template
      ></WorkspaceHeading
    >
    <div class="cr-workspace-list-heading">
      <span>All records</span
      ><Badge variant="outline"
        >{{ rows.length }} {{ rows.length === 1 ? "record" : "records" }}</Badge
      >
    </div>
    <DataTable :caption="title" :columns="columns" :rows="rows"
      ><template v-for="(_, name) in $slots" #[name]="slotProps"
        ><slot :name="name" v-bind="slotProps" /></template></DataTable
  ></Card>
</template>
```


---

# vue/blocks/detail-view

---
title: "Detail View"
description: "Structured record details with an edit action."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/detail-view

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import DetailViewBlock from './components/blocks/detail-view.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import WorkspaceHeading from "./workspace-heading.vue";
import type { FormAction } from "./common";
import Card from "../ui/card.vue";
import Button from "../ui/button.vue";
import Badge from "../ui/badge.vue";
import Separator from "../ui/separator.vue";
import { Pencil } from "@lucide/vue";
defineProps<{
  title: string;
  status: string;
  fields: Array<{ label: string; value: string }>;
  onEdit: () => void;
}>();
</script>
<template>
  <Card class="cr-workspace-block cr-workspace-detail"
    ><WorkspaceHeading eyebrow="Record overview" :title="title"
      ><template #action
        ><Button variant="outline" @click="onEdit"
          ><Pencil :size="15" aria-hidden="true" />Edit details</Button
        ></template
      ></WorkspaceHeading
    >
    <div class="cr-workspace-detail-status">
      <span>Status</span
      ><Badge variant="outline"
        ><span class="cr-workspace-status-dot" aria-hidden="true" />{{
          status
        }}</Badge
      >
    </div>
    <dl class="cr-details cr-workspace-details">
      <div v-for="field in fields" :key="field.label">
        <dt>{{ field.label }}</dt>
        <dd>{{ field.value }}</dd>
      </div>
    </dl>
    <div v-if="$slots.default" class="cr-workspace-detail-content">
      <Separator /><slot /></div
  ></Card>
</template>
```


---

# vue/blocks/empty-state

---
title: "Empty State"
description: "A welcoming empty collection with a primary action."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/empty-state

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import EmptyStateBlock from './components/blocks/empty-state.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import Card from "../ui/card.vue";
import EmptyState from "../ui/empty-state.vue";
import Button from "../ui/button.vue";
import { FolderPlus, Plus } from "@lucide/vue";
defineProps<{
  title: string;
  description: string;
  actionLabel: string;
  onAction: () => void;
}>();
</script>
<template>
  <Card class="cr-workspace-block cr-workspace-empty-block"
    ><EmptyState :title="title" :description="description"
      ><template #icon
        ><span class="cr-workspace-empty-illustration"
          ><span /><span /><span
            ><FolderPlus
              :size="30"
              :stroke-width="1.5"
              aria-hidden="true" /></span></span></template
      ><template #action
        ><Button @click="onAction"
          ><Plus :size="16" aria-hidden="true" />{{ actionLabel }}</Button
        ></template
      ></EmptyState
    ></Card
  >
</template>
```


---

# vue/blocks/faq

---
title: "FAQ"
description: "An accessible accordion of questions and answers."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/faq

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import FaqBlock from './components/blocks/faq.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed } from "vue";
import { ArrowUpRight } from "@lucide/vue";
import Accordion from "../ui/accordion.vue";
import type { DisplayContent } from "../ui/display-types";
import { RenderContent } from "../ui/display-utils";
import MarketingHeading from "./marketing-heading.vue";
const props = defineProps<{
  title: string;
  eyebrow?: string;
  description?: string;
  contact?: { label: string; href: string };
  items: readonly { question: string; answer: DisplayContent }[];
}>();
const accordionItems = computed(() =>
  props.items.map((item, index) => ({
    value: String(index),
    title: item.question,
    content: item.answer,
  })),
);
</script>
<template>
  <section class="cr-marketing-section cr-faq-section">
    <div class="cr-faq-layout">
      <div class="cr-faq-intro">
        <MarketingHeading
          :title="title"
          :description="description"
          :eyebrow="eyebrow"
        /><a v-if="contact" class="cr-feature-link" :href="contact.href"
          >{{ contact.label
          }}<ArrowUpRight :size="16" :stroke-width="1.75" aria-hidden="true"
        /></a>
      </div>
      <div class="cr-faq-content">
        <Accordion :items="accordionItems"
          ><template #content="{ item }"
            ><slot
              name="answer"
              :item="items[Number(item.value)]"
              :index="Number(item.value)"
              ><RenderContent :content="item.content" /></slot></template
        ></Accordion>
      </div>
    </div>
  </section>
</template>
```


---

# vue/blocks/features

---
title: "Features"
description: "A responsive feature grid built from cards."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/features

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import FeaturesBlock from './components/blocks/features.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  ArrowUpRight,
  Layers3,
  SlidersHorizontal,
  Workflow,
} from "@lucide/vue";
import Card from "../ui/card.vue";
import type { DisplayContent } from "../ui/display-types";
import { RenderContent } from "../ui/display-utils";
import MarketingHeading from "./marketing-heading.vue";
defineProps<{
  title: string;
  description: string;
  eyebrow?: string;
  items: readonly {
    title: string;
    description: string;
    icon?: DisplayContent;
    visual?: DisplayContent;
    eyebrow?: string;
    href?: string;
    linkLabel?: string;
  }[];
}>();
const fallbackIcons = [Layers3, Workflow, SlidersHorizontal];
</script>
<template>
  <section class="cr-marketing-section cr-features-section">
    <MarketingHeading
      :title="title"
      :description="description"
      :eyebrow="eyebrow"
    />
    <div class="cr-features-grid">
      <Card
        v-for="(item, index) in items"
        :key="item.title"
        class-name="cr-feature-card"
        :data-featured="index === 0 && items.length >= 3 ? '' : undefined"
        :data-has-visual="item.visual || $slots.visual ? '' : undefined"
        ><div class="cr-feature-copy">
          <div class="cr-feature-topline">
            <span aria-hidden="true" class="cr-feature-icon"
              ><slot name="icon" :item="item" :index="index"
                ><RenderContent
                  v-if="item.icon"
                  :content="item.icon" /><component
                  :is="fallbackIcons[index % fallbackIcons.length]"
                  v-else
                  :size="22"
                  :stroke-width="1.75" /></slot></span
            ><span class="cr-feature-index" aria-hidden="true">{{
              String(index + 1).padStart(2, "0")
            }}</span>
          </div>
          <p v-if="item.eyebrow" class="cr-marketing-eyebrow">
            {{ item.eyebrow }}
          </p>
          <h3>{{ item.title }}</h3>
          <p class="cr-description">{{ item.description }}</p>
          <a v-if="item.href" class="cr-feature-link" :href="item.href"
            >{{ item.linkLabel ?? "Explore feature"
            }}<ArrowUpRight :size="16" :stroke-width="1.75" aria-hidden="true"
          /></a>
        </div>
        <div v-if="item.visual || $slots.visual" class="cr-feature-visual">
          <slot name="visual" :item="item" :index="index"
            ><RenderContent :content="item.visual"
          /></slot></div
      ></Card>
    </div>
  </section>
</template>
```


---

# vue/blocks/filters

---
title: "Filters"
description: "Search and status filters with reset and controlled output."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/filters

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import FiltersBlock from './components/blocks/filters.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import Card from "../ui/card.vue";
import Badge from "../ui/badge.vue";
import Field from "../ui/field.vue";
import Input from "../ui/input.vue";
import Select from "../ui/select.vue";
import Button from "../ui/button.vue";
import { computed, ref } from "vue";
import { ListFilter, Search, X } from "@lucide/vue";
const props = defineProps<{
  onChange: (filters: { query: string; status: string }) => void;
  statuses: Array<{ value: string; label: string }>;
}>();
const query = ref<string | number>(""),
  status = ref("all");
const active = computed(
  () => Number(Boolean(query.value)) + Number(status.value !== "all"),
);
const options = computed(() => [
  { value: "all", label: "All statuses" },
  ...props.statuses.filter((item) => item.value !== "all"),
]);
function change() {
  props.onChange({ query: String(query.value), status: status.value });
}
function clear() {
  query.value = "";
  status.value = "all";
  change();
}
</script>
<template>
  <Card class="cr-workspace-block cr-workspace-filter-block"
    ><div class="cr-workspace-filter-heading">
      <span
        ><ListFilter :size="17" aria-hidden="true" /><strong
          >Filter records</strong
        ></span
      ><Badge v-if="active > 0" variant="outline">{{ active }} active</Badge>
    </div>
    <div class="cr-block-filters cr-workspace-filters">
      <Field label="Search"
        ><div class="cr-workspace-search-field">
          <Search :size="17" aria-hidden="true" /><Input
            v-model="query"
            type="search"
            placeholder="Name or keyword…"
            @update:model-value="change"
          /></div></Field
      ><Field label="Status"
        ><Select
          v-model="status"
          label="Status"
          :options="options"
          @update:model-value="change" /></Field
      ><Button variant="ghost" :disabled="!active" @click="clear"
        ><X :size="15" aria-hidden="true" />Clear filters</Button
      >
    </div></Card
  >
</template>
```


---

# vue/blocks/footer

---
title: "Footer"
description: "Grouped navigation, brand description and copyright."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/footer

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import FooterBlock from './components/blocks/footer.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import type { DisplayContent } from "../ui/display-types";
import { RenderContent } from "../ui/display-utils";
defineProps<{
  brand: string;
  description: string;
  groups: readonly {
    title: string;
    links: readonly { label: string; href: string }[];
  }[];
  copyright: string;
  logo?: DisplayContent;
  brandHref?: string;
  legalLinks?: readonly { label: string; href: string }[];
}>();
</script>
<template>
  <footer class="cr-footer">
    <div class="cr-footer-main">
      <div class="cr-footer-brand">
        <component
          :is="brandHref ? 'a' : 'div'"
          class="cr-footer-identity"
          :href="brandHref"
          ><span
            v-if="logo || $slots.logo"
            class="cr-footer-logo"
            aria-hidden="true"
            ><slot name="logo"><RenderContent :content="logo" /></slot></span
          ><strong>{{ brand }}</strong></component
        >
        <p class="cr-description">{{ description }}</p>
      </div>
      <div class="cr-footer-navigation">
        <nav
          v-for="group in groups"
          :key="group.title"
          :aria-label="group.title"
        >
          <strong>{{ group.title }}</strong
          ><a v-for="link in group.links" :key="link.href" :href="link.href">{{
            link.label
          }}</a>
        </nav>
      </div>
    </div>
    <div class="cr-footer-bottom">
      <p class="cr-description">{{ copyright }}</p>
      <nav v-if="legalLinks?.length" aria-label="Legal">
        <a v-for="link in legalLinks" :key="link.href" :href="link.href">{{
          link.label
        }}</a>
      </nav>
    </div>
  </footer>
</template>
```


---

# vue/blocks/forgot-password

---
title: "Forgot Password"
description: "A recovery request form that preserves account privacy."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/forgot-password

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import ForgotPasswordBlock from './components/blocks/forgot-password.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import AuthFrame from "./auth-frame.vue";
import ActionForm from "./action-form.vue";
import type { FormAction } from "./common";
import Field from "../ui/field.vue";
import InputGroup from "../ui/input-group.vue";
import { ArrowLeft, ArrowRight, KeyRound, Mail } from "@lucide/vue";
defineProps<{ onSubmit: FormAction; loginHref: string }>();
</script>
<template>
  <AuthFrame
    title="Let’s get you back in."
    description="Enter your account’s email address. We’ll send you a link to choose a new password."
    eyebrow="Account recovery"
    ><template #icon><KeyRound :size="24" :stroke-width="1.75" /></template
    ><ActionForm
      :on-submit="onSubmit"
      submit-label="Send reset link"
      success-message="If this address has an account, a reset link is on its way."
      ><Field label="Email address"
        ><InputGroup
          name="email"
          type="email"
          autocomplete="email"
          required
          placeholder="you@company.com"
          ><template #leading
            ><Mail
              :size="16"
              aria-hidden="true" /></template></InputGroup></Field
      ><template #submit-icon
        ><ArrowRight :size="17" aria-hidden="true" /></template></ActionForm
    ><template #footer
      ><p class="cr-auth-footer">
        <a class="cr-auth-link" :href="loginHref"
          ><ArrowLeft :size="14" aria-hidden="true" /> Back to sign in</a
        >
      </p></template
    ></AuthFrame
  >
</template>
```


---

# vue/blocks/hero

---
title: "Hero"
description: "A focused product introduction with two actions."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/hero

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import HeroBlock from './components/blocks/hero.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  ArrowRight,
  ArrowUpRight,
  Layers3,
  SlidersHorizontal,
  Workflow,
} from "@lucide/vue";
import Badge from "../ui/badge.vue";
defineProps<{
  eyebrow: string;
  title: string;
  description: string;
  primary: { label: string; href: string };
  secondary?: { label: string; href: string };
}>();
</script>
<template>
  <section class="cr-hero cr-marketing-hero">
    <div class="cr-hero-decoration" aria-hidden="true">
      <span><Layers3 :stroke-width="1.75" /></span
      ><span><SlidersHorizontal :stroke-width="1.75" /></span
      ><span><Workflow :stroke-width="1.75" /></span>
    </div>
    <div class="cr-hero-content">
      <Badge variant="outline"
        >{{ eyebrow
        }}<ArrowUpRight :size="13" :stroke-width="1.75" aria-hidden="true"
      /></Badge>
      <h1>{{ title }}</h1>
      <p class="cr-description">{{ description }}</p>
      <div class="cr-hero-actions">
        <a class="cr-button" :href="primary.href"
          >{{ primary.label
          }}<ArrowRight :size="17" :stroke-width="1.75" aria-hidden="true" /></a
        ><a
          v-if="secondary"
          class="cr-button"
          data-variant="ghost"
          :href="secondary.href"
          >{{ secondary.label
          }}<ArrowUpRight :size="16" :stroke-width="1.75" aria-hidden="true"
        /></a>
      </div>
    </div>
    <div v-if="$slots.default" class="cr-hero-media"><slot /></div>
  </section>
</template>
```


---

# vue/blocks/index

---
title: Vue blocks
description: 26 native Vue blocks for your design system.
---

- [API Keys](https://ui.coderocket.app/docs/vue/blocks/api-keys): A masked key list with creation and revocation callbacks.
- [App Header](https://ui.coderocket.app/docs/vue/blocks/app-header): Breadcrumbs, search and account actions in an application header.
- [App Sidebar](https://ui.coderocket.app/docs/vue/blocks/app-sidebar): Collapsible workspace navigation with account identity.
- [Billing](https://ui.coderocket.app/docs/vue/blocks/billing): Subscription summary, seat usage and invoice links.
- [Call to Action](https://ui.coderocket.app/docs/vue/blocks/cta): A call-to-action panel with product copy.
- [Data Table](https://ui.coderocket.app/docs/vue/blocks/data-table): A searchable, sortable, paginated records panel.
- [Detail View](https://ui.coderocket.app/docs/vue/blocks/detail-view): Structured record details with an edit action.
- [Empty State](https://ui.coderocket.app/docs/vue/blocks/empty-state): A welcoming empty collection with a primary action.
- [FAQ](https://ui.coderocket.app/docs/vue/blocks/faq): An accessible accordion of questions and answers.
- [Features](https://ui.coderocket.app/docs/vue/blocks/features): A responsive feature grid built from cards.
- [Filters](https://ui.coderocket.app/docs/vue/blocks/filters): Search and status filters with reset and controlled output.
- [Footer](https://ui.coderocket.app/docs/vue/blocks/footer): Grouped navigation, brand description and copyright.
- [Forgot Password](https://ui.coderocket.app/docs/vue/blocks/forgot-password): A recovery request form that preserves account privacy.
- [Hero](https://ui.coderocket.app/docs/vue/blocks/hero): A focused product introduction with two actions.
- [Login](https://ui.coderocket.app/docs/vue/blocks/login): A sign-in form with typed submission callback.
- [Notifications](https://ui.coderocket.app/docs/vue/blocks/notifications): An inbox with unread states and mark-as-read actions.
- [OTP](https://ui.coderocket.app/docs/vue/blocks/otp): A one-time-code form with numeric validation.
- [Pricing](https://ui.coderocket.app/docs/vue/blocks/pricing): Comparable plans, features and purchase links.
- [Profile](https://ui.coderocket.app/docs/vue/blocks/profile): Editable profile details and identity.
- [Reset Password](https://ui.coderocket.app/docs/vue/blocks/reset-password): A password reset form with matching confirmation.
- [Search](https://ui.coderocket.app/docs/vue/blocks/search): Filter and select content from a local collection.
- [Settings](https://ui.coderocket.app/docs/vue/blocks/settings): Workspace and notification settings in accessible tabs.
- [Sign Up](https://ui.coderocket.app/docs/vue/blocks/signup): A registration form with email and password validation.
- [Stats](https://ui.coderocket.app/docs/vue/blocks/stats): Responsive metric cards with textual trend indicators.
- [Team](https://ui.coderocket.app/docs/vue/blocks/team): A member list with invitation and removal callbacks.
- [Testimonials](https://ui.coderocket.app/docs/vue/blocks/testimonials): Customer quotations with author identities.


---

# vue/blocks/login

---
title: "Login"
description: "A sign-in form with typed submission callback."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/login

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import LoginBlock from './components/blocks/login.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import AuthFrame from "./auth-frame.vue";
import ActionForm from "./action-form.vue";
import PasswordInput from "./password-input.vue";
import type { FormAction } from "./common";
import Field from "../ui/field.vue";
import InputGroup from "../ui/input-group.vue";
import { ArrowRight, LockKeyhole, Mail } from "@lucide/vue";
defineProps<{ onSubmit: FormAction; signupHref: string; forgotHref: string }>();
</script>
<template>
  <AuthFrame
    title="Welcome back."
    description="Sign in to your workspace and pick up where you left off."
    eyebrow="Your workspace"
    ><template #icon><LockKeyhole :size="24" :stroke-width="1.75" /></template
    ><ActionForm
      :on-submit="onSubmit"
      submit-label="Sign in"
      success-message="Signed in."
      ><Field label="Email address"
        ><InputGroup
          name="email"
          type="email"
          autocomplete="email"
          required
          placeholder="you@company.com"
          ><template #leading
            ><Mail
              :size="16"
              aria-hidden="true" /></template></InputGroup></Field
      ><Field label="Password"
        ><PasswordInput name="password" auto-complete="current-password"
      /></Field>
      <div class="cr-auth-assistance">
        <a class="cr-auth-link" :href="forgotHref">Forgot password?</a>
      </div>
      <template #submit-icon
        ><ArrowRight :size="17" aria-hidden="true" /></template></ActionForm
    ><template #footer
      ><p class="cr-auth-footer">
        New here?
        <a class="cr-auth-link" :href="signupHref"
          >Create an account <ArrowRight :size="14" aria-hidden="true"
        /></a></p></template
  ></AuthFrame>
</template>
```


---

# vue/blocks/notifications

---
title: "Notifications"
description: "An inbox with unread states and mark-as-read actions."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/notifications

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import NotificationsBlock from './components/blocks/notifications.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import WorkspaceHeading from "./workspace-heading.vue";
import type { FormAction } from "./common";
import Card from "../ui/card.vue";
import Button from "../ui/button.vue";
import Badge from "../ui/badge.vue";
import { computed } from "vue";
import { CheckCheck, Bell, ChevronRight } from "@lucide/vue";
const props = defineProps<{
  items: Array<{
    id: string;
    title: string;
    description: string;
    time: string;
    unread: boolean;
  }>;
  onReadAll: () => void;
  onOpen: (id: string) => void;
}>();
const unread = computed(() => props.items.filter((item) => item.unread).length);
</script>
<template>
  <Card class="cr-workspace-block cr-workspace-notifications"
    ><WorkspaceHeading
      eyebrow="Your inbox"
      title="Notifications"
      description="The latest from your team and workspace."
      ><template #action
        ><Button
          variant="ghost"
          size="sm"
          :disabled="!unread"
          @click="onReadAll"
          ><CheckCheck :size="16" aria-hidden="true" />Mark all read</Button
        ></template
      ></WorkspaceHeading
    >
    <div class="cr-workspace-list-heading">
      <span>Recent activity</span
      ><Badge :variant="unread ? 'primary' : 'outline'"
        >{{ unread }} unread</Badge
      >
    </div>
    <ul class="cr-workspace-list cr-workspace-notification-list">
      <li v-for="item in items" :key="item.id">
        <button
          type="button"
          class="cr-notification-item cr-workspace-notification"
          :data-unread="item.unread || undefined"
          @click="onOpen(item.id)"
        >
          <span class="cr-workspace-icon-tile"
            ><Bell
              v-if="item.unread"
              :size="18"
              aria-hidden="true" /><CheckCheck
              v-else
              :size="18"
              aria-hidden="true" /></span
          ><span class="cr-workspace-notification-copy"
            ><strong
              >{{ item.title
              }}<template v-if="item.unread"
                ><span aria-hidden="true" class="cr-unread-dot" /><span
                  class="cr-sr-only"
                  >Unread</span
                ></template
              ></strong
            ><span class="cr-description">{{ item.description }}</span
            ><small>{{ item.time }}</small></span
          ><ChevronRight :size="16" aria-hidden="true" />
        </button>
      </li>
    </ul>
    <div v-if="!items.length" class="cr-workspace-caught-up">
      <span class="cr-workspace-icon-tile"
        ><CheckCheck :size="22" aria-hidden="true" /></span
      ><strong>You’re all caught up.</strong>
      <p>New updates will appear here.</p>
    </div></Card
  >
</template>
```


---

# vue/blocks/otp

---
title: "OTP"
description: "A one-time-code form with numeric validation."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/otp

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import OtpBlock from './components/blocks/otp.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import AuthFrame from "./auth-frame.vue";
import ActionForm from "./action-form.vue";
import type { FormAction } from "./common";
import Field from "../ui/field.vue";
import Input from "../ui/input.vue";
import { ArrowRight, Mail } from "@lucide/vue";
import { computed } from "vue";
const props = withDefaults(
  defineProps<{ onSubmit: FormAction; length?: number }>(),
  { length: 6 },
);
const size = computed(() =>
  Number.isFinite(props.length)
    ? Math.max(4, Math.min(10, Math.floor(props.length)))
    : 6,
);
const pattern = computed(() => `[0-9]{${size.value}}`);
</script>
<template>
  <AuthFrame
    title="Check your inbox."
    :description="`Enter the ${size}-digit verification code from your email to continue.`"
    eyebrow="One more step"
    ><template #icon><Mail :size="24" :stroke-width="1.75" /></template
    ><ActionForm
      :on-submit="onSubmit"
      submit-label="Verify code"
      success-message="Code verified."
      ><Field
        label="Verification code"
        description="You can paste the entire code into this field."
        ><Input
          name="code"
          inputmode="numeric"
          autocomplete="one-time-code"
          :minlength="size"
          :maxlength="size"
          :pattern="pattern"
          required
          class="cr-otp"
          :placeholder="'0'.repeat(size)"
          :style="{ '--cr-otp-length': size }" /></Field
      ><template #submit-icon
        ><ArrowRight :size="17" aria-hidden="true" /></template></ActionForm
  ></AuthFrame>
</template>
```


---

# vue/blocks/pricing

---
title: "Pricing"
description: "Comparable plans, features and purchase links."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/pricing

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import PricingBlock from './components/blocks/pricing.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { ArrowRight, Check } from "@lucide/vue";
import Badge from "../ui/badge.vue";
import Card from "../ui/card.vue";
import MarketingHeading from "./marketing-heading.vue";
defineProps<{
  title: string;
  eyebrow?: string;
  description?: string;
  plans: readonly {
    name: string;
    price: string;
    period: string;
    description: string;
    features: readonly string[];
    href: string;
    action: string;
    featured?: boolean;
  }[];
}>();
</script>
<template>
  <section class="cr-marketing-section cr-pricing-section">
    <MarketingHeading
      :title="title"
      :description="description"
      :eyebrow="eyebrow"
    />
    <div class="cr-pricing-grid">
      <Card
        v-for="plan in plans"
        :key="plan.name"
        class-name="cr-pricing-card"
        :data-featured="plan.featured ? '' : undefined"
        ><div class="cr-plan-heading">
          <h3>{{ plan.name }}</h3>
          <div
            class="cr-price-recommendation"
            :aria-hidden="!plan.featured || undefined"
          >
            <Badge v-if="plan.featured" variant="primary">Recommended</Badge>
          </div>
        </div>
        <p class="cr-plan-description cr-description">{{ plan.description }}</p>
        <p class="cr-price">
          {{ plan.price }}<small>{{ plan.period }}</small>
        </p>
        <ul class="cr-price-features">
          <li v-for="feature in plan.features" :key="feature">
            <Check :size="17" :stroke-width="1.75" aria-hidden="true" /><span>{{
              feature
            }}</span>
          </li>
        </ul>
        <a
          class="cr-button"
          :data-variant="plan.featured ? 'primary' : 'outline'"
          :href="plan.href"
          >{{ plan.action
          }}<ArrowRight :size="16" :stroke-width="1.75" aria-hidden="true" /></a
      ></Card>
    </div>
  </section>
</template>
```


---

# vue/blocks/profile

---
title: "Profile"
description: "Editable profile details and identity."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/profile

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import ProfileBlock from './components/blocks/profile.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import WorkspaceHeading from "./workspace-heading.vue";
import ActionForm from "./action-form.vue";
import type { FormAction } from "./common";
import Card from "../ui/card.vue";
import Avatar from "../ui/avatar.vue";
import Field from "../ui/field.vue";
import Input from "../ui/input.vue";
import Textarea from "../ui/textarea.vue";
import { UserRound } from "@lucide/vue";
withDefaults(
  defineProps<{
    name: string;
    email: string;
    bio?: string;
    onSave: FormAction;
  }>(),
  { bio: "" },
);
</script>
<template>
  <Card class="cr-workspace-block cr-workspace-profile"
    ><WorkspaceHeading
      eyebrow="Account"
      title="Your profile"
      description="The details your team sees when you work together." />
    <div class="cr-workspace-identity">
      <Avatar :name="name" :size="58" />
      <div>
        <strong>{{ name }}</strong
        ><span>{{ email }}</span>
      </div>
      <span class="cr-workspace-icon-tile"
        ><UserRound :size="20" aria-hidden="true"
      /></span>
    </div>
    <ActionForm :on-submit="onSave"
      ><div class="cr-workspace-form-grid">
        <Field label="Display name"
          ><Input
            name="name"
            :default-value="name"
            autocomplete="name"
            required /></Field
        ><Field label="Email address"
          ><Input
            name="email"
            type="email"
            :default-value="email"
            autocomplete="email"
            required
        /></Field>
      </div>
      <Field label="About you"
        ><Textarea
          name="bio"
          :default-value="bio"
          placeholder="A few words about you and your work." /></Field></ActionForm
  ></Card>
</template>
```


---

# vue/blocks/reset-password

---
title: "Reset Password"
description: "A password reset form with matching confirmation."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/reset-password

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import ResetPasswordBlock from './components/blocks/reset-password.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import AuthFrame from "./auth-frame.vue";
import ActionForm from "./action-form.vue";
import PasswordInput from "./password-input.vue";
import type { FormAction } from "./common";
import Field from "../ui/field.vue";
import { ArrowRight, ShieldCheck } from "@lucide/vue";
defineProps<{ onSubmit: FormAction }>();
function validate(data: FormData) {
  return data.get("password") !== data.get("confirmation")
    ? "Passwords do not match. Enter the same password in both fields."
    : undefined;
}
</script>
<template>
  <AuthFrame
    title="A fresh start."
    description="Choose a new password to get back to your workspace."
    eyebrow="Reset password"
    ><template #icon><ShieldCheck :size="24" :stroke-width="1.75" /></template
    ><ActionForm
      :on-submit="onSubmit"
      :validate="validate"
      submit-label="Update password"
      success-message="Your password has been updated."
      ><Field label="New password" description="Use at least 12 characters."
        ><PasswordInput
          name="password"
          auto-complete="new-password"
          :min-length="12"
          placeholder="Create a new password" /></Field
      ><Field label="Confirm password"
        ><PasswordInput
          name="confirmation"
          auto-complete="new-password"
          :min-length="12"
          placeholder="Enter it one more time" /></Field
      ><template #submit-icon
        ><ArrowRight :size="17" aria-hidden="true" /></template></ActionForm
  ></AuthFrame>
</template>
```


---

# vue/blocks/search

---
title: "Search"
description: "Filter and select content from a local collection."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/search

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import SearchBlock from './components/blocks/search.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import WorkspaceHeading from "./workspace-heading.vue";
import type { FormAction } from "./common";
import Card from "../ui/card.vue";
import Input from "../ui/input.vue";
import { computed, ref } from "vue";
import { Search, SearchX, FileText, ChevronRight } from "@lucide/vue";
const props = defineProps<{
  items: Array<{ id: string; title: string; description: string }>;
  onSelect: (id: string) => void;
}>();
const query = ref<string | number>("");
const results = computed(() =>
  props.items.filter((item) =>
    `${item.title} ${item.description}`
      .toLowerCase()
      .includes(String(query.value).toLowerCase()),
  ),
);
</script>
<template>
  <Card class="cr-workspace-block cr-workspace-search-block"
    ><WorkspaceHeading
      eyebrow="Workspace search"
      title="Find your next step"
      description="Documents, projects and ideas. Right where you need them."
    />
    <div class="cr-workspace-search-field">
      <Search :size="18" aria-hidden="true" /><Input
        v-model="query"
        aria-label="Search content"
        type="search"
        placeholder="Search your workspace…"
      />
    </div>
    <div class="cr-workspace-list-heading">
      <span>{{ query ? "Matching results" : "All items" }}</span
      ><span class="cr-description" role="status"
        >{{ results.length }}
        {{ results.length === 1 ? "result" : "results" }}</span
      >
    </div>
    <ul class="cr-workspace-list cr-workspace-search-results">
      <li v-for="item in results" :key="item.id">
        <button
          type="button"
          class="cr-notification-item cr-workspace-search-result"
          @click="onSelect(item.id)"
        >
          <span class="cr-workspace-icon-tile"
            ><FileText :size="18" aria-hidden="true" /></span
          ><span
            ><strong>{{ item.title }}</strong
            ><span class="cr-description">{{ item.description }}</span></span
          ><ChevronRight :size="16" aria-hidden="true" />
        </button>
      </li>
    </ul>
    <div v-if="!results.length" class="cr-workspace-caught-up">
      <span class="cr-workspace-icon-tile"
        ><SearchX :size="22" aria-hidden="true" /></span
      ><strong>No results found</strong>
      <p>Try a different name or keyword.</p>
    </div></Card
  >
</template>
```


---

# vue/blocks/settings

---
title: "Settings"
description: "Workspace and notification settings in accessible tabs."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/settings

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import SettingsBlock from './components/blocks/settings.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import WorkspaceHeading from "./workspace-heading.vue";
import ActionForm from "./action-form.vue";
import type { FormAction } from "./common";
import Card from "../ui/card.vue";
import Tabs from "../ui/tabs.vue";
import Field from "../ui/field.vue";
import Input from "../ui/input.vue";
import Textarea from "../ui/textarea.vue";
import Switch from "../ui/switch.vue";
import { Building2, FileText, Bell } from "@lucide/vue";
defineProps<{
  workspaceName: string;
  onSave: FormAction;
  onNotificationSave: FormAction;
}>();
const sections = [
  { value: "general", label: "General" },
  { value: "notifications", label: "Notifications" },
];
</script>
<template>
  <Card class="cr-workspace-block cr-workspace-settings"
    ><WorkspaceHeading
      eyebrow="Workspace"
      title="Settings"
      description="A few details that make this space yours."
      ><template #action
        ><span class="cr-workspace-icon-tile"
          ><Building2
            :size="20"
            aria-hidden="true" /></span></template></WorkspaceHeading
    ><Tabs label="Settings sections" :items="sections"
      ><template #general
        ><ActionForm :on-submit="onSave"
          ><Field label="Workspace name"
            ><Input
              name="workspace"
              :default-value="workspaceName"
              required /></Field
          ><Field label="Description"
            ><Textarea
              name="description"
              placeholder="What are you building?" /></Field></ActionForm></template
      ><template #notifications
        ><ActionForm :on-submit="onNotificationSave"
          ><div class="cr-workspace-preference">
            <div>
              <span class="cr-workspace-icon-tile"
                ><FileText :size="18" aria-hidden="true"
              /></span>
              <p>A summary of what happened across your workspace.</p>
            </div>
            <Switch name="digest" label="Weekly digest" default-checked />
          </div>
          <div class="cr-workspace-preference">
            <div>
              <span class="cr-workspace-icon-tile"
                ><Bell :size="18" aria-hidden="true"
              /></span>
              <p>Stay in the loop when someone needs your attention.</p>
            </div>
            <Switch
              name="mentions"
              label="Mention notifications"
              default-checked
            /></div></ActionForm></template></Tabs
  ></Card>
</template>
```


---

# vue/blocks/signup

---
title: "Sign Up"
description: "A registration form with email and password validation."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/signup

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import SignupBlock from './components/blocks/signup.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import AuthFrame from "./auth-frame.vue";
import ActionForm from "./action-form.vue";
import PasswordInput from "./password-input.vue";
import type { FormAction } from "./common";
import Field from "../ui/field.vue";
import InputGroup from "../ui/input-group.vue";
import { ArrowRight, UserRound, Mail } from "@lucide/vue";
defineProps<{ onSubmit: FormAction; loginHref: string }>();
</script>
<template>
  <AuthFrame
    title="Make room for what’s next."
    description="Create your account. A fresh workspace starts here."
    eyebrow="A new beginning"
    ><template #icon><UserRound :size="23" :stroke-width="1.75" /></template
    ><ActionForm
      :on-submit="onSubmit"
      submit-label="Create account"
      success-message="Check your inbox to confirm your email address."
      ><Field label="Full name"
        ><InputGroup
          name="name"
          autocomplete="name"
          required
          placeholder="Your full name"
          ><template #leading
            ><UserRound
              :size="16"
              aria-hidden="true" /></template></InputGroup></Field
      ><Field label="Email address"
        ><InputGroup
          name="email"
          type="email"
          autocomplete="email"
          required
          placeholder="you@company.com"
          ><template #leading
            ><Mail
              :size="16"
              aria-hidden="true" /></template></InputGroup></Field
      ><Field label="Password" description="Use at least 12 characters."
        ><PasswordInput
          name="password"
          auto-complete="new-password"
          :min-length="12"
          placeholder="Create a password" /></Field
      ><template #submit-icon
        ><ArrowRight :size="17" aria-hidden="true" /></template></ActionForm
    ><template #footer
      ><p class="cr-auth-footer">
        Already have an account?
        <a class="cr-auth-link" :href="loginHref"
          >Sign in <ArrowRight :size="14" aria-hidden="true"
        /></a></p></template
  ></AuthFrame>
</template>
```


---

# vue/blocks/stats

---
title: "Stats"
description: "Responsive metric cards with textual trend indicators."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/stats

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import StatsBlock from './components/blocks/stats.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import Card from "../ui/card.vue";
import Badge from "../ui/badge.vue";
import {
  ArrowDownRight,
  ArrowUpRight,
  ChartNoAxesColumn,
  Minus,
} from "@lucide/vue";
import { RenderContent } from "../ui/display-utils";
import type { DisplayContent } from "../ui/display-types";
defineProps<{
  items: Array<{
    label: string;
    value: string;
    change?: string;
    trend?: "positive" | "negative" | "neutral";
    description?: string;
    icon?: DisplayContent;
  }>;
}>();
</script>
<template>
  <div class="cr-block-grid cr-workspace-stats">
    <Card v-for="item in items" :key="item.label" class="cr-workspace-stat-card"
      ><div class="cr-workspace-stat-heading">
        <span>{{ item.label }}</span
        ><span class="cr-workspace-stat-icon" aria-hidden="true"
          ><slot name="icon" :item="item"
            ><RenderContent
              v-if="item.icon"
              :content="item.icon" /><ChartNoAxesColumn
              v-else
              :size="17" /></slot
        ></span>
      </div>
      <strong class="cr-stat-value">{{ item.value }}</strong>
      <div
        v-if="item.change || item.description"
        class="cr-workspace-stat-footer"
      >
        <Badge
          v-if="item.change"
          variant="outline"
          class="cr-workspace-stat-change"
          :data-trend="item.trend ?? 'neutral'"
          ><ArrowUpRight
            v-if="item.trend === 'positive'"
            :size="13"
            aria-hidden="true"
          /><ArrowDownRight
            v-else-if="item.trend === 'negative'"
            :size="13"
            aria-hidden="true"
          /><Minus v-else :size="13" aria-hidden="true" />{{
            item.change
          }}</Badge
        ><span v-if="item.description">{{ item.description }}</span>
      </div></Card
    >
  </div>
</template>
```


---

# vue/blocks/team

---
title: "Team"
description: "A member list with invitation and removal callbacks."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/team

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import TeamBlock from './components/blocks/team.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import WorkspaceHeading from "./workspace-heading.vue";
import ActionForm from "./action-form.vue";
import type { FormAction } from "./common";
import Card from "../ui/card.vue";
import Dialog from "../ui/dialog.vue";
import Button from "../ui/button.vue";
import Field from "../ui/field.vue";
import Input from "../ui/input.vue";
import Avatar from "../ui/avatar.vue";
import Badge from "../ui/badge.vue";
import { UserRoundPlus, UsersRound, Trash2 } from "@lucide/vue";
import { ref } from "vue";
import type { TeamMember } from "./common";
const props = defineProps<{
  members: TeamMember[];
  onInvite: FormAction;
  onRemove: (id: string) => void | Promise<void>;
}>();
const removing = ref<string | null>(null),
  error = ref(false);
async function remove(id: string) {
  if (removing.value) return;
  removing.value = id;
  error.value = false;
  try {
    await props.onRemove(id);
  } catch {
    error.value = true;
  } finally {
    removing.value = null;
  }
}
</script>
<template>
  <Card class="cr-workspace-block cr-workspace-team"
    ><WorkspaceHeading
      eyebrow="People &amp; access"
      title="Your team"
      description="Good work starts with the right people."
      ><template #action
        ><Dialog
          title="Invite someone to your team"
          description="Enter the email address of the person you’d like to invite."
          :footer="null"
          ><template #trigger
            ><Button variant="outline"
              ><UserRoundPlus :size="16" aria-hidden="true" />Invite
              member</Button
            ></template
          ><ActionForm
            :on-submit="onInvite"
            submit-label="Send invitation"
            success-message="Invitation sent."
            ><Field label="Email address"
              ><Input
                name="email"
                type="email"
                autocomplete="email"
                placeholder="colleague@company.com"
                required /></Field></ActionForm></Dialog></template
    ></WorkspaceHeading>
    <div class="cr-workspace-list-heading">
      <span><UsersRound :size="15" aria-hidden="true" />Team members</span
      ><Badge variant="outline"
        >{{ members.length }}
        {{ members.length === 1 ? "member" : "members" }}</Badge
      >
    </div>
    <ul class="cr-workspace-list cr-workspace-member-list">
      <li v-for="member in members" :key="member.id">
        <Avatar :name="member.name" :size="36" />
        <div class="cr-workspace-person">
          <strong>{{ member.name }}</strong
          ><span>{{ member.email }}</span>
        </div>
        <Badge variant="outline">{{ member.role }}</Badge
        ><Button
          variant="ghost"
          size="sm"
          class="cr-workspace-icon-button"
          :disabled="!!removing"
          :loading="removing === member.id"
          :aria-label="`Remove ${member.name}`"
          @click="remove(member.id)"
          ><Trash2 v-if="removing !== member.id" :size="16" aria-hidden="true"
        /></Button>
      </li>
    </ul>
    <p v-if="!members.length" class="cr-block-empty">
      No team members yet. Invite someone to get started.
    </p>
    <p v-if="error" role="alert" class="cr-description">
      Unable to remove this member.
    </p></Card
  >
</template>
```


---

# vue/blocks/testimonials

---
title: "Testimonials"
description: "Customer quotations with author identities."
---

Interactive preview: https://ui.coderocket.app/docs/vue/blocks/testimonials

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import TestimonialsBlock from './components/blocks/testimonials.vue'
</script>

<!-- Supply the required props and callbacks listed in Source and props. -->
```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

The full ZIP also includes `examples/block-showcase.vue`, with populated block props, illustrations and local sample callbacks to adapt to your application.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { Quote } from "@lucide/vue";
import Card from "../ui/card.vue";
import Avatar from "../ui/avatar.vue";
import MarketingHeading from "./marketing-heading.vue";
defineProps<{
  title: string;
  eyebrow?: string;
  description?: string;
  quotes: readonly {
    quote: string;
    name: string;
    role: string;
    avatar?: string;
  }[];
}>();
</script>
<template>
  <section class="cr-marketing-section cr-testimonials-section">
    <MarketingHeading
      :title="title"
      :description="description"
      :eyebrow="eyebrow"
    />
    <div class="cr-testimonials-grid">
      <Card
        v-for="(quote, index) in quotes"
        :key="quote.name"
        class-name="cr-testimonial-card"
        :data-featured="index === 0 ? '' : undefined"
        ><figure class="cr-testimonial-figure">
          <Quote
            class="cr-quote-icon"
            :size="26"
            :stroke-width="1.75"
            aria-hidden="true"
          />
          <blockquote class="cr-quote">
            <p>{{ quote.quote }}</p>
          </blockquote>
          <figcaption class="cr-quote-author">
            <Avatar :name="quote.name" :src="quote.avatar" :size="40" />
            <div>
              <cite>{{ quote.name }}</cite>
              <p class="cr-description">{{ quote.role }}</p>
            </div>
          </figcaption>
        </figure></Card
      >
    </div>
  </section>
</template>
```


---

# vue/components/accordion

---
title: "Accordion"
description: "Expandable sections with built-in keyboard interaction."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/accordion

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Accordion from "./components/ui/accordion.vue";
</script>

<template>
  <Accordion :items="[{ value: 'ownership', title: 'Do I own the code?', content: 'Yes. Export it and use it in your own project.' }, { value: 'runtime', title: 'Does it need a server?', content: 'The exported components run independently.' }]" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed } from "vue";
import {
  AccordionRoot,
  AccordionItem,
  AccordionHeader,
  AccordionTrigger,
  AccordionContent,
} from "reka-ui";
import { RenderContent, useDisplayModel } from "./display-utils";
import type { DisplayContent } from "./display-types";
const props = withDefaults(
  defineProps<{
    items: Array<{
      value: string;
      title: string;
      content?: DisplayContent;
      disabled?: boolean;
    }>;
    multiple?: boolean;
    value?: string[];
    modelValue?: string[];
    defaultValue?: string[];
    disabled?: boolean;
    keepMounted?: boolean;
    orientation?: "horizontal" | "vertical";
  }>(),
  {
    multiple: false,
    disabled: false,
    keepMounted: false,
    orientation: "vertical",
  },
);
const emit = defineEmits<{
  "update:modelValue": [value: string[]];
  "update:value": [value: string[]];
  "value-change": [value: string[]];
}>();
const selected = useDisplayModel(
  () => props.modelValue ?? props.value,
  props.defaultValue ?? [],
  (value) => {
    emit("update:modelValue", value);
    emit("update:value", value);
    emit("value-change", value);
  },
);
const primitiveValue = computed(() =>
  props.multiple ? selected.value : (selected.value[0] ?? ""),
);
function update(value: string | string[] | undefined) {
  selected.value = Array.isArray(value) ? value : value ? [value] : [];
}
</script>
<template>
  <AccordionRoot
    :type="multiple ? 'multiple' : 'single'"
    :model-value="primitiveValue"
    :disabled="disabled"
    :orientation="orientation"
    collapsible
    class="cr-accordion"
    @update:model-value="update"
    ><AccordionItem
      v-for="item in items"
      :key="item.value"
      :value="item.value"
      :disabled="item.disabled"
      class="cr-accordion-item"
      ><AccordionHeader
        ><AccordionTrigger class="cr-accordion-trigger"
          ><slot name="title" :item="item">{{ item.title }}</slot
          ><span aria-hidden="true"
            ><svg
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
            >
              <path
                d="M12 5v14M5 12h14"
              /></svg></span></AccordionTrigger></AccordionHeader
      ><AccordionContent
        :force-mount="keepMounted || undefined"
        v-show="!keepMounted || selected.includes(item.value)"
        class="cr-accordion-panel"
        ><slot :name="item.value" :item="item"
          ><slot name="content" :item="item"
            ><RenderContent
              :content="
                item.content
              " /></slot></slot></AccordionContent></AccordionItem
  ></AccordionRoot>
</template>
```


---

# vue/components/alert-dialog

---
title: "Alert Dialog"
description: "A confirmation dialog with focus management, keyboard dismissal and a labelled title."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/alert-dialog

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import AlertDialog from "./components/ui/alert-dialog.vue";
</script>

<template>
  <AlertDialog trigger="Preview confirmation" title="Review before continuing" description="Important changes deserve a final check." close-label="Cancel"><p>This is a confirmation preview. No data will be changed. In your application, explain the consequences here before asking the user to confirm.</p></AlertDialog>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  AlertDialogRoot,
  AlertDialogTrigger,
  AlertDialogPortal,
  AlertDialogOverlay,
  AlertDialogContent,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogCancel,
} from "reka-ui";
import { useId } from "vue";
import { usePortalContainer } from "./utils";
import { RenderContent, focusTarget, useDisplayModel } from "./display-utils";
import type { OverlayProps } from "./display-types";
defineOptions({ inheritAttrs: false });
const props = withDefaults(defineProps<OverlayProps>(), {
  open: undefined,
  trigger: undefined,
  footer: undefined,
  initialFocus: undefined,
  finalFocus: undefined,
  defaultOpen: false,
  modal: true,
  closeLabel: "Close",
});
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
  "open-auto-focus": [event: Event];
  "close-auto-focus": [event: Event];
  "escape-key-down": [event: KeyboardEvent];
  "interact-outside": [event: Event];
}>();
const expanded = useDisplayModel(
  () => props.open,
  props.defaultOpen,
  (value) => {
    emit("update:open", value);
    emit("open-change", value);
  },
);
const container = usePortalContainer();
const descriptionId = useId();
</script>
<template>
  <AlertDialogRoot v-model:open="expanded"
    ><AlertDialogTrigger
      v-if="trigger != null || triggerRender || $slots.trigger"
      :as-child="!!($slots.trigger || triggerRender)"
      :disabled="disabled"
      class="cr-button"
      data-variant="outline"
      ><slot name="trigger"
        ><component :is="triggerRender" v-if="triggerRender"
          ><RenderContent :content="trigger" /></component
        ><RenderContent v-else :content="trigger" /></slot></AlertDialogTrigger
    ><AlertDialogPortal :to="container"
      ><AlertDialogOverlay class="cr-backdrop" />
      <div v-if="expanded" class="cr-modal-viewport" data-kind="alert-dialog">
        <AlertDialogContent
          v-bind="$attrs"
          :class="['cr-modal cr-alert-dialog', className]"
          :aria-describedby="
            description || $slots.description ? descriptionId : undefined
          "
          @open-auto-focus="
            (event) => {
              focusTarget(event, initialFocus);
              emit('open-auto-focus', event);
            }
          "
          @close-auto-focus="
            (event) => {
              focusTarget(event, finalFocus);
              emit('close-auto-focus', event);
            }
          "
          @escape-key-down="emit('escape-key-down', $event)"
          @interact-outside="emit('interact-outside', $event)"
          ><header class="cr-modal-header">
            <AlertDialogTitle class="cr-modal-title"
              ><slot name="title">{{ title }}</slot></AlertDialogTitle
            ><AlertDialogDescription
              :id="descriptionId"
              v-if="description || $slots.description"
              class="cr-description"
              ><slot name="description">{{
                description
              }}</slot></AlertDialogDescription
            ><AlertDialogCancel
              class="cr-modal-close"
              :aria-label="closeLabel === 'Close' ? 'Close alert' : closeLabel"
              ><svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                aria-hidden="true"
              >
                <path d="m6 6 12 12M18 6 6 18" /></svg
            ></AlertDialogCancel>
          </header>
          <div class="cr-modal-content">
            <slot :close="() => (expanded = false)" />
          </div>
          <footer v-if="footer !== null" class="cr-modal-footer">
            <slot name="footer" :close="() => (expanded = false)"
              ><RenderContent
                v-if="footer !== undefined"
                :content="footer"
              /><AlertDialogCancel
                v-else
                class="cr-button"
                data-variant="secondary"
                >{{ closeLabel }}</AlertDialogCancel
              ></slot
            >
          </footer></AlertDialogContent
        >
      </div></AlertDialogPortal
    ></AlertDialogRoot
  >
</template>
```


---

# vue/components/alert

---
title: "Alert"
description: "A contextual message with optional assertive announcement."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/alert

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Alert from "./components/ui/alert.vue";
</script>

<template>
  <Alert title="Everything is up to date." variant="success">Your changes have been saved.</Alert>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import type { DisplayContent } from "./display-types";
import { RenderContent } from "./display-utils";
withDefaults(
  defineProps<{
    title?: DisplayContent;
    variant?: "info" | "success" | "warning" | "destructive";
    announce?: boolean;
    role?: string;
    className?: string;
  }>(),
  { variant: "info", announce: false },
);
</script>
<template>
  <div
    :class="['cr-alert', className]"
    :data-variant="variant"
    :role="role ?? (announce ? 'alert' : undefined)"
  >
    <strong v-if="title || $slots.title"
      ><slot name="title"><RenderContent :content="title" /></slot
    ></strong>
    <div v-if="$slots.default"><slot /></div>
  </div>
</template>
```


---

# vue/components/avatar

---
title: "Avatar"
description: "An image with an accessible fallback for a person or team."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/avatar

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Avatar from "./components/ui/avatar.vue";
</script>

<template>
  <Avatar name="Alex Morgan" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed } from "vue";
import { AvatarRoot, AvatarImage, AvatarFallback } from "reka-ui";
const props = withDefaults(
  defineProps<{
    src?: string;
    name: string;
    size?: number;
    className?: string;
  }>(),
  { size: 36 },
);
const initials = computed(
  () =>
    props.name
      .trim()
      .split(/\s+/)
      .slice(0, 2)
      .map((word) => Array.from(word)[0] ?? "")
      .join("")
      .toLocaleUpperCase() || "?",
);
</script>
<template>
  <AvatarRoot
    :class="['cr-avatar', className]"
    :style="{ width: `${size}px`, height: `${size}px` }"
    ><AvatarImage
      :src="src ?? ''"
      :alt="name"
      class="cr-avatar-image"
    /><AvatarFallback role="img" :aria-label="name || 'Avatar'"
      ><slot name="fallback">{{ initials }}</slot></AvatarFallback
    ></AvatarRoot
  >
</template>
```


---

# vue/components/badge

---
title: "Badge"
description: "A compact non-interactive status or label."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/badge

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Badge from "./components/ui/badge.vue";
</script>

<template>
  <Badge variant="success">Active</Badge>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
withDefaults(
  defineProps<{
    variant?:
      | "primary"
      | "secondary"
      | "success"
      | "warning"
      | "destructive"
      | "outline";
    className?: string;
  }>(),
  { variant: "secondary" },
);
</script>
<template>
  <span :class="['cr-badge', className]" :data-variant="variant"><slot /></span>
</template>
```


---

# vue/components/breadcrumb

---
title: "Breadcrumb"
description: "A semantic path through your application."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/breadcrumb

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Breadcrumb from "./components/ui/breadcrumb.vue";
</script>

<template>
  <Breadcrumb :items="[{ label: 'Workspace', href: '#workspace' }, { label: 'Settings', href: '#settings' }, { label: 'Profile' }]" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
withDefaults(
  defineProps<{
    items: Array<{ label: string; href?: string }>;
    label?: string;
  }>(),
  { label: "Breadcrumb" },
);
</script>
<template>
  <nav :aria-label="label">
    <ol class="cr-breadcrumb">
      <li v-for="(item, index) in items" :key="index">
        <svg
          v-if="index"
          class="cr-breadcrumb-separator"
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          aria-hidden="true"
        >
          <path d="m9 6 6 6-6 6" /></svg
        ><a v-if="item.href && index < items.length - 1" :href="item.href"
          ><slot name="item" :item="item" :index="index">{{
            item.label
          }}</slot></a
        ><span
          v-else
          :aria-current="index === items.length - 1 ? 'page' : undefined"
          ><slot name="item" :item="item" :index="index">{{
            item.label
          }}</slot></span
        >
      </li>
    </ol>
  </nav>
</template>
```


---

# vue/components/button

---
title: "Button"
description: "An action with six visual variants, three sizes and a loading state."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/button

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import { ref } from "vue";
import Button from "./components/ui/button.vue";
const notice = ref('');
</script>

<template>
  <Button @click="notice = 'Ready to continue.'">Continue</Button>
  <p v-if="notice" role="status" class="cr-description" style="margin-top: 12px">{{ notice }}</p>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { Primitive } from "reka-ui";
import { cx } from "./utils";
const props = withDefaults(
  defineProps<{
    variant?:
      "primary" | "secondary" | "outline" | "ghost" | "destructive" | "link";
    size?: "sm" | "md" | "lg";
    loading?: boolean;
    disabled?: boolean;
    className?: string;
    type?: "button" | "submit" | "reset";
    as?: string;
    asChild?: boolean;
  }>(),
  { variant: "primary", size: "md", type: "button", as: "button" },
);
function blockDisabled(event: Event) {
  if (!props.disabled && !props.loading) return;
  event.preventDefault();
  event.stopImmediatePropagation();
}
</script>
<template>
  <Primitive
    @click.capture="blockDisabled"
    @keydown.capture="
      ($event.key === 'Enter' || $event.key === ' ') && blockDisabled($event)
    "
    :tabindex="disabled || loading ? -1 : undefined"
    :as="as"
    :as-child="asChild"
    :type="type"
    :disabled="disabled || loading"
    :aria-disabled="disabled || loading || undefined"
    :aria-busy="loading || undefined"
    :class="cx('cr-button', className)"
    :data-variant="variant"
    :data-size="size"
    ><span
      v-if="loading && !asChild"
      class="cr-spinner"
      aria-hidden="true" /><slot
  /></Primitive>
</template>
```


---

# vue/components/calendar

---
title: "Calendar"
description: "A Gregorian single-date or range calendar with month/year selection, disabled dates, week numbers and keyboard navigation."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/calendar

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import { ref } from "vue";
import Calendar from "./components/ui/calendar.vue";
const notice = ref('');
const calendarDate = ref<string | { start: string; end: string } | null>("2026-09-17");
</script>

<template>
  <Calendar v-model="calendarDate" @value-change="notice = `${$event} selected`" />
  <p v-if="notice" role="status" class="cr-description" style="margin-top: 12px">{{ notice }}</p>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, nextTick, ref, useId, watch } from "vue";
import { ChevronLeft, ChevronRight } from "@lucide/vue";
import {
  addCalendarDays,
  addCalendarMonths,
  calendarISO,
  calendarLabels,
  endOfCalendarMonth,
  isCalendarDateDisabled,
  isCalendarRangeAvailable,
  isoWeekNumber,
  parseCalendarDate,
  startOfCalendarMonth,
  useCalendarToday,
  type CalendarProps,
  type CalendarValue,
} from "./calendar-utils";
import { cx } from "./utils";

const props = withDefaults(defineProps<CalendarProps>(), {
  mode: "single",
  min: "0001-01-01",
  max: "9999-12-31",
  locale: "en",
  weekStartsOn: 1,
  disabled: false,
  excludeDisabled: true,
  showWeekNumbers: false,
  weekdayFormat: "short",
  monthSelection: true,
});
const emit = defineEmits<{
  "update:modelValue": [value: CalendarValue];
  valueChange: [value: CalendarValue];
  monthChange: [month: string];
  selectionPendingChange: [pending: boolean];
}>();
const internal = ref<CalendarValue>(props.defaultValue ?? null);
const chosen = computed(() =>
  props.modelValue !== undefined ? props.modelValue : internal.value,
);
const selected = computed(() =>
  typeof chosen.value === "string" ? chosen.value || null : null,
);
const range = computed(() =>
  chosen.value && typeof chosen.value === "object" ? chosen.value : null,
);
const labels = computed(() => calendarLabels(props.locale, props.labels));
const label = computed(
  () =>
    props.label ??
    (props.mode === "range"
      ? labels.value.chooseRange
      : labels.value.chooseDate),
);
const monthCount = computed(
  () => props.numberOfMonths ?? (props.mode === "range" ? 2 : 1),
);
const today = useCalendarToday();
const focused = ref<string | null>(null);
const viewedMonth = ref<string | null>(null);
const anchor = ref<string | null>(null);
const hovered = ref<string | null>(null);
const status = ref("");
const grid = ref<HTMLDivElement>();
const headingId = useId();
const clamp = (value: string) =>
  value < props.min ? props.min : value > props.max ? props.max : value;
const focusDate = computed(
  () =>
    focused.value ??
    clamp(
      selected.value ??
        range.value?.start ??
        props.startFrom ??
        (today.value || "1970-01-01"),
    ),
);
const month = computed(
  () => viewedMonth.value ?? startOfCalendarMonth(focusDate.value),
);
const skeleton = computed(
  () => !today.value && !selected.value && !range.value && !props.startFrom,
);
const unavailable = (value: string) =>
  props.disabled || isCalendarDateDisabled(value, props);
const fullDate = computed(
  () =>
    new Intl.DateTimeFormat(props.locale, {
      dateStyle: "full",
      timeZone: "UTC",
      calendar: "gregory",
    }),
);
const monthName = computed(
  () =>
    new Intl.DateTimeFormat(props.locale, {
      month: "long",
      timeZone: "UTC",
      calendar: "gregory",
    }),
);
const completeMonth = computed(
  () =>
    new Intl.DateTimeFormat(props.locale, {
      month: "long",
      year: "numeric",
      timeZone: "UTC",
      calendar: "gregory",
    }),
);
const minYear = computed(() => Number(props.min.slice(0, 4)));
const maxYear = computed(() => Number(props.max.slice(0, 4)));

watch(
  [
    () => props.min,
    () => props.max,
    selected,
    () => range.value?.start,
    () => range.value?.end,
    () => props.startFrom,
  ],
  () => {
    parseCalendarDate(props.min);
    parseCalendarDate(props.max);
    if (props.min > props.max) throw new Error("Calendar min exceeds max");
    if (selected.value) parseCalendarDate(selected.value);
    if (range.value) {
      parseCalendarDate(range.value.start);
      parseCalendarDate(range.value.end);
    }
    if (props.startFrom) parseCalendarDate(props.startFrom);
  },
  { immediate: true },
);

function cancelPendingSelection() {
  anchor.value = null;
  hovered.value = null;
  status.value = "";
  emit("selectionPendingChange", false);
}
watch(
  [
    selected,
    () => range.value?.start,
    () => range.value?.end,
    () => props.min,
    () => props.max,
    today,
    () => props.startFrom,
    () => props.mode,
  ],
  () => {
    if (skeleton.value) return;
    const next = clamp(selected.value ?? range.value?.start ?? focusDate.value);
    focused.value = next;
    viewedMonth.value = startOfCalendarMonth(next);
    cancelPendingSelection();
  },
);
defineExpose({ cancelPendingSelection });

const months = computed(() =>
  Array.from({ length: monthCount.value }, (_, index) =>
    startOfCalendarMonth(addCalendarMonths(month.value, index)),
  ).filter((value, index, all) => all.indexOf(value) === index),
);
const displayedRange = computed(() => {
  const end = hovered.value ?? focusDate.value;
  return anchor.value
    ? {
        start: anchor.value < end ? anchor.value : end,
        end: anchor.value < end ? end : anchor.value,
      }
    : range.value;
});
const weekdays = computed(() =>
  Array.from({ length: 7 }, (_, index) => {
    const day = parseCalendarDate(
      addCalendarDays("2024-01-07", (index + props.weekStartsOn) % 7),
    );
    return {
      label: new Intl.DateTimeFormat(props.locale, {
        weekday: "long",
        timeZone: "UTC",
        calendar: "gregory",
      }).format(day),
      text: new Intl.DateTimeFormat(props.locale, {
        weekday: props.weekdayFormat,
        timeZone: "UTC",
        calendar: "gregory",
      }).format(day),
    };
  }),
);
const panels = computed(() =>
  months.value.map((current, monthIndex) => {
    const date = parseCalendarDate(current);
    const offset = (date.getUTCDay() - props.weekStartsOn + 7) % 7;
    return {
      current,
      monthIndex,
      headingId: `${headingId}-${monthIndex}`,
      month: date.getUTCMonth(),
      year: date.getUTCFullYear(),
      title: completeMonth.value.format(date),
      options: Array.from({ length: 12 }, (_, index) => {
        const option = new Date(date);
        option.setUTCMonth(index);
        const value = calendarISO(option);
        return {
          value: index,
          label: monthName.value.format(option),
          disabled: endOfCalendarMonth(value) < props.min || value > props.max,
        };
      }),
      weeks: Array.from({ length: 6 }, (_, week) => ({
        number: isoWeekNumber(
          addCalendarDays(
            current,
            week * 7 + ((4 - props.weekStartsOn + 7) % 7) - offset,
          ),
        ),
        days: Array.from({ length: 7 }, (_, index) => {
          const day = new Date(date);
          day.setUTCDate(1 - offset + week * 7 + index);
          const outside = day.getUTCMonth() !== date.getUTCMonth();
          if (
            day.getUTCFullYear() < 1 ||
            day.getUTCFullYear() > 9999 ||
            (months.value.length > 1 && outside)
          )
            return null;
          const iso = calendarISO(day);
          const inRange =
            !!displayedRange.value &&
            iso >= displayedRange.value.start &&
            iso <= displayedRange.value.end;
          const endpoint =
            iso === displayedRange.value?.start ||
            iso === displayedRange.value?.end;
          return {
            iso,
            day: day.getUTCDate(),
            outside,
            inRange,
            blocked: unavailable(iso),
            endpoint,
            selected:
              props.mode === "range"
                ? !anchor.value && inRange
                : selected.value === iso,
            label: fullDate.value.format(day),
          };
        }),
      })),
    };
  }),
);
const visibleDates = computed(() =>
  panels.value.flatMap((panel) =>
    panel.weeks.flatMap((week) =>
      week.days.flatMap((day) => (day ? [day.iso] : [])),
    ),
  ),
);
const tabDate = computed(() =>
  visibleDates.value.includes(focusDate.value) && !unavailable(focusDate.value)
    ? focusDate.value
    : visibleDates.value.find((date) => !unavailable(date)),
);
function focusButton(target: string) {
  void nextTick(() =>
    grid.value
      ?.querySelector<HTMLButtonElement>(`[data-date="${target}"]`)
      ?.focus(),
  );
}
function changeMonth(next: string) {
  const target = clamp(next);
  focused.value = target;
  viewedMonth.value = startOfCalendarMonth(target);
  emit("monthChange", viewedMonth.value);
}
function changeMonthSelect(event: Event, current: string, index: number) {
  const next = parseCalendarDate(current);
  next.setUTCMonth(Number((event.target as HTMLSelectElement).value));
  changeMonth(addCalendarMonths(calendarISO(next), -index));
}
function changeYear(event: FocusEvent, current: string, index: number) {
  const input = event.target as HTMLInputElement;
  const year = Number(input.value),
    next = parseCalendarDate(current);
  if (!Number.isInteger(year) || year < minYear.value || year > maxYear.value) {
    input.value = String(next.getUTCFullYear());
    return;
  }
  next.setUTCFullYear(year);
  changeMonth(addCalendarMonths(calendarISO(next), -index));
}
function move(next: string, direction = 1) {
  let target = clamp(next),
    searched = 0;
  while (unavailable(target)) {
    // Bound arbitrary predicates so a fully disabled calendar cannot freeze input.
    if (++searched > 366) return;
    const candidate = addCalendarDays(target, direction);
    if (candidate === target || candidate < props.min || candidate > props.max)
      return;
    target = candidate;
  }
  focused.value = target;
  if (!visibleDates.value.includes(target)) {
    viewedMonth.value = startOfCalendarMonth(target);
    emit("monthChange", viewedMonth.value);
  }
  focusButton(target);
}
function keyboard(event: KeyboardEvent, date: string) {
  let next: string | undefined,
    direction = 1;
  const day =
    (parseCalendarDate(date).getUTCDay() - props.weekStartsOn + 7) % 7;
  if (event.key === "ArrowRight") next = addCalendarDays(date, 1);
  if (event.key === "ArrowLeft") {
    next = addCalendarDays(date, -1);
    direction = -1;
  }
  if (event.key === "ArrowDown") next = addCalendarDays(date, 7);
  if (event.key === "ArrowUp") {
    next = addCalendarDays(date, -7);
    direction = -1;
  }
  if (event.key === "Home") next = addCalendarDays(date, -day);
  if (event.key === "End") {
    next = addCalendarDays(date, 6 - day);
    direction = -1;
  }
  if (event.key === "PageUp" || event.key === "PageDown") {
    direction = event.key === "PageUp" ? -1 : 1;
    next = addCalendarMonths(date, direction * (event.shiftKey ? 12 : 1));
  }
  if (event.key === "Escape" && anchor.value) {
    event.preventDefault();
    event.stopPropagation();
    cancelPendingSelection();
  }
  if (next) {
    event.preventDefault();
    move(next, direction);
  }
}
function choose(date: string) {
  if (unavailable(date)) return;
  focused.value = date;
  status.value = "";
  let next: CalendarValue = date;
  if (props.mode === "range") {
    if (!anchor.value) {
      anchor.value = date;
      hovered.value = null;
      status.value = labels.value.chooseEnd;
      emit("selectionPendingChange", true);
      return;
    }
    next = {
      start: date < anchor.value ? date : anchor.value,
      end: date < anchor.value ? anchor.value : date,
    };
    if (!isCalendarRangeAvailable(next, props)) {
      status.value = labels.value.unavailableRange;
      return;
    }
    cancelPendingSelection();
  }
  if (props.modelValue === undefined) internal.value = next;
  emit("update:modelValue", next);
  emit("valueChange", next);
}
function focusDay(date: string) {
  focused.value = date;
  if (anchor.value) hovered.value = date;
}
</script>

<template>
  <div
    v-if="skeleton"
    :class="cx('cr-calendar cr-calendar-skeleton', className)"
    role="status"
    :aria-label="label"
    aria-busy="true"
  >
    <div class="cr-calendar-months">
      <div
        v-for="index in monthCount"
        :key="index"
        class="cr-calendar-month"
        aria-hidden="true"
      >
        <span class="cr-calendar-skeleton-caption" />
        <div class="cr-calendar-skeleton-days">
          <span v-for="day in 42" :key="day" />
        </div>
      </div>
    </div>
  </div>
  <div
    v-else
    ref="grid"
    :class="cx('cr-calendar', className)"
    :data-months="months.length"
  >
    <div class="cr-calendar-navigation">
      <button
        type="button"
        class="cr-button"
        data-variant="ghost"
        data-size="sm"
        :aria-label="previousMonthLabel ?? labels.previousMonth"
        :disabled="disabled || month <= startOfCalendarMonth(min)"
        @click="changeMonth(addCalendarMonths(month, -1))"
      >
        <ChevronLeft :size="16" aria-hidden="true" />
      </button>
      <span :id="headingId" class="cr-sr-only" aria-live="polite">{{
        panels.map((panel) => panel.title).join(" – ")
      }}</span>
      <button
        type="button"
        class="cr-button"
        data-variant="ghost"
        data-size="sm"
        :aria-label="nextMonthLabel ?? labels.nextMonth"
        :disabled="
          disabled || months[months.length - 1]! >= startOfCalendarMonth(max)
        "
        @click="changeMonth(addCalendarMonths(month, 1))"
      >
        <ChevronRight :size="16" aria-hidden="true" />
      </button>
    </div>
    <div class="cr-calendar-months">
      <section
        v-for="panel in panels"
        :key="panel.monthIndex"
        class="cr-calendar-month"
      >
        <div class="cr-calendar-caption">
          <span :id="panel.headingId" class="cr-sr-only">{{
            panel.title
          }}</span>
          <template v-if="monthSelection">
            <select
              :aria-label="`${labels.month}${months.length > 1 ? ` ${panel.monthIndex + 1}` : ''}`"
              :value="panel.month"
              :disabled="disabled"
              @change="
                changeMonthSelect($event, panel.current, panel.monthIndex)
              "
            >
              <option
                v-for="option in panel.options"
                :key="option.value"
                :value="option.value"
                :disabled="option.disabled"
              >
                {{ option.label }}
              </option>
            </select>
            <input
              :key="panel.year"
              type="number"
              inputmode="numeric"
              :aria-label="`${labels.year}${months.length > 1 ? ` ${panel.monthIndex + 1}` : ''}`"
              :value="panel.year"
              :min="minYear"
              :max="maxYear"
              :disabled="disabled"
              @keydown.enter.prevent="
                ($event.currentTarget as HTMLInputElement).blur()
              "
              @blur="changeYear($event, panel.current, panel.monthIndex)"
            />
          </template>
          <strong v-else>{{ panel.title }}</strong>
        </div>
        <div
          role="grid"
          :aria-label="label"
          :aria-describedby="panel.headingId"
          :aria-multiselectable="mode === 'range' || undefined"
        >
          <div
            role="row"
            class="cr-calendar-week"
            :data-week-numbers="showWeekNumbers || undefined"
          >
            <span
              v-if="showWeekNumbers"
              role="columnheader"
              :aria-label="labels.week"
              >#</span
            >
            <span
              v-for="(day, index) in weekdays"
              :key="index"
              role="columnheader"
              :aria-label="day.label"
              >{{ day.text }}</span
            >
          </div>
          <div
            v-for="(week, index) in panel.weeks"
            :key="index"
            role="row"
            class="cr-calendar-week"
            :data-week-numbers="showWeekNumbers || undefined"
          >
            <span
              v-if="showWeekNumbers"
              role="rowheader"
              class="cr-calendar-week-number"
              >{{ week.number }}</span
            >
            <template v-for="(day, dayIndex) in week.days" :key="dayIndex">
              <span v-if="!day" role="gridcell" />
              <div
                v-else
                role="gridcell"
                :aria-selected="day.selected"
                :aria-disabled="day.blocked || undefined"
                :data-in-range="day.inRange || undefined"
                :data-range-start="
                  day.iso === displayedRange?.start || undefined
                "
                :data-range-end="day.iso === displayedRange?.end || undefined"
              >
                <button
                  type="button"
                  :data-date="day.iso"
                  :data-outside="day.outside || undefined"
                  :data-selected="
                    day.endpoint || selected === day.iso || undefined
                  "
                  :data-preview="(!!anchor && day.inRange) || undefined"
                  :aria-label="day.label"
                  :aria-current="day.iso === today ? 'date' : undefined"
                  :aria-disabled="day.blocked || undefined"
                  :disabled="day.blocked"
                  :tabindex="!day.blocked && day.iso === tabDate ? 0 : -1"
                  @focus="focusDay(day.iso)"
                  @mouseenter="anchor && (hovered = day.iso)"
                  @keydown="keyboard($event, day.iso)"
                  @click="choose(day.iso)"
                >
                  <slot
                    name="day"
                    :date="day.iso"
                    :day="day.day"
                    :selected="day.selected"
                    :disabled="day.blocked"
                    ><component
                      :is="() => renderDay!(day.iso)"
                      v-if="renderDay"
                    /><template v-else>{{ day.day }}</template></slot
                  >
                </button>
              </div>
            </template>
          </div>
        </div>
      </section>
    </div>
    <div
      :class="status ? 'cr-calendar-status' : 'cr-sr-only'"
      role="status"
      aria-live="polite"
    >
      {{ status }}
    </div>
  </div>
</template>
```


---

# vue/components/card

---
title: "Card"
description: "A surface that groups related content, with optional header and footer."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/card

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Card from "./components/ui/card.vue";
</script>

<template>
  <Card title="Project settings" description="Make this workspace your own.">Your content goes here.</Card>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import type { DisplayContent } from "./display-types";
import { RenderContent } from "./display-utils";
defineProps<{
  title?: DisplayContent;
  description?: DisplayContent;
  footer?: DisplayContent;
  className?: string;
}>();
</script>
<template>
  <section :class="['cr-card', className]">
    <header
      v-if="title || description || $slots.title || $slots.description"
      class="cr-card-header"
    >
      <h3 v-if="title || $slots.title" class="cr-card-title">
        <slot name="title"><RenderContent :content="title" /></slot>
      </h3>
      <p v-if="description || $slots.description" class="cr-description">
        <slot name="description"><RenderContent :content="description" /></slot>
      </p>
    </header>
    <div class="cr-card-body"><slot /></div>
    <footer v-if="footer || $slots.footer" class="cr-card-footer">
      <slot name="footer"><RenderContent :content="footer" /></slot>
    </footer>
  </section>
</template>
```


---

# vue/components/checkbox

---
title: "Checkbox"
description: "A labelled checkbox with checked and indeterminate states."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/checkbox

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Checkbox from "./components/ui/checkbox.vue";
</script>

<template>
  <Checkbox label="Send me product updates" default-checked />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, ref, useId } from "vue";
import { CheckboxRoot, CheckboxIndicator } from "reka-ui";
import { cx, useControllable, useFieldControl, useFormReset } from "./utils";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<{
    label?: string;
    className?: string;
    checked?: boolean;
    defaultChecked?: boolean;
    indeterminate?: boolean;
    disabled?: boolean;
    required?: boolean;
    readOnly?: boolean;
    id?: string;
    name?: string;
    form?: string;
    value?: string;
  }>(),
  { checked: undefined, value: "on" },
);
const model = defineModel<boolean | "indeterminate" | undefined>({
  default: undefined,
});
const emit = defineEmits<{
  "checked-change": [checked: boolean];
  "update:checked": [checked: boolean];
}>();
const { field, fieldAttrs } = useFieldControl(() => props.id);
const generatedId = useId();
const inputId = computed(() => props.id ?? fieldAttrs.value.id ?? generatedId);
const disabled = computed(() => props.disabled || field?.disabled.value);
const root = ref<HTMLLabelElement>();
const state = useControllable<boolean | "indeterminate">(
  model,
  () => props.checked,
  () => props.defaultChecked ?? false,
  (value) => {
    emit("checked-change", value === true);
    emit("update:checked", value === true);
  },
);
const checked = computed(() =>
  props.indeterminate ? "indeterminate" : state.value,
);
function update(value: boolean | "indeterminate") {
  if (!props.readOnly) {
    state.value = value;
    field?.notifyChange();
  }
}
useFormReset(
  root,
  () => {
    state.value = props.defaultChecked ?? false;
  },
  () => props.form,
);
</script>
<template>
  <label
    ref="root"
    :for="inputId"
    class="cr-check-label"
    :data-disabled="disabled ? '' : undefined"
    ><CheckboxRoot
      v-bind="{ ...fieldAttrs, ...$attrs, name: undefined }"
      :id="inputId"
      :model-value="checked"
      :disabled="disabled"
      :required="required"
      :aria-readonly="readOnly || undefined"
      :class="cx('cr-checkbox', className)"
      :data-checked="checked === true ? '' : undefined"
      :data-indeterminate="checked === 'indeterminate' ? '' : undefined"
      @update:model-value="update"
      ><CheckboxIndicator class="cr-check-indicator"
        ><svg
          width="13"
          height="13"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="3"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <path
            :d="checked === 'indeterminate' ? 'M5 12h14' : 'm5 12 4 4L19 6'"
          /></svg></CheckboxIndicator></CheckboxRoot
    ><input
      class="cr-sr-only"
      aria-hidden="true"
      tabindex="-1"
      type="checkbox"
      :name="name ?? fieldAttrs.name"
      :form="form"
      :value="value"
      :checked="state === true"
      :indeterminate="checked === 'indeterminate'"
      :disabled="disabled"
      :required="required"
      @change="update(($event.target as HTMLInputElement).checked)"
    /><span
      ><slot>{{ label }}</slot></span
    ></label
  >
</template>
```


---

# vue/components/collapsible

---
title: "Collapsible"
description: "An optional content section with a disclosure trigger."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/collapsible

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Collapsible from "./components/ui/collapsible.vue";
</script>

<template>
  <Collapsible title="Advanced options">Additional settings for this workspace.</Collapsible>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  CollapsibleRoot,
  CollapsibleTrigger,
  CollapsibleContent,
} from "reka-ui";
import { useDisplayModel } from "./display-utils";
const props = withDefaults(
  defineProps<{
    title: string;
    defaultOpen?: boolean;
    open?: boolean;
    disabled?: boolean;
    keepMounted?: boolean;
  }>(),
  { defaultOpen: false, open: undefined, disabled: false, keepMounted: false },
);
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
}>();
const expanded = useDisplayModel(
  () => props.open,
  props.defaultOpen,
  (value) => {
    emit("update:open", value);
    emit("open-change", value);
  },
);
</script>
<template>
  <CollapsibleRoot
    v-model:open="expanded"
    :disabled="disabled"
    class="cr-collapsible"
    ><CollapsibleTrigger
      :as-child="!!$slots.trigger"
      class="cr-button cr-collapsible-trigger"
      data-variant="ghost"
      ><slot name="trigger"
        >{{ title
        }}<svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          aria-hidden="true"
        >
          <path d="m6 9 6 6 6-6" /></svg></slot></CollapsibleTrigger
    ><CollapsibleContent
      :force-mount="keepMounted || undefined"
      v-show="!keepMounted || expanded"
      class="cr-collapsible-panel"
      ><slot /></CollapsibleContent
  ></CollapsibleRoot>
</template>
```


---

# vue/components/combobox

---
title: "Combobox"
description: "Searchable single selection with controlled search, disabled options, optional clearing and form support."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/combobox

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Combobox from "./components/ui/combobox.vue";
</script>

<template>
  <Combobox label="Framework" :items="['React', 'Vue', 'Svelte', 'SolidJS']" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, ref } from "vue";
import {
  ComboboxRoot,
  ComboboxAnchor,
  ComboboxInput,
  ComboboxTrigger,
  ComboboxPortal,
  ComboboxContent,
  ComboboxViewport,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxItemIndicator,
} from "reka-ui";
import {
  cx,
  useControllable,
  useFieldControl,
  useFormReset,
  usePortalContainer,
} from "./utils";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<{
    label: string;
    items: readonly string[];
    filteredItems?: readonly string[];
    value?: string | null;
    defaultValue?: string | null;
    defaultOpen?: boolean;
    inputValue?: string;
    defaultInputValue?: string;
    placeholder?: string;
    className?: string;
    inputProps?: Record<string, unknown>;
    isItemDisabled?: (item: string) => boolean;
    emptyLabel?: string;
    clearable?: boolean;
    disabled?: boolean;
    readOnly?: boolean;
    required?: boolean;
    name?: string;
    form?: string;
    id?: string;
    dir?: "ltr" | "rtl";
    openOnInputClick?: boolean;
  }>(),
  {
    placeholder: "Search…",
    emptyLabel: "No results found.",
    openOnInputClick: true,
  },
);
const model = defineModel<string | null>();
const openModel = defineModel<boolean | undefined>("open", {
  default: undefined,
});
const searchModel = defineModel<string>("searchTerm");
const emit = defineEmits<{
  "value-change": [value: string | null];
  "open-change": [open: boolean];
  "input-value-change": [value: string];
}>();
const { field, fieldAttrs } = useFieldControl(() => props.id);
const disabled = computed(() => props.disabled || field?.disabled.value);
const value = useControllable(
  model,
  () => props.value,
  () => props.defaultValue ?? null,
  (next) => emit("value-change", next),
);
const open = useControllable(
  openModel,
  () => undefined,
  () => props.defaultOpen ?? false,
  (next) => emit("open-change", next),
);
const search = useControllable(
  searchModel,
  () => props.inputValue,
  () => props.defaultInputValue ?? "",
  (next) => emit("input-value-change", next),
);
const popupOpen = computed({
  get: () => (props.readOnly ? false : open.value),
  set: (next: boolean) => {
    if (!props.readOnly) open.value = next;
  },
});
const portalContainer = usePortalContainer();
const native = ref<HTMLInputElement>();
const input = ref<{ $el: HTMLInputElement }>();
function update(next: unknown) {
  if (props.readOnly || disabled.value) return;
  value.value = next == null ? null : String(next);
  field?.notifyChange();
}
function clear() {
  if (props.readOnly || disabled.value) return;
  value.value = null;
  search.value = "";
  input.value?.$el?.focus();
  field?.notifyChange();
}
useFormReset(
  native,
  () => {
    value.value = props.defaultValue ?? null;
    search.value = props.defaultInputValue ?? "";
    open.value = false;
  },
  () => props.form,
);
</script>
<template>
  <ComboboxRoot
    v-bind="$attrs"
    :model-value="value ?? undefined"
    v-model:open="popupOpen"
    :disabled="disabled"
    :dir="dir"
    :ignore-filter="filteredItems !== undefined"
    :open-on-click="openOnInputClick"
    :reset-model-value-on-clear="true"
    @update:model-value="update"
    ><ComboboxAnchor :class="cx('cr-input-group', className)"
      ><ComboboxInput
        ref="input"
        v-model="search"
        v-bind="{ ...fieldAttrs, ...inputProps, name: undefined }"
        :aria-label="label"
        :placeholder="placeholder"
        :readonly="readOnly"
        :required="required"
        :disabled="disabled"
        class="cr-input" /><button
        v-if="clearable"
        type="button"
        :aria-label="'Clear ' + label"
        :disabled="disabled || readOnly"
        class="cr-input-addon"
        @click="clear"
      >
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          stroke-linecap="round"
          aria-hidden="true"
        >
          <path d="m6 6 12 12M6 18 18 6" />
        </svg></button
      ><ComboboxTrigger
        :aria-label="'Open ' + label"
        :disabled="disabled || readOnly"
        class="cr-input-addon"
        ><svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <path d="m6 9 6 6 6-6" /></svg></ComboboxTrigger></ComboboxAnchor
    ><ComboboxPortal :to="portalContainer"
      ><ComboboxContent
        class="cr-popup cr-positioner"
        position="popper"
        :side-offset="6"
        align="start"
        ><ComboboxViewport
          ><ComboboxEmpty class="cr-menu-item">{{ emptyLabel }}</ComboboxEmpty
          ><ComboboxItem
            v-for="item in filteredItems ?? items"
            :key="item"
            :value="item"
            :disabled="isItemDisabled?.(item)"
            class="cr-menu-item"
            >{{ item
            }}<ComboboxItemIndicator
              ><svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
              >
                <path
                  d="m20 6-11 11-5-5"
                /></svg></ComboboxItemIndicator></ComboboxItem></ComboboxViewport></ComboboxContent></ComboboxPortal
    ><input
      ref="native"
      class="cr-sr-only"
      aria-hidden="true"
      tabindex="-1"
      :name="name ?? fieldAttrs.name"
      :form="form"
      :required="required"
      :disabled="disabled"
      :value="value ?? ''"
      @input="value = ($event.target as HTMLInputElement).value"
  /></ComboboxRoot>
</template>
```


---

# vue/components/command

---
title: "Command"
description: "A searchable command palette with keyboard navigation and real action callbacks."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/command

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import { ref } from "vue";
import Command from "./components/ui/command.vue";
const notice = ref('');
</script>

<template>
  <Command :items="[{ value: 'settings', label: 'Open settings', onSelect: () => notice = 'Settings selected' }, { value: 'export', label: 'Export library', onSelect: () => notice = 'Export selected' }]" />
  <p v-if="notice" role="status" class="cr-description" style="margin-top: 12px">{{ notice }}</p>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, ref, useId } from "vue";
import {
  ListboxRoot,
  ListboxFilter,
  ListboxContent,
  ListboxItem,
} from "reka-ui";
import Dialog from "./dialog.vue";
import { RenderContent, useDisplayModel } from "./display-utils";
import type { CommandItem, DisplayContent } from "./display-types";
const props = withDefaults(
  defineProps<{
    trigger?: DisplayContent;
    title?: string;
    items: CommandItem[];
    open?: boolean;
    defaultOpen?: boolean;
    searchLabel?: string;
    searchPlaceholder?: string;
    emptyMessage?: DisplayContent;
  }>(),
  {
    trigger: "Open commands",
    title: "Command menu",
    open: undefined,
    defaultOpen: false,
    searchLabel: "Search commands",
    searchPlaceholder: "Search commands…",
    emptyMessage: "No matching commands.",
  },
);
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
  select: [item: CommandItem];
}>();
const expanded = useDisplayModel(
  () => props.open,
  props.defaultOpen,
  (value) => {
    emit("update:open", value);
    emit("open-change", value);
    if (!value) search.value = "";
  },
);
const search = ref("");
const input = ref<InstanceType<typeof ListboxFilter>>();
const listId = `cr-command-list-${useId()}`;
const filtered = computed(() =>
  props.items.filter((item) =>
    `${item.label} ${item.description ?? ""}`
      .toLocaleLowerCase()
      .includes(search.value.toLocaleLowerCase()),
  ),
);
function select(value: unknown) {
  const item = props.items.find((item) => item.value === value);
  if (!item || item.disabled) return;
  item.onSelect?.();
  emit("select", item);
  expanded.value = false;
}
</script>
<template>
  <Dialog
    v-model:open="expanded"
    :trigger="trigger"
    :title="title"
    :initial-focus="() => input?.$el as HTMLInputElement"
    ><template v-if="$slots.trigger" #trigger><slot name="trigger" /></template
    ><ListboxRoot :model-value="null" @update:model-value="select"
      ><ListboxFilter
        ref="input"
        v-model="search"
        role="combobox"
        :aria-expanded="expanded"
        :aria-controls="listId"
        aria-autocomplete="list"
        :aria-label="searchLabel"
        :placeholder="searchPlaceholder"
        class="cr-input" /><ListboxContent
        :id="listId"
        :aria-label="title"
        class="cr-command-list"
        ><ListboxItem
          v-for="item in filtered"
          :key="item.value"
          :value="item.value"
          :disabled="item.disabled"
          class="cr-menu-item"
          ><span class="cr-command-item-text"
            ><span>{{ item.label }}</span
            ><small v-if="item.description" class="cr-description">{{
              item.description
            }}</small></span
          ></ListboxItem
        ></ListboxContent
      >
      <p v-if="!filtered.length" role="status" class="cr-description">
        <slot name="empty"
          ><RenderContent :content="emptyMessage"
        /></slot></p></ListboxRoot
  ></Dialog>
</template>
```


---

# vue/components/context-menu

---
title: "Context Menu"
description: "A contextual action menu available by right-click or keyboard."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/context-menu

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import { ref } from "vue";
import ContextMenu from "./components/ui/context-menu.vue";
const notice = ref('');
</script>

<template>
  <ContextMenu :items="[{ label: 'Open' }, { label: 'Duplicate' }]" @select="notice = `${$event.label} selected`">Right-click here, or press Shift + F10.</ContextMenu>
  <p v-if="notice" role="status" class="cr-description" style="margin-top: 12px">{{ notice }}</p>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  ContextMenuRoot,
  ContextMenuTrigger,
  ContextMenuPortal,
  ContextMenuContent,
  ContextMenuItem,
} from "reka-ui";
import ContextMenuState from "./context-menu-state.vue";
import { usePortalContainer } from "./utils";
import { RenderContent } from "./display-utils";
import type { DisplayContent, MenuAction } from "./display-types";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<{
    open?: boolean;
    defaultOpen?: boolean;
    items: MenuAction[];
    emptyMessage?: DisplayContent;
    disabled?: boolean;
    modal?: boolean;
  }>(),
  {
    open: undefined,
    defaultOpen: false,
    emptyMessage: "No actions available.",
    modal: true,
  },
);
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
  select: [item: MenuAction];
}>();
const container = usePortalContainer();
function select(item: MenuAction) {
  if (item.disabled) return;
  item.onSelect?.();
  emit("select", item);
}
function keyboard(event: KeyboardEvent) {
  if (
    props.disabled ||
    !(event.key === "ContextMenu" || (event.key === "F10" && event.shiftKey))
  )
    return;
  event.preventDefault();
  const target = event.currentTarget as HTMLElement;
  const rect = target.getBoundingClientRect();
  target.dispatchEvent(
    new MouseEvent("contextmenu", {
      bubbles: true,
      cancelable: true,
      clientX: rect.left + rect.width / 2,
      clientY: rect.top + rect.height / 2,
    }),
  );
}
function update(open: boolean) {
  emit("update:open", open);
  emit("open-change", open);
}
</script>
<template>
  <ContextMenuRoot :modal="modal"
    ><ContextMenuState :open="open" :default-open="defaultOpen" @change="update"
      ><ContextMenuTrigger
        :disabled="disabled"
        :as-child="!!$slots.trigger"
        class="cr-context-trigger"
        tabindex="0"
        @keydown="keyboard"
        ><slot name="trigger"><slot /></slot></ContextMenuTrigger
      ><ContextMenuPortal :to="container"
        ><ContextMenuContent v-bind="$attrs" class="cr-popup"
          ><p v-if="!items.length" class="cr-description">
            <slot name="empty"><RenderContent :content="emptyMessage" /></slot>
          </p>
          <ContextMenuItem
            v-for="(item, index) in items"
            :key="item.id ?? index"
            :as="item.href && !item.disabled ? 'a' : 'div'"
            :href="item.disabled ? undefined : item.href"
            :disabled="item.disabled"
            :data-destructive="item.destructive || undefined"
            class="cr-menu-item"
            @select="select(item)"
            ><slot name="item" :item="item">{{
              item.label
            }}</slot></ContextMenuItem
          ></ContextMenuContent
        ></ContextMenuPortal
      ></ContextMenuState
    ></ContextMenuRoot
  >
</template>
```


---

# vue/components/data-table

---
title: "Data Table"
description: "Searchable, sortable and paginated data with controlled state, custom cells, stable row keys and loading/empty states."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/data-table

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import DataTable from "./components/ui/data-table.vue";
</script>

<template>
  <DataTable caption="Projects" :columns="[{ key: 'name', label: 'Name' }, { key: 'status', label: 'Status' }]" :rows="[{ name: 'Website', status: 'Active' }, { name: 'Mobile app', status: 'Planning' }]" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed } from "vue";
import Pagination from "./pagination.vue";
import { RenderContent, useDisplayModel } from "./display-utils";
import type {
  DataColumn,
  DataRow,
  DataSort,
  DisplayContent,
} from "./display-types";
const props = withDefaults(
  defineProps<{
    caption: string;
    columns: DataColumn[];
    rows: DataRow[];
    pageSize?: number;
    query?: string;
    defaultQuery?: string;
    page?: number;
    defaultPage?: number;
    sort?: DataSort | null;
    defaultSort?: DataSort | null;
    getRowKey?: (row: Readonly<DataRow>, index: number) => string | number;
    loading?: boolean;
    loadingMessage?: DisplayContent;
    emptyMessage?: DisplayContent;
    searchPlaceholder?: string;
    searchable?: boolean;
  }>(),
  {
    pageSize: 5,
    defaultQuery: "",
    defaultPage: 1,
    defaultSort: null,
    loading: false,
    loadingMessage: "Loading records…",
    emptyMessage: "No matching records.",
    searchPlaceholder: "Search records…",
    searchable: true,
  },
);
const emit = defineEmits<{
  "update:query": [value: string];
  "query-change": [value: string];
  "update:page": [value: number];
  "page-change": [value: number];
  "update:sort": [value: DataSort | null];
  "sort-change": [value: DataSort | null];
}>();
const queryValue = useDisplayModel(
  () => props.query,
  props.defaultQuery,
  (value) => {
    emit("update:query", value);
    emit("query-change", value);
  },
);
const pageValue = useDisplayModel(
  () => props.page,
  props.defaultPage,
  (value) => {
    emit("update:page", value);
    emit("page-change", value);
  },
);
const sortValue = useDisplayModel<DataSort | null>(
  () => props.sort,
  props.defaultSort,
  (value) => {
    emit("update:sort", value);
    emit("sort-change", value);
  },
);
const filtered = computed(() => {
  const list = props.rows.filter((row) =>
    props.columns.some((column) =>
      String(row[column.key] ?? "")
        .toLowerCase()
        .includes(queryValue.value.toLowerCase()),
    ),
  );
  const sort = sortValue.value;
  if (sort)
    list.sort((a, b) => {
      const left = a[sort.key],
        right = b[sort.key];
      return (
        (typeof left === "number" && typeof right === "number"
          ? left - right
          : String(left ?? "").localeCompare(String(right ?? ""), undefined, {
              numeric: true,
            })) * sort.direction
      );
    });
  return list;
});
const size = computed(() =>
  Number.isFinite(props.pageSize) ? Math.max(1, Math.floor(props.pageSize)) : 5,
);
const total = computed(() =>
  Math.max(1, Math.ceil(filtered.value.length / size.value)),
);
const current = computed(() =>
  Number.isFinite(pageValue.value)
    ? Math.max(1, Math.min(Math.floor(pageValue.value), total.value))
    : 1,
);
const offset = computed(() => (current.value - 1) * size.value);
const visibleRows = computed(() =>
  filtered.value.slice(offset.value, current.value * size.value),
);
function search(event: Event) {
  queryValue.value = (event.target as HTMLInputElement).value;
  pageValue.value = 1;
}
function sortBy(column: DataColumn) {
  sortValue.value = {
    key: column.key,
    direction:
      sortValue.value?.key === column.key && sortValue.value.direction === 1
        ? -1
        : 1,
  };
  pageValue.value = 1;
}
</script>
<template>
  <div class="cr-data-table">
    <input
      v-if="searchable"
      class="cr-input"
      type="search"
      :aria-label="`Search ${caption}`"
      :placeholder="searchPlaceholder"
      :value="queryValue"
      @input="search"
    />
    <div
      class="cr-table-scroll"
      role="region"
      :aria-label="caption"
      tabindex="0"
    >
      <table class="cr-table" :aria-busy="loading || undefined">
        <caption>
          {{
            caption
          }}
        </caption>
        <thead>
          <tr>
            <th
              v-for="column in columns"
              :key="column.key"
              scope="col"
              :aria-sort="
                sortValue?.key === column.key
                  ? sortValue.direction === 1
                    ? 'ascending'
                    : 'descending'
                  : undefined
              "
            >
              <button
                v-if="column.sortable !== false"
                type="button"
                class="cr-button"
                data-variant="ghost"
                data-size="sm"
                :aria-label="`Sort by ${column.label}, ${sortValue?.key === column.key && sortValue.direction === 1 ? 'descending' : 'ascending'}`"
                @click="sortBy(column)"
              >
                {{ column.label
                }}<span aria-hidden="true">{{
                  sortValue?.key === column.key
                    ? sortValue.direction === 1
                      ? "↑"
                      : "↓"
                    : "↕"
                }}</span></button
              ><template v-else>{{ column.label }}</template>
            </th>
          </tr>
        </thead>
        <tbody>
          <template v-if="!loading"
            ><tr
              v-for="(row, index) in visibleRows"
              :key="
                getRowKey?.(row, offset + index) ?? row.id ?? offset + index
              "
            >
              <td v-for="column in columns" :key="column.key">
                <slot
                  :name="`cell-${column.key}`"
                  :value="row[column.key]"
                  :row="row"
                  :column="column"
                  :row-index="offset + index"
                  ><slot
                    name="cell"
                    :value="row[column.key]"
                    :row="row"
                    :column="column"
                    :row-index="offset + index"
                    ><RenderContent
                      :content="
                        column.render
                          ? column.render(row[column.key], row)
                          : row[column.key]
                      " /></slot
                ></slot>
              </td></tr
          ></template>
          <tr v-if="loading || !filtered.length">
            <td :colspan="Math.max(1, columns.length)">
              <slot v-if="loading" name="loading"
                ><RenderContent :content="loadingMessage" /></slot
              ><slot v-else name="empty"
                ><RenderContent :content="emptyMessage"
              /></slot>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="cr-data-table-footer">
      <p class="cr-description" role="status">
        <RenderContent v-if="loading" :content="loadingMessage" /><template
          v-else
          >{{
            filtered.length
              ? `${offset + 1}–${Math.min(current * size, filtered.length)} of ${filtered.length} records`
              : "0 records"
          }}</template
        >
      </p>
      <Pagination
        :label="`${caption} pages`"
        :page="current"
        :total-pages="total"
        :disabled="loading"
        @update:page="pageValue = $event"
      />
    </div>
  </div>
</template>
```


---

# vue/components/date-picker

---
title: "Date Picker"
description: "Single-date and date-range selection with shortcuts, manual confirmation, localized calendars and editable date fields."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/date-picker

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import { ref } from "vue";
import DatePicker from "./components/ui/date-picker.vue";
const notice = ref('');
const dateRange = ref<string | { start: string; end: string } | null>({ start: "2026-09-17", end: "2026-09-23" });
</script>

<template>
  <DatePicker v-model="dateRange" mode="range" label="Project dates" :auto-apply="false" @value-change="notice = $event &amp;&amp; typeof $event === 'object' ? `${$event.start} – ${$event.end} selected` : 'Selection cleared'" />
  <p v-if="notice" role="status" class="cr-description" style="margin-top: 12px">{{ notice }}</p>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
import {
  FocusScope,
  PopoverClose,
  PopoverContent,
  PopoverPortal,
  PopoverRoot,
  PopoverTrigger,
} from "reka-ui";
import { CalendarDays, X } from "@lucide/vue";
import Calendar from "./calendar.vue";
import {
  addCalendarDays,
  addCalendarMonths,
  calendarLabels,
  endOfCalendarMonth,
  isCalendarDateDisabled,
  isCalendarRangeAvailable,
  parseCalendarDate,
  startOfCalendarMonth,
  useCalendarToday,
  type CalendarValue,
  type DatePickerProps,
  type DatePickerShortcut,
} from "./calendar-utils";
import { cx, usePortalContainer } from "./utils";

const props = withDefaults(defineProps<DatePickerProps>(), {
  mode: "single",
  locale: "en",
  disabled: false,
  autoApply: true,
  inline: false,
  overlay: false,
  collisionPadding: 16,
  clearable: true,
  showInputs: true,
  shortcuts: true,
  separator: " – ",
  open: undefined,
  // Preserve the calendar defaults when forwarding optional Boolean props.
  excludeDisabled: true,
  monthSelection: true,
});
const emit = defineEmits<{
  "update:modelValue": [value: CalendarValue];
  valueChange: [value: CalendarValue];
  "update:open": [open: boolean];
  openChange: [open: boolean];
  monthChange: [month: string];
  selectionPendingChange: [pending: boolean];
}>();
const root = ref<HTMLDivElement>();
const calendar = ref<InstanceType<typeof Calendar>>();
const portalContainer = usePortalContainer();
const headingId = useId();
const errorId = useId();
const labels = computed(() => calendarLabels(props.locale, props.labels));
const label = computed(
  () =>
    props.label ??
    (props.mode === "range"
      ? labels.value.chooseRange
      : labels.value.chooseDate),
);
const placeholder = computed(() => props.placeholder ?? label.value);
const internal = ref<CalendarValue>(props.defaultValue ?? null);
const internalOpen = ref(false);
const chosen = computed(() =>
  props.modelValue !== undefined ? props.modelValue : internal.value,
);
const open = computed(
  () => (props.open ?? internalOpen.value) && !props.disabled,
);
const draft = ref<CalendarValue>(chosen.value);
const selectionPending = ref(false);
const calendarKey = ref(0);
const error = ref("");
const getStart = (value: CalendarValue) =>
  typeof value === "string" ? value : (value?.start ?? "");
const getEnd = (value: CalendarValue) =>
  value && typeof value === "object" ? value.end : "";
const startInput = ref(getStart(chosen.value));
const endInput = ref(getEnd(chosen.value));
function pendingChange(pending: boolean) {
  selectionPending.value = pending;
  emit("selectionPendingChange", pending);
}
function synchronize(value = chosen.value, resetCalendar = true) {
  draft.value = value;
  startInput.value = getStart(value);
  endInput.value = getEnd(value);
  error.value = "";
  pendingChange(false);
  if (resetCalendar) calendarKey.value++;
}
watch(
  [() => getStart(chosen.value), () => getEnd(chosen.value), () => props.mode],
  () => synchronize(chosen.value, false),
);
function setOpen(next: boolean) {
  if (next && props.disabled) return;
  if (next) synchronize();
  else {
    calendar.value?.cancelPendingSelection();
    pendingChange(false);
  }
  if (props.open === undefined) internalOpen.value = next;
  emit("update:open", next);
  emit("openChange", next);
}
// A parent may open the picker directly through v-model:open.
watch(open, (next, previous) => {
  if (next && !previous) synchronize();
  if (!next && previous) {
    calendar.value?.cancelPendingSelection();
    pendingChange(false);
  }
});
function resetForm() {
  const next =
    props.modelValue === undefined
      ? (props.defaultValue ?? null)
      : props.modelValue;
  if (props.modelValue === undefined) internal.value = next;
  synchronize(next);
  setOpen(false);
}
let removeReset: (() => void) | undefined;
function bindForm() {
  removeReset?.();
  const form = props.form
    ? document.getElementById(props.form)
    : root.value?.closest("form");
  if (!(form instanceof HTMLFormElement)) return;
  const reset = (event: Event) =>
    queueMicrotask(() => {
      if (!event.defaultPrevented) resetForm();
    });
  form.addEventListener("reset", reset);
  removeReset = () => form.removeEventListener("reset", reset);
}
onMounted(bindForm);
watch(() => props.form, bindForm, { flush: "post" });
onBeforeUnmount(() => removeReset?.());
function valid(value: CalendarValue) {
  if (!value) return true;
  if (typeof value === "object")
    return props.mode === "range" && isCalendarRangeAvailable(value, props);
  try {
    parseCalendarDate(value);
  } catch {
    return false;
  }
  return props.mode !== "range" && !isCalendarDateDisabled(value, props);
}
function commit(value: CalendarValue) {
  if (props.disabled || !valid(value)) return;
  const next =
    props.mode === "range"
      ? value && typeof value === "object"
        ? value
        : null
      : typeof value === "string"
        ? value
        : "";
  if (props.modelValue === undefined) internal.value = next;
  emit("update:modelValue", next);
  emit("valueChange", next);
}
function select(value: CalendarValue, close = true, resetCalendar = false) {
  if (props.disabled) return;
  if (!valid(value)) {
    error.value = labels.value.invalidDate;
    return;
  }
  const visible =
    props.autoApply && props.modelValue !== undefined ? chosen.value : value;
  synchronize(visible, resetCalendar);
  if (props.autoApply) {
    commit(value);
    if (!props.inline && close) setOpen(false);
  }
}
function edit(start: string, end: string) {
  if (props.disabled) return;
  startInput.value = start;
  endInput.value = end;
  const next =
    props.mode === "range" ? (start && end ? { start, end } : null) : start;
  if ((props.mode === "range" && !!start !== !!end) || !valid(next)) {
    error.value = labels.value.invalidDate;
    return;
  }
  error.value = "";
  draft.value = next;
  pendingChange(false);
  calendarKey.value++;
  if (props.autoApply) commit(next);
}
function finishInput() {
  if (props.autoApply && props.modelValue !== undefined && !error.value) {
    startInput.value = getStart(chosen.value);
    endInput.value = getEnd(chosen.value);
  }
}
function cancel() {
  synchronize();
  if (!props.inline) setOpen(false);
}
function apply() {
  if (selectionPending.value || error.value) return;
  commit(draft.value);
  if (!props.inline) setOpen(false);
}
function escape(event: KeyboardEvent) {
  if (selectionPending.value) {
    event.preventDefault();
    calendar.value?.cancelPendingSelection();
  }
}
const format = (date: string) =>
  props.formatDate?.(date, props.locale) ??
  new Intl.DateTimeFormat(
    props.locale,
    props.dateFormat
      ? { ...props.dateFormat, timeZone: "UTC", calendar: "gregory" }
      : { dateStyle: "medium", timeZone: "UTC", calendar: "gregory" },
  ).format(parseCalendarDate(date));
const display = computed(() =>
  !chosen.value
    ? ""
    : typeof chosen.value === "string"
      ? format(chosen.value)
      : `${format(chosen.value.start)}${props.separator}${format(chosen.value.end)}`,
);
const localToday = useCalendarToday();
const items = computed(() => {
  const today = localToday.value || "1970-01-01",
    yesterday = addCalendarDays(today, -1);
  const lastMonth = startOfCalendarMonth(addCalendarMonths(today, -1));
  const defaults: DatePickerShortcut[] =
    props.mode === "range"
      ? [
          { label: labels.value.today, value: { start: today, end: today } },
          {
            label: labels.value.yesterday,
            value: { start: yesterday, end: yesterday },
          },
          {
            label: labels.value.last7Days,
            value: { start: addCalendarDays(today, -6), end: today },
          },
          {
            label: labels.value.last30Days,
            value: { start: addCalendarDays(today, -29), end: today },
          },
          {
            label: labels.value.thisMonth,
            value: {
              start: startOfCalendarMonth(today),
              end: endOfCalendarMonth(today),
            },
          },
          {
            label: labels.value.lastMonth,
            value: { start: lastMonth, end: endOfCalendarMonth(lastMonth) },
          },
        ]
      : [
          { label: labels.value.today, value: today },
          { label: labels.value.yesterday, value: yesterday },
        ];
  const shortcuts = Array.isArray(props.shortcuts)
    ? props.shortcuts
    : props.shortcuts
      ? defaults
      : [];
  return shortcuts.map((item: DatePickerShortcut) => {
    const value = typeof item.value === "function" ? item.value() : item.value;
    return {
      label: item.label,
      value,
      disabled:
        props.disabled ||
        (!localToday.value && !Array.isArray(props.shortcuts)) ||
        !valid(value),
    };
  });
});
const calendarValue = computed(() =>
  props.autoApply ? chosen.value : draft.value,
);
const common = computed(() => ({
  label: label.value,
  min: props.min,
  max: props.max,
  locale: props.locale,
  weekStartsOn: props.weekStartsOn,
  disabled: props.disabled,
  disabledDates: props.disabledDates,
  excludeDisabled: props.excludeDisabled,
  startFrom: props.startFrom,
  numberOfMonths: props.numberOfMonths,
  showWeekNumbers: props.showWeekNumbers,
  weekdayFormat: props.weekdayFormat,
  monthSelection: props.monthSelection,
  labels: props.labels,
  previousMonthLabel: props.previousMonthLabel,
  nextMonthLabel: props.nextMonthLabel,
  renderDay: props.renderDay,
}));
const contentAttributes = computed(() =>
  props.inline
    ? { role: "group", "aria-label": label.value }
    : {
        class: "cr-positioner cr-date-picker-positioner",
        align: "start" as const,
        sideOffset: 8,
        collisionPadding: props.collisionPadding,
        prioritizePosition: true,
        sticky: "always" as const,
        "aria-labelledby": headingId,
      },
);
const scopeAttributes = computed(() =>
  props.inline || props.overlay ? {} : { trapped: open.value, loop: true },
);
</script>

<template>
  <div ref="root" :class="cx('cr-date-picker', className)">
    <template v-if="name">
      <input
        type="hidden"
        :form="form"
        :name="mode === 'range' ? `${name}[start]` : name"
        :value="getStart(chosen)"
        :disabled="disabled"
      />
      <input
        v-if="mode === 'range'"
        type="hidden"
        :form="form"
        :name="`${name}[end]`"
        :value="getEnd(chosen)"
        :disabled="disabled"
      />
    </template>
    <PopoverRoot
      :open="open && !inline"
      :modal="overlay"
      @update:open="setOpen"
    >
      <PopoverTrigger
        v-if="!inline"
        :class="cx('cr-button cr-date-picker-trigger', triggerClassName)"
        data-variant="outline"
        data-size="md"
        :disabled="disabled"
        :aria-label="`${label}${display ? `: ${display}` : ''}`"
      >
        <slot
          name="trigger"
          :value="display"
          :placeholder="placeholder"
          :open="open"
        >
          <component
            :is="() => renderTrigger!(display, placeholder)"
            v-if="renderTrigger"
          />
          <template v-else>
            <span :data-placeholder="!display || undefined">{{
              display || placeholder
            }}</span>
            <slot name="icon"
              ><component :is="() => icon" v-if="icon" /><CalendarDays
                v-else
                :size="16"
                aria-hidden="true"
            /></slot>
          </template>
        </slot>
      </PopoverTrigger>
      <component
        :is="inline ? 'div' : PopoverPortal"
        v-bind="inline ? {} : { to: portalContainer }"
      >
        <div
          v-if="!inline && overlay && open"
          class="cr-date-picker-backdrop"
          aria-hidden="true"
        />
        <component
          :is="inline ? 'div' : PopoverContent"
          v-bind="contentAttributes"
          @escape-key-down="escape"
        >
          <component
            :is="inline || overlay ? 'div' : FocusScope"
            v-bind="scopeAttributes"
            :class="
              inline ? 'cr-date-picker-inline' : 'cr-popup cr-date-picker-popup'
            "
            @mount-auto-focus.prevent
            @unmount-auto-focus.prevent
          >
            <div v-if="!inline" class="cr-date-picker-heading">
              <h2 :id="headingId">{{ label }}</h2>
              <PopoverClose
                class="cr-date-picker-close"
                :aria-label="labels.close"
                ><X :size="16" aria-hidden="true"
              /></PopoverClose>
            </div>
            <div class="cr-date-picker-body">
              <div
                v-if="items.length"
                class="cr-date-picker-shortcuts"
                :aria-label="label"
              >
                <button
                  v-for="(item, index) in items"
                  :key="index"
                  type="button"
                  class="cr-button"
                  data-variant="ghost"
                  data-size="sm"
                  :disabled="item.disabled"
                  @click="select(item.value, true, true)"
                >
                  {{ item.label }}
                </button>
              </div>
              <div v-if="showInputs" class="cr-date-picker-inputs">
                <label>
                  <span>{{ mode === "range" ? labels.startDate : label }}</span>
                  <input
                    type="date"
                    :value="startInput"
                    :min="min ?? '0001-01-01'"
                    :max="max ?? '9999-12-31'"
                    :disabled="disabled"
                    :aria-invalid="!!error || undefined"
                    :aria-describedby="error ? errorId : undefined"
                    @blur="finishInput"
                    @change="
                      edit(($event.target as HTMLInputElement).value, endInput)
                    "
                  />
                </label>
                <label v-if="mode === 'range'">
                  <span>{{ labels.endDate }}</span>
                  <input
                    type="date"
                    :value="endInput"
                    :min="startInput || min || '0001-01-01'"
                    :max="max ?? '9999-12-31'"
                    :disabled="disabled"
                    :aria-invalid="!!error || undefined"
                    :aria-describedby="error ? errorId : undefined"
                    @blur="finishInput"
                    @change="
                      edit(
                        startInput,
                        ($event.target as HTMLInputElement).value,
                      )
                    "
                  />
                </label>
              </div>
              <Calendar
                ref="calendar"
                :key="calendarKey"
                v-bind="common"
                :mode="mode"
                :model-value="calendarValue"
                @update:model-value="select"
                @month-change="emit('monthChange', $event)"
                @selection-pending-change="pendingChange"
              >
                <template v-if="$slots.day" #day="slotProps"
                  ><slot name="day" v-bind="slotProps"
                /></template>
              </Calendar>
              <p
                v-if="error"
                :id="errorId"
                class="cr-date-picker-error"
                role="alert"
              >
                {{ error }}
              </p>
            </div>
            <div v-if="clearable || !autoApply" class="cr-date-picker-footer">
              <button
                v-if="clearable"
                type="button"
                class="cr-button"
                data-variant="ghost"
                data-size="sm"
                :disabled="disabled || (!startInput && !endInput)"
                @click="select(mode === 'range' ? null : '', false, true)"
              >
                {{ labels.clear }}
              </button>
              <div v-if="!autoApply" class="cr-date-picker-actions">
                <button
                  type="button"
                  class="cr-button"
                  data-variant="ghost"
                  data-size="sm"
                  :disabled="disabled"
                  @click="cancel"
                >
                  {{ labels.cancel }}
                </button>
                <button
                  type="button"
                  class="cr-button"
                  data-variant="primary"
                  data-size="sm"
                  :disabled="
                    disabled || selectionPending || !!error || !valid(draft)
                  "
                  @click="apply"
                >
                  {{ labels.apply }}
                </button>
              </div>
            </div>
          </component>
        </component>
      </component>
    </PopoverRoot>
  </div>
</template>

<style scoped>
/* Reka exposes the space beside the trigger on PopoverContent. The calendar
   body scrolls inside that space while the heading and actions stay visible. */
.cr-date-picker-popup.cr-popup {
  max-height: min(
    var(--reka-popover-content-available-height, 100dvh),
    calc(100dvh - 32px)
  );
  max-width: min(
    var(--reka-popover-content-available-width, 100vw),
    calc(100vw - 32px)
  );
}
</style>
```


---

# vue/components/dialog

---
title: "Dialog"
description: "A modal dialog with focus management, keyboard dismissal and a labelled title."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/dialog

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Dialog from "./components/ui/dialog.vue";
import Input from "./components/ui/input.vue";
</script>

<template>
  <Dialog trigger="Open dialog" title="Workspace settings" description="Manage the details of your workspace."><Input aria-label="Workspace name" placeholder="Acme" /></Dialog>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  DialogRoot,
  DialogTrigger,
  DialogPortal,
  DialogOverlay,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "reka-ui";
import { useId } from "vue";
import { usePortalContainer } from "./utils";
import { RenderContent, focusTarget, useDisplayModel } from "./display-utils";
import type { OverlayProps } from "./display-types";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<OverlayProps & { size?: "default" | "wide" }>(),
  {
    open: undefined,
    trigger: undefined,
    footer: undefined,
    initialFocus: undefined,
    finalFocus: undefined,
    defaultOpen: false,
    modal: true,
    closeLabel: "Close",
  },
);
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
  "open-auto-focus": [event: Event];
  "close-auto-focus": [event: Event];
  "escape-key-down": [event: KeyboardEvent];
  "interact-outside": [event: Event];
}>();
const expanded = useDisplayModel(
  () => props.open,
  props.defaultOpen,
  (value) => {
    emit("update:open", value);
    emit("open-change", value);
  },
);
const container = usePortalContainer();
const descriptionId = useId();
</script>
<template>
  <DialogRoot v-model:open="expanded" :modal="modal"
    ><DialogTrigger
      v-if="trigger != null || triggerRender || $slots.trigger"
      :as-child="!!($slots.trigger || triggerRender)"
      :disabled="disabled"
      class="cr-button"
      data-variant="outline"
      ><slot name="trigger"
        ><component :is="triggerRender" v-if="triggerRender"
          ><RenderContent :content="trigger" /></component
        ><RenderContent v-else :content="trigger" /></slot></DialogTrigger
    ><DialogPortal :to="container"
      ><DialogOverlay class="cr-backdrop" />
      <div v-if="expanded" class="cr-modal-viewport" data-kind="dialog">
        <DialogContent
          v-bind="$attrs"
          :class="['cr-modal cr-dialog', className]"
          :data-size="size"
          :aria-describedby="
            description || $slots.description ? descriptionId : undefined
          "
          @open-auto-focus="
            (event) => {
              focusTarget(event, initialFocus);
              emit('open-auto-focus', event);
            }
          "
          @close-auto-focus="
            (event) => {
              focusTarget(event, finalFocus);
              emit('close-auto-focus', event);
            }
          "
          @escape-key-down="emit('escape-key-down', $event)"
          @interact-outside="emit('interact-outside', $event)"
          ><header class="cr-modal-header">
            <DialogTitle class="cr-modal-title"
              ><slot name="title">{{ title }}</slot></DialogTitle
            ><DialogDescription
              :id="descriptionId"
              v-if="description || $slots.description"
              class="cr-description"
              ><slot name="description">{{
                description
              }}</slot></DialogDescription
            ><DialogClose
              class="cr-modal-close"
              :aria-label="closeLabel === 'Close' ? 'Close dialog' : closeLabel"
              ><svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                aria-hidden="true"
              >
                <path d="m6 6 12 12M18 6 6 18" /></svg
            ></DialogClose>
          </header>
          <div class="cr-modal-content">
            <slot :close="() => (expanded = false)" />
          </div>
          <footer v-if="footer !== null" class="cr-modal-footer">
            <slot name="footer" :close="() => (expanded = false)"
              ><RenderContent
                v-if="footer !== undefined"
                :content="footer"
              /><DialogClose
                v-else
                class="cr-button"
                data-variant="secondary"
                >{{ closeLabel }}</DialogClose
              ></slot
            >
          </footer></DialogContent
        >
      </div></DialogPortal
    ></DialogRoot
  >
</template>
```


---

# vue/components/drawer

---
title: "Drawer"
description: "A swipeable drawer with focus management, keyboard dismissal and a labelled title."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/drawer

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Drawer from "./components/ui/drawer.vue";
import Input from "./components/ui/input.vue";
</script>

<template>
  <Drawer trigger="Open drawer" title="Workspace settings" description="Manage the details of your workspace."><Input aria-label="Workspace name" placeholder="Acme" /></Drawer>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  DialogRoot,
  DialogTrigger,
  DialogPortal,
  DialogOverlay,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "reka-ui";
import { useId } from "vue";
import { usePortalContainer } from "./utils";
import { RenderContent, focusTarget, useDisplayModel } from "./display-utils";
import type { OverlayProps } from "./display-types";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<
    OverlayProps & { swipeDirection?: "up" | "down" | "left" | "right" }
  >(),
  {
    open: undefined,
    trigger: undefined,
    footer: undefined,
    initialFocus: undefined,
    finalFocus: undefined,
    defaultOpen: false,
    modal: true,
    closeLabel: "Close",
  },
);
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
  "open-auto-focus": [event: Event];
  "close-auto-focus": [event: Event];
  "escape-key-down": [event: KeyboardEvent];
  "interact-outside": [event: Event];
}>();
const expanded = useDisplayModel(
  () => props.open,
  props.defaultOpen,
  (value) => {
    emit("update:open", value);
    emit("open-change", value);
  },
);
const container = usePortalContainer();
const descriptionId = useId();

let gesture: { x: number; y: number; id: number } | undefined;
function startSwipe(event: PointerEvent) {
  if (event.button !== 0) return;
  gesture = { x: event.clientX, y: event.clientY, id: event.pointerId };
  (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
}
function endSwipe(event: PointerEvent) {
  if (!gesture || gesture.id !== event.pointerId) return;
  const x = event.clientX - gesture.x,
    y = event.clientY - gesture.y;
  const direction = props.swipeDirection ?? "down";
  const distance =
    direction === "down"
      ? y
      : direction === "up"
        ? -y
        : direction === "left"
          ? -x
          : x;
  if (distance > 70) expanded.value = false;
  gesture = undefined;
}
</script>
<template>
  <DialogRoot v-model:open="expanded" :modal="modal"
    ><DialogTrigger
      v-if="trigger != null || triggerRender || $slots.trigger"
      :as-child="!!($slots.trigger || triggerRender)"
      :disabled="disabled"
      class="cr-button"
      data-variant="outline"
      ><slot name="trigger"
        ><component :is="triggerRender" v-if="triggerRender"
          ><RenderContent :content="trigger" /></component
        ><RenderContent v-else :content="trigger" /></slot></DialogTrigger
    ><DialogPortal :to="container"
      ><DialogOverlay class="cr-backdrop" />
      <div v-if="expanded" class="cr-modal-viewport" data-kind="drawer">
        <DialogContent
          v-bind="$attrs"
          :class="['cr-modal cr-drawer', className]"
          :aria-describedby="
            description || $slots.description ? descriptionId : undefined
          "
          @open-auto-focus="
            (event) => {
              focusTarget(event, initialFocus);
              emit('open-auto-focus', event);
            }
          "
          @close-auto-focus="
            (event) => {
              focusTarget(event, finalFocus);
              emit('close-auto-focus', event);
            }
          "
          @escape-key-down="emit('escape-key-down', $event)"
          @interact-outside="emit('interact-outside', $event)"
          ><div
            class="cr-drawer-handle"
            aria-hidden="true"
            @pointerdown="startSwipe"
            @pointerup="endSwipe"
            @pointercancel="gesture = undefined"
          >
            <span />
          </div>
          <header class="cr-modal-header">
            <DialogTitle class="cr-modal-title"
              ><slot name="title">{{ title }}</slot></DialogTitle
            ><DialogDescription
              :id="descriptionId"
              v-if="description || $slots.description"
              class="cr-description"
              ><slot name="description">{{
                description
              }}</slot></DialogDescription
            ><DialogClose
              class="cr-modal-close"
              :aria-label="closeLabel === 'Close' ? 'Close drawer' : closeLabel"
              ><svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                aria-hidden="true"
              >
                <path d="m6 6 12 12M18 6 6 18" /></svg
            ></DialogClose>
          </header>
          <div class="cr-modal-content">
            <slot :close="() => (expanded = false)" />
          </div>
          <footer v-if="footer !== null" class="cr-modal-footer">
            <slot name="footer" :close="() => (expanded = false)"
              ><RenderContent
                v-if="footer !== undefined"
                :content="footer"
              /><DialogClose
                v-else
                class="cr-button"
                data-variant="secondary"
                >{{ closeLabel }}</DialogClose
              ></slot
            >
          </footer></DialogContent
        >
      </div></DialogPortal
    ></DialogRoot
  >
</template>
```


---

# vue/components/dropdown

---
title: "Dropdown"
description: "A keyboard-accessible menu of actions."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/dropdown

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import { ref } from "vue";
import Dropdown from "./components/ui/dropdown.vue";
const notice = ref('');
</script>

<template>
  <Dropdown trigger="Project actions" :items="[{ label: 'Rename' }, { label: 'Archive' }]" @select="notice = `${$event.label} selected`" />
  <p v-if="notice" role="status" class="cr-description" style="margin-top: 12px">{{ notice }}</p>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  DropdownMenuRoot,
  DropdownMenuTrigger,
  DropdownMenuPortal,
  DropdownMenuContent,
  DropdownMenuItem,
} from "reka-ui";
import type { Component } from "vue";
import { usePortalContainer } from "./utils";
import { RenderContent, useDisplayModel } from "./display-utils";
import type { DisplayContent, MenuAction } from "./display-types";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<{
    trigger?: DisplayContent;
    triggerRender?: Component;
    items: MenuAction[];
    disabled?: boolean;
    side?: "top" | "bottom" | "left" | "right";
    align?: "start" | "center" | "end";
    emptyMessage?: DisplayContent;
    open?: boolean;
    defaultOpen?: boolean;
    modal?: boolean;
  }>(),
  {
    disabled: false,
    side: "bottom",
    align: "start",
    emptyMessage: "No actions available.",
    open: undefined,
    defaultOpen: false,
    modal: true,
  },
);
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
  select: [item: MenuAction];
}>();
const expanded = useDisplayModel(
  () => props.open,
  props.defaultOpen,
  (value) => {
    emit("update:open", value);
    emit("open-change", value);
  },
);
const container = usePortalContainer();
function select(item: MenuAction) {
  if (item.disabled) return;
  item.onSelect?.();
  emit("select", item);
}
</script>
<template>
  <DropdownMenuRoot v-model:open="expanded" :modal="modal"
    ><DropdownMenuTrigger
      :as-child="!!($slots.trigger || triggerRender)"
      :disabled="disabled"
      class="cr-button"
      data-variant="outline"
      ><slot name="trigger"
        ><component :is="triggerRender" v-if="triggerRender"
          ><RenderContent :content="trigger" /></component
        ><template v-else
          ><RenderContent :content="trigger" /><svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.75"
            aria-hidden="true"
          >
            <path
              d="m6 9 6 6 6-6"
            /></svg></template></slot></DropdownMenuTrigger
    ><DropdownMenuPortal :to="container"
      ><DropdownMenuContent
        v-bind="$attrs"
        :side="side"
        :align="align"
        :side-offset="6"
        class="cr-popup"
        ><p v-if="!items.length" class="cr-description">
          <slot name="empty"><RenderContent :content="emptyMessage" /></slot>
        </p>
        <DropdownMenuItem
          v-for="(item, index) in items"
          :key="item.id ?? index"
          :as="item.href && !item.disabled ? 'a' : 'div'"
          :href="item.disabled ? undefined : item.href"
          :disabled="item.disabled"
          :data-destructive="item.destructive || undefined"
          class="cr-menu-item"
          @select="select(item)"
          ><slot name="item" :item="item">{{
            item.label
          }}</slot></DropdownMenuItem
        ></DropdownMenuContent
      ></DropdownMenuPortal
    ></DropdownMenuRoot
  >
</template>
```


---

# vue/components/empty-state

---
title: "Empty State"
description: "A useful empty state with an optional next action."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/empty-state

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import { ref } from "vue";
import Button from "./components/ui/button.vue";
import EmptyState from "./components/ui/empty-state.vue";
const notice = ref('');
</script>

<template>
  <EmptyState title="No projects yet" description="Create your first project to get started."><template #action><Button @click="notice = 'New project created in this preview.'">Create project</Button></template></EmptyState>
  <p v-if="notice" role="status" class="cr-description" style="margin-top: 12px">{{ notice }}</p>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import type { DisplayContent } from "./display-types";
import { RenderContent } from "./display-utils";
defineProps<{
  title: string;
  description?: string;
  icon?: DisplayContent;
  action?: DisplayContent;
}>();
</script>
<template>
  <section class="cr-empty-state">
    <div v-if="icon || $slots.icon" aria-hidden="true" class="cr-empty-icon">
      <slot name="icon"><RenderContent :content="icon" /></slot>
    </div>
    <h3>{{ title }}</h3>
    <p v-if="description" class="cr-description">{{ description }}</p>
    <slot name="action"><RenderContent :content="action" /></slot><slot />
  </section>
</template>
```


---

# vue/components/field

---
title: "Field"
description: "A labelled field with description, validation and accessible errors."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/field

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Field from "./components/ui/field.vue";
import Input from "./components/ui/input.vue";
</script>

<template>
  <Field label="Email" description="We’ll use this for account updates."><Input type="email" placeholder="you@company.com" /></Field>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  computed,
  nextTick,
  onBeforeUnmount,
  provide,
  ref,
  useId,
  useSlots,
} from "vue";
import { cx, FieldKey, useFormReset } from "./utils";
import { fieldControl, useFieldFormValidation } from "./field-validation";
const props = withDefaults(
  defineProps<{
    label?: string;
    description?: string;
    error?: string;
    invalid?: boolean;
    disabled?: boolean;
    name?: string;
    id?: string;
    className?: string;
    validationMode?: "onBlur" | "onChange" | "onSubmit";
    validationDebounceTime?: number;
    validate?: (
      value: string,
      formValues: Record<string, FormDataEntryValue>,
    ) =>
      | string
      | string[]
      | null
      | undefined
      | Promise<string | string[] | null | undefined>;
  }>(),
  { validationMode: "onBlur", validationDebounceTime: 0 },
);
const slots = useSlots();
const generatedId = useId();
const id = props.id ?? `cr-field-${generatedId}`;
const controlId = ref(id);
const root = ref<HTMLElement>();
const validationError = ref("");
const invalid = computed(() =>
  Boolean(props.error || slots.error || props.invalid || validationError.value),
);
const errorText = computed(() => props.error || validationError.value);
const describedBy = computed(
  () =>
    [
      props.description || slots.description ? `${id}-description` : "",
      errorText.value || slots.error ? `${id}-error` : "",
    ]
      .filter(Boolean)
      .join(" ") || undefined,
);
provide(FieldKey, {
  id,
  name: computed(() => props.name),
  disabled: computed(() => !!props.disabled),
  invalid,
  describedBy,
  controlId,
  notifyChange: () => {
    void nextTick(() => input({ target: fieldControl(root.value) ?? null }));
  },
});
const controlProps = computed(() => ({
  id: controlId.value,
  name: props.name,
  disabled: props.disabled,
  "aria-invalid": invalid.value || undefined,
  "aria-describedby": describedBy.value,
}));
let revision = 0;
let timer: ReturnType<typeof setTimeout> | undefined;
function isControl(
  target: EventTarget | null | undefined,
): target is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
  return (
    target instanceof HTMLInputElement ||
    target instanceof HTMLTextAreaElement ||
    target instanceof HTMLSelectElement
  );
}
async function validate(
  target: EventTarget | null | undefined,
): Promise<boolean> {
  if (!isControl(target)) target = fieldControl(root.value);
  if (!isControl(target) || target.disabled) return true;
  const current = ++revision;
  let result: string | string[] | null | undefined;
  try {
    result = await props.validate?.(
      target instanceof HTMLInputElement &&
        ["checkbox", "radio"].includes(target.type) &&
        !target.checked
        ? ""
        : target.value,
      target.form ? Object.fromEntries(new FormData(target.form)) : {},
    );
  } catch {
    result = "Validation could not be completed. Please try again.";
  }
  if (current !== revision) return false;
  const custom = Array.isArray(result) ? result.join(" ") : result || "";
  target.setCustomValidity(custom);
  validationError.value = custom || target.validationMessage || "";
  return target.validity.valid;
}
function input(event: Pick<Event, "target">) {
  revision++;
  validationError.value = "";
  if (isControl(event.target)) event.target.setCustomValidity("");
  if (props.validationMode === "onChange") {
    clearTimeout(timer);
    const target = event.target;
    timer = setTimeout(
      () => void validate(target),
      props.validationDebounceTime,
    );
  }
}
function invalidEvent(event: Event) {
  void validate(event.target);
}
useFieldFormValidation(
  root,
  () => Boolean(props.validate) && !props.disabled,
  () => validate(fieldControl(root.value)),
);
useFormReset(
  root,
  () => {
    revision++;
    clearTimeout(timer);
    validationError.value = "";
    root.value
      ?.querySelectorAll<
        HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
      >("input,textarea,select")
      .forEach((control) => control.setCustomValidity(""));
  },
  () => fieldControl(root.value)?.getAttribute("form") ?? undefined,
);
onBeforeUnmount(() => {
  revision++;
  clearTimeout(timer);
});
</script>
<template>
  <div
    ref="root"
    :class="cx('cr-field', className)"
    :data-invalid="invalid ? '' : undefined"
    :data-disabled="disabled ? '' : undefined"
    @invalid.capture="invalidEvent"
    @input="input"
    @focusout="validationMode === 'onBlur' && validate($event.target)"
  >
    <label :for="controlId" class="cr-label"
      ><slot name="label">{{ label }}</slot></label
    >
    <p
      v-if="description || $slots.description"
      :id="`${id}-description`"
      class="cr-description"
    >
      <slot name="description">{{ description }}</slot>
    </p>
    <slot :control-props="controlProps" :invalid="invalid" />
    <p
      v-if="errorText || $slots.error"
      :id="`${id}-error`"
      role="alert"
      class="cr-field-error"
    >
      <slot name="error">{{ errorText }}</slot>
    </p>
  </div>
</template>
```


---

# vue/components/file-upload

---
title: "File Upload"
description: "A validated drag-and-drop file input with cancellable upload and real progress callbacks."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/file-upload

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import { ref } from "vue";
import FileUpload from "./components/ui/file-upload.vue";
const notice = ref('');
</script>

<template>
  <FileUpload label="Project attachment" @file-select="notice = `${$event.name} selected`" />
  <p v-if="notice" role="status" class="cr-description" style="margin-top: 12px">{{ notice }}</p>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, onBeforeUnmount, ref, shallowRef, useId } from "vue";
import Button from "./button.vue";
import Progress from "./progress.vue";
import { cx, useFormReset } from "./utils";
import {
  formatUploadSize,
  validateUploadFile,
  type FileUploadProps,
} from "./file-upload";
const props = withDefaults(defineProps<FileUploadProps>(), {
  required: false,
  label: "Upload a file",
  maxBytes: 10 * 1024 * 1024,
  disabled: false,
});
const emit = defineEmits<{
  "file-select": [file: File];
  "file-change": [file: File | null];
}>();
const model = defineModel<File | null>();
const generatedId = useId();
const hintId = useId();
const errorId = useId();
const inputId = computed(() => props.id ?? generatedId);
const input = ref<HTMLInputElement>();
const file = shallowRef<File | null>(null);
const dragging = ref(false);
const error = ref("");
const status = ref<"idle" | "uploading" | "done">("idle");
const progress = ref<number | null>(null);
let controller: AbortController | undefined;
onBeforeUnmount(() => controller?.abort());
function change(next: File | null) {
  file.value = next;
  model.value = next;
  emit("file-change", next);
}
function reset() {
  controller?.abort();
  change(null);
  status.value = "idle";
  progress.value = null;
  error.value = "";
  dragging.value = false;
  if (input.value) input.value.value = "";
}
useFormReset(input, reset, () => props.form);
function choose(next: File | undefined, fromDrop = false) {
  if (!next || props.disabled || status.value === "uploading") return;
  const validationError = validateUploadFile(
    next,
    props.accept,
    props.maxBytes,
  );
  if (validationError) {
    reset();
    error.value = validationError;
    return;
  }
  if (fromDrop && input.value) {
    const transfer = new DataTransfer();
    transfer.items.add(next);
    input.value.files = transfer.files;
  }
  controller?.abort();
  error.value = "";
  status.value = "idle";
  progress.value = null;
  emit("file-select", next);
  change(next);
}
async function upload() {
  if (
    !file.value ||
    !props.onUpload ||
    props.disabled ||
    status.value === "uploading"
  )
    return;
  const active = new AbortController();
  controller = active;
  status.value = "uploading";
  error.value = "";
  progress.value = null;
  try {
    await props.onUpload(file.value, {
      signal: active.signal,
      onProgress: (value) => {
        if (!active.signal.aborted)
          progress.value = Number.isFinite(value)
            ? Math.max(0, Math.min(100, value))
            : null;
      },
    });
    if (!active.signal.aborted) {
      progress.value = 100;
      status.value = "done";
    }
  } catch {
    if (!active.signal.aborted) {
      error.value = "Upload failed. Please try again.";
      status.value = "idle";
    }
  }
}
function drop(event: DragEvent) {
  dragging.value = false;
  choose(event.dataTransfer?.files[0], true);
}
function remove() {
  reset();
  input.value?.focus();
}
defineExpose({ input, upload, reset });
</script>
<template>
  <div
    :class="cx('cr-file-upload', className)"
    :aria-busy="status === 'uploading' || undefined"
  >
    <div
      class="cr-dropzone"
      :data-dragging="dragging ? '' : undefined"
      :data-disabled="disabled || status === 'uploading' ? '' : undefined"
      @dragover.prevent="
        !disabled && status !== 'uploading' && (dragging = true)
      "
      @dragleave="dragging = false"
      @drop.prevent="drop"
    >
      <svg
        width="24"
        height="24"
        class="cr-upload-icon"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        stroke-linecap="round"
        stroke-linejoin="round"
        aria-hidden="true"
      >
        <path
          d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12"
        /></svg
      ><label :for="inputId" class="cr-label">{{ label }}</label
      ><input
        ref="input"
        :id="inputId"
        type="file"
        :name="name"
        :form="form"
        :required="required"
        :accept="accept"
        :disabled="disabled || status === 'uploading'"
        :aria-describedby="error ? `${hintId} ${errorId}` : hintId"
        :aria-invalid="error ? true : undefined"
        @change="choose(($event.target as HTMLInputElement).files?.[0])"
      />
      <p :id="hintId" class="cr-description">
        Choose or drop one file. Up to {{ formatUploadSize(maxBytes) }}.
      </p>
    </div>
    <div
      v-if="file"
      class="cr-stack"
      style="margin-top: calc(var(--cr-space) * 4)"
    >
      <p class="cr-description">
        {{ file.name }} · {{ Math.ceil(file.size / 1024) }} KB
      </p>
      <Progress
        v-if="status === 'uploading'"
        label="Upload progress"
        :value="progress"
      />
      <div class="cr-row">
        <Button
          v-if="onUpload && status !== 'done'"
          :disabled="disabled"
          :loading="status === 'uploading'"
          @click="upload"
          >Upload</Button
        ><Button variant="outline" :disabled="disabled" @click="remove">{{
          status === "uploading" ? "Cancel upload" : "Remove file"
        }}</Button>
      </div>
      <p v-if="status === 'done'" role="status" class="cr-description">
        Upload complete.
      </p>
      <p v-if="!onUpload" class="cr-description">
        File selected locally. Connect onUpload to send it to your storage
        service.
      </p>
    </div>
    <p
      v-if="error"
      :id="errorId"
      role="alert"
      class="cr-description"
      style="color: var(--cr-destructive)"
    >
      {{ error }}
    </p>
  </div>
</template>
```


---

# vue/components/hover-card

---
title: "Hover Card"
description: "A preview card for supplementary link information."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/hover-card

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import HoverCard from "./components/ui/hover-card.vue";
</script>

<template>
  <HoverCard label="@alex" href="#profile"><strong>Alex Morgan</strong><p class="cr-description">Designer and developer.</p></HoverCard>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  HoverCardRoot,
  HoverCardTrigger,
  HoverCardPortal,
  HoverCardContent,
} from "reka-ui";
import { useDisplayModel } from "./display-utils";
import { usePortalContainer } from "./utils";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<{
    label: string;
    href: string;
    open?: boolean;
    defaultOpen?: boolean;
    openDelay?: number;
    closeDelay?: number;
    side?: "top" | "bottom" | "left" | "right";
    align?: "start" | "center" | "end";
  }>(),
  { open: undefined, defaultOpen: false, side: "bottom", align: "start" },
);
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
}>();
const expanded = useDisplayModel(
  () => props.open,
  props.defaultOpen,
  (value) => {
    emit("update:open", value);
    emit("open-change", value);
  },
);
const container = usePortalContainer();
</script>
<template>
  <HoverCardRoot
    v-model:open="expanded"
    :open-delay="openDelay"
    :close-delay="closeDelay"
    ><HoverCardTrigger :as-child="!!$slots.trigger" :href="href" class="cr-link"
      ><slot name="trigger">{{ label }}</slot></HoverCardTrigger
    ><HoverCardPortal :to="container"
      ><HoverCardContent
        v-bind="$attrs"
        :side="side"
        :align="align"
        :side-offset="8"
        class="cr-popup cr-hover-card"
        ><slot /></HoverCardContent></HoverCardPortal
  ></HoverCardRoot>
</template>
```


---

# vue/components/index

---
title: Vue components
description: 48 native Vue components for your design system.
---

- [Accordion](https://ui.coderocket.app/docs/vue/components/accordion): Expandable sections with built-in keyboard interaction.
- [Alert](https://ui.coderocket.app/docs/vue/components/alert): A contextual message with optional assertive announcement.
- [Alert Dialog](https://ui.coderocket.app/docs/vue/components/alert-dialog): A confirmation dialog with focus management, keyboard dismissal and a labelled title.
- [Avatar](https://ui.coderocket.app/docs/vue/components/avatar): An image with an accessible fallback for a person or team.
- [Badge](https://ui.coderocket.app/docs/vue/components/badge): A compact non-interactive status or label.
- [Breadcrumb](https://ui.coderocket.app/docs/vue/components/breadcrumb): A semantic path through your application.
- [Button](https://ui.coderocket.app/docs/vue/components/button): An action with six visual variants, three sizes and a loading state.
- [Calendar](https://ui.coderocket.app/docs/vue/components/calendar): A Gregorian single-date or range calendar with month/year selection, disabled dates, week numbers and keyboard navigation.
- [Card](https://ui.coderocket.app/docs/vue/components/card): A surface that groups related content, with optional header and footer.
- [Checkbox](https://ui.coderocket.app/docs/vue/components/checkbox): A labelled checkbox with checked and indeterminate states.
- [Collapsible](https://ui.coderocket.app/docs/vue/components/collapsible): An optional content section with a disclosure trigger.
- [Combobox](https://ui.coderocket.app/docs/vue/components/combobox): Searchable single selection with controlled search, disabled options, optional clearing and form support.
- [Command](https://ui.coderocket.app/docs/vue/components/command): A searchable command palette with keyboard navigation and real action callbacks.
- [Context Menu](https://ui.coderocket.app/docs/vue/components/context-menu): A contextual action menu available by right-click or keyboard.
- [Data Table](https://ui.coderocket.app/docs/vue/components/data-table): Searchable, sortable and paginated data with controlled state, custom cells, stable row keys and loading/empty states.
- [Date Picker](https://ui.coderocket.app/docs/vue/components/date-picker): Single-date and date-range selection with shortcuts, manual confirmation, localized calendars and editable date fields.
- [Dialog](https://ui.coderocket.app/docs/vue/components/dialog): A modal dialog with focus management, keyboard dismissal and a labelled title.
- [Drawer](https://ui.coderocket.app/docs/vue/components/drawer): A swipeable drawer with focus management, keyboard dismissal and a labelled title.
- [Dropdown](https://ui.coderocket.app/docs/vue/components/dropdown): A keyboard-accessible menu of actions.
- [Empty State](https://ui.coderocket.app/docs/vue/components/empty-state): A useful empty state with an optional next action.
- [Field](https://ui.coderocket.app/docs/vue/components/field): A labelled field with description, validation and accessible errors.
- [File Upload](https://ui.coderocket.app/docs/vue/components/file-upload): A validated drag-and-drop file input with cancellable upload and real progress callbacks.
- [Hover Card](https://ui.coderocket.app/docs/vue/components/hover-card): A preview card for supplementary link information.
- [Input](https://ui.coderocket.app/docs/vue/components/input): A text input that inherits the library’s field tokens.
- [Input Group](https://ui.coderocket.app/docs/vue/components/input-group): A text input with leading and trailing content.
- [Keyboard Key](https://ui.coderocket.app/docs/vue/components/kbd): A keyboard shortcut hint.
- [Label](https://ui.coderocket.app/docs/vue/components/label): An explicit label linked to a form control.
- [Navigation Menu](https://ui.coderocket.app/docs/vue/components/navigation-menu): A navigation bar with expandable groups and real link semantics.
- [Number Field](https://ui.coderocket.app/docs/vue/components/number-field): A numeric field with increment, decrement, constraints and locale formatting.
- [Pagination](https://ui.coderocket.app/docs/vue/components/pagination): A controlled page navigator with bounded page selection.
- [Popover](https://ui.coderocket.app/docs/vue/components/popover): A non-modal panel anchored to a trigger.
- [Progress](https://ui.coderocket.app/docs/vue/components/progress): A determinate or indeterminate progress bar with a label.
- [Radio Group](https://ui.coderocket.app/docs/vue/components/radio-group): One selection from a labelled set, with arrow-key navigation.
- [Select](https://ui.coderocket.app/docs/vue/components/select): Accessible single or multiple selection with disabled options, controlled state and native form support.
- [Separator](https://ui.coderocket.app/docs/vue/components/separator): A visual and semantic divider.
- [Sheet](https://ui.coderocket.app/docs/vue/components/sheet): A side panel with focus management, keyboard dismissal and a labelled title.
- [Sidebar](https://ui.coderocket.app/docs/vue/components/sidebar): A collapsible application sidebar with active-link semantics.
- [Skeleton](https://ui.coderocket.app/docs/vue/components/skeleton): A reduced-motion-aware placeholder while content is loading.
- [Slider](https://ui.coderocket.app/docs/vue/components/slider): A bounded numeric value with keyboard controls and a visible output.
- [Spinner](https://ui.coderocket.app/docs/vue/components/spinner): An accessible loading indicator that respects reduced motion.
- [Switch](https://ui.coderocket.app/docs/vue/components/switch): An immediate on/off setting with a visible label.
- [Table](https://ui.coderocket.app/docs/vue/components/table): A semantic table with a caption and responsive overflow.
- [Tabs](https://ui.coderocket.app/docs/vue/components/tabs): Related panels connected to an accessible tab list.
- [Textarea](https://ui.coderocket.app/docs/vue/components/textarea): A multiline input with native form semantics.
- [Toast](https://ui.coderocket.app/docs/vue/components/toast): Accessible notifications with a provider, imperative manager and dismiss controls.
- [Toggle](https://ui.coderocket.app/docs/vue/components/toggle): A pressable on/off button with an accessible pressed state.
- [Toggle Group](https://ui.coderocket.app/docs/vue/components/toggle-group): A labelled group of toggle buttons with keyboard navigation.
- [Tooltip](https://ui.coderocket.app/docs/vue/components/tooltip): Additional non-essential text shown on hover or keyboard focus.


---

# vue/components/input-group

---
title: "Input Group"
description: "A text input with leading and trailing content."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/input-group

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import InputGroup from "./components/ui/input-group.vue";
</script>

<template>
  <InputGroup aria-label="Website" leading="https://" placeholder="your-company.com" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import Input from "./input.vue";
defineOptions({ inheritAttrs: false });
defineProps<{ leading?: string; trailing?: string }>();
const model = defineModel<string | number>();
</script>
<template>
  <div class="cr-input-group">
    <span v-if="leading || $slots.leading" class="cr-input-addon"
      ><slot name="leading">{{ leading }}</slot></span
    ><Input v-bind="$attrs" v-model="model" /><span
      v-if="trailing || $slots.trailing"
      class="cr-input-addon"
      ><slot name="trailing">{{ trailing }}</slot></span
    >
  </div>
</template>
```


---

# vue/components/input

---
title: "Input"
description: "A text input that inherits the library’s field tokens."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/input

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Input from "./components/ui/input.vue";
</script>

<template>
  <Input aria-label="Email address" type="email" placeholder="you@company.com" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { ref } from "vue";
import { cx, useControllable, useFieldControl, useFormReset } from "./utils";
defineOptions({ inheritAttrs: false });
const props = defineProps<{
  id?: string;
  name?: string;
  form?: string;
  disabled?: boolean;
  required?: boolean;
  value?: string | number;
  defaultValue?: string | number;
  className?: string;
}>();
const model = defineModel<string | number>();
const emit = defineEmits<{ "value-change": [value: string] }>();
const input = ref<HTMLInputElement>();
const { fieldAttrs, field } = useFieldControl(() => props.id);
const value = useControllable(
  model,
  () => props.value,
  () => props.defaultValue ?? "",
  (next) => emit("value-change", String(next)),
);
useFormReset(
  input,
  () => {
    value.value = props.defaultValue ?? "";
  },
  () => props.form,
);
defineExpose({
  input,
  focus: () => input.value?.focus(),
  select: () => input.value?.select(),
});
</script>
<template>
  <input
    ref="input"
    v-bind="{ ...fieldAttrs, ...$attrs }"
    :id="id ?? fieldAttrs.id"
    :name="name ?? fieldAttrs.name"
    :form="form"
    :required="required"
    :disabled="disabled || field?.disabled.value"
    :class="cx('cr-input', className)"
    :value="value"
    @input="value = ($event.target as HTMLInputElement).value"
  />
</template>
```


---

# vue/components/kbd

---
title: "Keyboard Key"
description: "A keyboard shortcut hint."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/kbd

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Kbd from "./components/ui/kbd.vue";
</script>

<template>
  <span>Open search <Kbd>⌘ K</Kbd></span>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
defineProps<{ className?: string }>();
</script>
<template>
  <kbd :class="['cr-kbd', className]"><slot /></kbd>
</template>
```


---

# vue/components/label

---
title: "Label"
description: "An explicit label linked to a form control."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/label

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import { useId } from "vue";
import Input from "./components/ui/input.vue";
import Label from "./components/ui/label.vue";
const labelId = useId();
</script>

<template>
  <div><Label :html-for="labelId">Full name</Label><Input :id="labelId" /></div>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { Label } from "reka-ui";
import { cx } from "./utils";
defineProps<{ htmlFor?: string; className?: string }>();
</script>
<template>
  <Label :for="htmlFor" :class="cx('cr-label', className)"><slot /></Label>
</template>
```


---

# vue/components/navigation-menu

---
title: "Navigation Menu"
description: "A navigation bar with expandable groups and real link semantics."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/navigation-menu

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import NavigationMenu from "./components/ui/navigation-menu.vue";
</script>

<template>
  <NavigationMenu :items="[{ label: 'Product', links: [{ label: 'Overview', href: '#overview', description: 'Explore the platform.' }, { label: 'Components', href: '#components' }] }]" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  NavigationMenuRoot,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  NavigationMenuViewport,
} from "reka-ui";
import { computed } from "vue";
import { useDisplayModel } from "./display-utils";
const props = withDefaults(
  defineProps<{
    label?: string;
    value?: string | null;
    modelValue?: string | null;
    defaultValue?: string | null;
    items: Array<{
      value?: string;
      label: string;
      links: Array<{
        label: string;
        href: string;
        description?: string;
        active?: boolean;
      }>;
    }>;
  }>(),
  { label: "Main navigation" },
);
const emit = defineEmits<{
  "update:modelValue": [value: string | null];
  "update:value": [value: string | null];
  "value-change": [value: string | null];
}>();
const selected = useDisplayModel(
  () => (props.modelValue !== undefined ? props.modelValue : props.value),
  props.defaultValue ?? null,
  (value) => {
    emit("update:modelValue", value);
    emit("update:value", value);
    emit("value-change", value);
  },
);
const model = computed({
  get: () => selected.value ?? "",
  set: (value: string) => {
    selected.value = value || null;
  },
});
</script>
<template>
  <NavigationMenuRoot v-model="model" class="cr-navigation" :aria-label="label"
    ><NavigationMenuList class="cr-navigation-list"
      ><NavigationMenuItem
        v-for="(item, index) in items"
        :key="item.value ?? index"
        :value="item.value ?? String(index)"
        ><NavigationMenuTrigger class="cr-button" data-variant="ghost"
          >{{ item.label }}
          <svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.75"
            aria-hidden="true"
          >
            <path d="m6 9 6 6 6-6" /></svg></NavigationMenuTrigger
        ><NavigationMenuContent class="cr-navigation-content"
          ><NavigationMenuLink
            v-for="link in item.links"
            :key="link.href"
            :href="link.href"
            :active="link.active"
            class="cr-navigation-link"
            @select="selected = null"
            ><strong>{{ link.label }}</strong
            ><span v-if="link.description">{{
              link.description
            }}</span></NavigationMenuLink
          ></NavigationMenuContent
        ></NavigationMenuItem
      ></NavigationMenuList
    >
    <div class="cr-vue-navigation-positioner">
      <NavigationMenuViewport class="cr-popup" /></div
  ></NavigationMenuRoot>
</template>
```


---

# vue/components/number-field

---
title: "Number Field"
description: "A numeric field with increment, decrement, constraints and locale formatting."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/number-field

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import NumberField from "./components/ui/number-field.vue";
</script>

<template>
  <NumberField label="Team size" :default-value="5" :min="1" :max="100" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, ref, useId } from "vue";
import {
  NumberFieldRoot,
  NumberFieldInput,
  NumberFieldIncrement,
  NumberFieldDecrement,
} from "reka-ui";
import { cx, useControllable, useFieldControl, useFormReset } from "./utils";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<{
    label: string;
    id?: string;
    value?: number | null;
    defaultValue?: number;
    step?: number;
    smallStep?: number;
    largeStep?: number;
    min?: number;
    max?: number;
    locale?: string;
    format?: Intl.NumberFormatOptions;
    formatOptions?: Intl.NumberFormatOptions;
    disabled?: boolean;
    readOnly?: boolean;
    required?: boolean;
    name?: string;
    form?: string;
    allowWheelScrub?: boolean;
    className?: string;
  }>(),
  { step: 1, defaultValue: 0, locale: "en-US" },
);
const model = defineModel<number | null>();
const emit = defineEmits<{
  "value-change": [value: number | null];
  "value-committed": [value: number | null];
}>();
const { field, fieldAttrs } = useFieldControl(() => props.id);
const generatedId = useId();
const inputId = computed(() => props.id ?? fieldAttrs.value.id ?? generatedId);
const disabled = computed(() => props.disabled || field?.disabled.value);
const value = useControllable(
  model,
  () => props.value,
  () => props.defaultValue,
  (next) => emit("value-change", next),
);
const root = ref<HTMLDivElement>();
useFormReset(
  root,
  () => {
    value.value = props.defaultValue;
  },
  () => props.form,
);
function update(next: number) {
  value.value = Number.isFinite(next) ? next : null;
  field?.notifyChange();
}
let drag: { x: number; value: number } | undefined;
function scrubStart(event: PointerEvent) {
  if (event.button !== 0 || disabled.value || props.readOnly) return;
  drag = { x: event.clientX, value: value.value ?? props.min ?? 0 };
  (event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId);
}
function scrubMove(event: PointerEvent) {
  if (!drag || disabled.value || props.readOnly) return;
  const step = event.shiftKey
    ? (props.largeStep ?? props.step * 10)
    : event.altKey
      ? (props.smallStep ?? props.step / 10)
      : props.step;
  const next = drag.value + Math.trunc((event.clientX - drag.x) / 4) * step;
  value.value = Math.min(
    props.max ?? Infinity,
    Math.max(props.min ?? -Infinity, Number(next.toFixed(10))),
  );
}
function scrubEnd() {
  if (drag) emit("value-committed", value.value);
  drag = undefined;
}
</script>
<template>
  <NumberFieldRoot
    as-child
    :model-value="value"
    :id="inputId"
    :step="step"
    :min="min"
    :max="max"
    :locale="locale"
    :format-options="formatOptions ?? format"
    :disabled="disabled"
    :readonly="readOnly"
    :disable-wheel-change="!allowWheelScrub"
    @update:model-value="update"
    ><div ref="root" v-bind="$attrs" :class="cx('cr-number-field', className)">
      <label
        :for="inputId"
        class="cr-label"
        :style="{
          cursor: disabled || readOnly ? undefined : 'ew-resize',
          touchAction: 'none',
        }"
        @pointerdown="scrubStart"
        @pointermove="scrubMove"
        @pointerup="scrubEnd"
        @pointercancel="scrubEnd"
        >{{ label }}</label
      >
      <div class="cr-number-group">
        <NumberFieldDecrement :aria-label="'Decrease ' + label"
          ><svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            aria-hidden="true"
          >
            <path d="M5 12h14" /></svg></NumberFieldDecrement
        ><NumberFieldInput
          v-bind="{ ...fieldAttrs, name: undefined, id: inputId }"
          :required="required"
          :form="form"
          @blur="emit('value-committed', value)"
        /><NumberFieldIncrement :aria-label="'Increase ' + label"
          ><svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            aria-hidden="true"
          >
            <path d="M5 12h14M12 5v14" /></svg
        ></NumberFieldIncrement>
      </div>
      <input
        class="cr-sr-only"
        aria-hidden="true"
        tabindex="-1"
        type="number"
        :name="name ?? fieldAttrs.name"
        :form="form"
        :value="value ?? ''"
        :min="min"
        :max="max"
        :step="step"
        :required="required"
        :disabled="disabled"
        @change="update(($event.target as HTMLInputElement).valueAsNumber)"
      /></div
  ></NumberFieldRoot>
</template>
```


---

# vue/components/pagination

---
title: "Pagination"
description: "A controlled page navigator with bounded page selection."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/pagination

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import { ref } from "vue";
import Pagination from "./components/ui/pagination.vue";
const page = ref(2);
</script>

<template>
  <Pagination v-model:page="page" :total-pages="8" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed } from "vue";
const props = withDefaults(
  defineProps<{
    page: number;
    totalPages: number;
    label?: string;
    disabled?: boolean;
    previousLabel?: string;
    nextLabel?: string;
    pageLabel?: (page: number) => string;
  }>(),
  {
    label: "Pagination",
    disabled: false,
    previousLabel: "Previous",
    nextLabel: "Next",
    pageLabel: (page: number) => `Page ${page}`,
  },
);
const emit = defineEmits<{
  "update:page": [page: number];
  "page-change": [page: number];
}>();
const total = computed(() =>
  Number.isFinite(props.totalPages)
    ? Math.max(1, Math.floor(props.totalPages))
    : 1,
);
const current = computed(() =>
  Number.isFinite(props.page)
    ? Math.max(1, Math.min(total.value, Math.floor(props.page)))
    : 1,
);
const pages = computed(() =>
  Array.from(
    { length: Math.min(total.value, 5) },
    (_, index) =>
      Math.max(1, Math.min(current.value - 2, total.value - 4)) + index,
  ),
);
function change(page: number) {
  if (props.disabled) return;
  emit("update:page", page);
  emit("page-change", page);
}
</script>
<template>
  <nav :aria-label="label" class="cr-pagination">
    <button
      type="button"
      class="cr-button"
      data-variant="outline"
      data-size="sm"
      :aria-label="previousLabel"
      :disabled="disabled || current === 1"
      @click="change(current - 1)"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        aria-hidden="true"
      >
        <path d="m15 18-6-6 6-6" />
      </svg></button
    ><button
      v-for="number in pages"
      :key="number"
      type="button"
      class="cr-button"
      data-size="sm"
      :data-variant="number === current ? 'primary' : 'ghost'"
      :aria-current="number === current ? 'page' : undefined"
      :aria-label="pageLabel(number)"
      :disabled="disabled"
      @click="change(number)"
    >
      {{ number }}</button
    ><button
      type="button"
      class="cr-button"
      data-variant="outline"
      data-size="sm"
      :aria-label="nextLabel"
      :disabled="disabled || current === total"
      @click="change(current + 1)"
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="1.75"
        aria-hidden="true"
      >
        <path d="m9 6 6 6-6 6" />
      </svg>
    </button>
  </nav>
</template>
```


---

# vue/components/popover

---
title: "Popover"
description: "A non-modal panel anchored to a trigger."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/popover

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Input from "./components/ui/input.vue";
import Popover from "./components/ui/popover.vue";
</script>

<template>
  <Popover trigger="Set dimensions" title="Dimensions"><Input aria-label="Width" placeholder="Width" /></Popover>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  PopoverRoot,
  PopoverTrigger,
  PopoverPortal,
  PopoverContent,
  PopoverClose,
} from "reka-ui";
import { useId } from "vue";
import { usePortalContainer } from "./utils";
import { RenderContent, focusTarget, useDisplayModel } from "./display-utils";
import type { OverlayProps } from "./display-types";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<
    OverlayProps & {
      side?: "top" | "bottom" | "left" | "right";
      align?: "start" | "center" | "end";
      triggerLabel?: string;
    }
  >(),
  {
    open: undefined,
    defaultOpen: false,
    modal: false,
    side: "bottom",
    align: "center",
    closeLabel: "Close popover",
  },
);
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
  "open-auto-focus": [event: Event];
  "close-auto-focus": [event: Event];
  "escape-key-down": [event: KeyboardEvent];
  "interact-outside": [event: Event];
}>();
const expanded = useDisplayModel(
  () => props.open,
  props.defaultOpen,
  (value) => {
    emit("update:open", value);
    emit("open-change", value);
  },
);
const container = usePortalContainer();
const titleId = useId();
</script>
<template>
  <PopoverRoot v-model:open="expanded" :modal="modal"
    ><PopoverTrigger
      v-if="trigger != null || triggerRender || $slots.trigger"
      :as-child="!!($slots.trigger || triggerRender)"
      :disabled="disabled"
      :aria-label="triggerLabel"
      class="cr-button"
      data-variant="outline"
      ><slot name="trigger"
        ><component :is="triggerRender" v-if="triggerRender"
          ><RenderContent :content="trigger" /></component
        ><RenderContent v-else :content="trigger" /></slot></PopoverTrigger
    ><PopoverPortal :to="container"
      ><PopoverContent
        v-bind="$attrs"
        :side="side"
        :align="align"
        :side-offset="8"
        :aria-labelledby="titleId"
        :class="['cr-popup cr-popover', className]"
        @open-auto-focus="
          (event) => {
            focusTarget(event, initialFocus);
            emit('open-auto-focus', event);
          }
        "
        @close-auto-focus="
          (event) => {
            focusTarget(event, finalFocus);
            emit('close-auto-focus', event);
          }
        "
        @escape-key-down="emit('escape-key-down', $event)"
        @interact-outside="emit('interact-outside', $event)"
        ><h2 :id="titleId" class="cr-popover-title">
          <slot name="title">{{ title }}</slot>
        </h2>
        <slot :close="() => (expanded = false)" /><PopoverClose
          :aria-label="closeLabel"
          class="cr-popover-close"
          ><svg
            width="16"
            height="16"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.75"
            aria-hidden="true"
          >
            <path
              d="m6 6 12 12M18 6 6 18"
            /></svg></PopoverClose></PopoverContent></PopoverPortal
  ></PopoverRoot>
</template>
```


---

# vue/components/progress

---
title: "Progress"
description: "A determinate or indeterminate progress bar with a label."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/progress

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Progress from "./components/ui/progress.vue";
</script>

<template>
  <Progress label="Upload progress" :value="65" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed } from "vue";
import { ProgressRoot, ProgressIndicator } from "reka-ui";
const props = withDefaults(
  defineProps<{
    label: string;
    value: number | null;
    max?: number;
    locale?: string;
  }>(),
  { max: 100, locale: "en-US" },
);
const maximum = computed(() =>
  Number.isFinite(props.max) && props.max > 0 ? props.max : 100,
);
const amount = computed(() =>
  props.value === null
    ? null
    : Math.max(
        0,
        Math.min(maximum.value, Number.isFinite(props.value) ? props.value : 0),
      ),
);
const percentage = computed(() =>
  amount.value === null
    ? undefined
    : new Intl.NumberFormat(props.locale, {
        style: "percent",
        maximumFractionDigits: 0,
      }).format(amount.value / maximum.value),
);
</script>
<template>
  <ProgressRoot
    :model-value="amount"
    :max="maximum"
    :aria-label="label"
    :get-value-label="() => percentage ?? ''"
    class="cr-progress"
    ><div class="cr-row">
      <span class="cr-label">{{ label }}</span
      ><span class="cr-description">{{ percentage }}</span>
    </div>
    <div class="cr-progress-track">
      <ProgressIndicator
        class="cr-progress-indicator"
        :style="{
          width: amount === null ? undefined : `${(amount / maximum) * 100}%`,
        }"
      /></div
  ></ProgressRoot>
</template>
```


---

# vue/components/radio-group

---
title: "Radio Group"
description: "One selection from a labelled set, with arrow-key navigation."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/radio-group

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import RadioGroup from "./components/ui/radio-group.vue";
</script>

<template>
  <RadioGroup label="Plan" default-value="personal" :options="[{ value: 'personal', label: 'Personal' }, { value: 'team', label: 'Team' }]" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, ref, useId } from "vue";
import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator } from "reka-ui";
import { cx, useControllable, useFieldControl, useFormReset } from "./utils";
defineOptions({ inheritAttrs: false });
const props = defineProps<{
  label: string;
  options: readonly { value: string; label: string; disabled?: boolean }[];
  value?: string;
  defaultValue?: string;
  disabled?: boolean;
  required?: boolean;
  readOnly?: boolean;
  name?: string;
  form?: string;
  id?: string;
  orientation?: "horizontal" | "vertical";
  dir?: "ltr" | "rtl";
  loop?: boolean;
  className?: string;
}>();
const model = defineModel<string>();
const emit = defineEmits<{ "value-change": [value: string] }>();
const { field, fieldAttrs } = useFieldControl(() => props.id);
const disabled = computed(() => props.disabled || field?.disabled.value);
const root = ref<HTMLDivElement>();
const id = useId();
const value = useControllable(
  model,
  () => props.value,
  () => props.defaultValue ?? "",
  (value) => emit("value-change", value),
);
function update(next: unknown) {
  if (props.readOnly || disabled.value) return;
  value.value = String(next);
  field?.notifyChange();
}
useFormReset(
  root,
  () => {
    value.value = props.defaultValue ?? "";
  },
  () => props.form,
);
</script>
<template>
  <RadioGroupRoot
    as-child
    v-bind="{ ...fieldAttrs, ...$attrs, name: undefined }"
    :model-value="value"
    :disabled="disabled"
    :required="required"
    :aria-label="label"
    :aria-readonly="readOnly || undefined"
    :orientation="orientation"
    :dir="dir"
    :loop="loop"
    @update:model-value="update"
    ><div ref="root" :class="cx('cr-radio-group', className)">
      <label
        v-for="(option, index) in options"
        :key="option.value"
        :for="`${id}-${index}`"
        class="cr-check-label"
        :data-disabled="disabled || option.disabled ? '' : undefined"
        ><RadioGroupItem
          :id="`${id}-${index}`"
          :value="option.value"
          :disabled="disabled || option.disabled"
          class="cr-radio"
          :data-checked="value === option.value ? '' : undefined"
          ><RadioGroupIndicator class="cr-radio-indicator" /></RadioGroupItem
        ><input
          class="cr-sr-only"
          aria-hidden="true"
          tabindex="-1"
          type="radio"
          :name="name ?? fieldAttrs.name"
          :form="form"
          :value="option.value"
          :checked="value === option.value"
          :disabled="disabled || option.disabled"
          :required="required"
          @change="update(option.value)"
        />{{ option.label }}</label
      >
    </div></RadioGroupRoot
  >
</template>
```


---

# vue/components/select

---
title: "Select"
description: "Accessible single or multiple selection with disabled options, controlled state and native form support."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/select

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Select from "./components/ui/select.vue";
</script>

<template>
  <Select label="Timezone" default-value="paris" :options="[{ value: 'paris', label: 'Europe / Paris' }, { value: 'new-york', label: 'America / New York' }]" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, ref, useId } from "vue";
import {
  SelectRoot,
  SelectTrigger,
  SelectValue,
  SelectIcon,
  SelectPortal,
  SelectContent,
  SelectViewport,
  SelectItem,
  SelectItemText,
  SelectItemIndicator,
} from "reka-ui";
import {
  cx,
  useControllable,
  useFieldControl,
  useFormReset,
  usePortalContainer,
} from "./utils";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<{
    label: string;
    options: readonly { value: string; label: string; disabled?: boolean }[];
    value?: string | string[] | null;
    defaultValue?: string | string[] | null;
    multiple?: boolean;
    defaultOpen?: boolean;
    placeholder?: string;
    className?: string;
    triggerProps?: Record<string, unknown>;
    disabled?: boolean;
    readOnly?: boolean;
    required?: boolean;
    name?: string;
    form?: string;
    id?: string;
    dir?: "ltr" | "rtl";
    autocomplete?: string;
  }>(),
  { placeholder: "Select an option" },
);
const model = defineModel<string | string[] | null>();
const openModel = defineModel<boolean | undefined>("open", {
  default: undefined,
});
const emit = defineEmits<{
  "value-change": [value: string | string[] | null];
  "open-change": [open: boolean];
}>();
const { field, fieldAttrs } = useFieldControl(() => props.id);
const disabled = computed(() => props.disabled || field?.disabled.value);
const value = useControllable(
  model,
  () => props.value,
  () => props.defaultValue ?? (props.multiple ? [] : null),
  (next) => emit("value-change", next),
);
const open = useControllable(
  openModel,
  () => undefined,
  () => props.defaultOpen ?? false,
  (next) => emit("open-change", next),
);
const popupOpen = computed({
  get: () => (props.readOnly ? false : open.value),
  set: (next: boolean) => {
    if (!props.readOnly) open.value = next;
  },
});
const portalContainer = usePortalContainer();
const native = ref<HTMLSelectElement>();
const emptyKey = `__cr_empty_${useId()}`;
const encode = (value: string) => (value === "" ? emptyKey : value);
const selected = computed(() =>
  Array.isArray(value.value)
    ? value.value.map(encode)
    : value.value === null
      ? undefined
      : encode(value.value),
);
const display = computed(() =>
  props.options
    .filter((option) =>
      Array.isArray(value.value)
        ? value.value.includes(option.value)
        : option.value === value.value,
    )
    .map((option) => option.label)
    .join(", "),
);
function update(next: unknown) {
  if (props.readOnly || disabled.value) return;
  value.value = Array.isArray(next)
    ? next.map((item) => (item === emptyKey ? "" : String(item)))
    : next === emptyKey
      ? ""
      : next === undefined || next === null
        ? null
        : String(next);
  field?.notifyChange();
}
function nativeChange(event: Event) {
  if (props.readOnly || disabled.value) return;
  const input = event.target as HTMLSelectElement;
  value.value = props.multiple
    ? Array.from(input.selectedOptions, (option) => option.value)
    : input.value;
  field?.notifyChange();
}
useFormReset(
  native,
  () => {
    value.value = props.defaultValue ?? (props.multiple ? [] : null);
    open.value = false;
  },
  () => props.form,
);
</script>
<template>
  <SelectRoot
    :model-value="selected"
    v-model:open="popupOpen"
    :multiple="multiple"
    :disabled="disabled"
    :required="required"
    :dir="dir"
    @update:model-value="update"
    ><SelectTrigger
      v-bind="{ ...fieldAttrs, ...$attrs, ...triggerProps, name: undefined }"
      :aria-label="label"
      :aria-readonly="readOnly || undefined"
      :class="cx('cr-select-trigger', className)"
      ><SelectValue :placeholder="placeholder" class="cr-select-value">{{
        display || placeholder
      }}</SelectValue
      ><SelectIcon
        ><svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          stroke-linecap="round"
          stroke-linejoin="round"
          aria-hidden="true"
        >
          <path d="m6 9 6 6 6-6" /></svg></SelectIcon></SelectTrigger
    ><SelectPortal :to="portalContainer"
      ><SelectContent
        class="cr-popup cr-positioner"
        position="popper"
        :side-offset="6"
        align="start"
        ><SelectViewport
          ><SelectItem
            v-for="option in options"
            :key="option.value"
            :value="encode(option.value)"
            :disabled="option.disabled"
            class="cr-menu-item"
            ><SelectItemText>{{ option.label }}</SelectItemText
            ><SelectItemIndicator
              ><svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
              >
                <path
                  d="m20 6-11 11-5-5"
                /></svg></SelectItemIndicator></SelectItem></SelectViewport></SelectContent></SelectPortal
    ><select
      ref="native"
      class="cr-sr-only"
      aria-hidden="true"
      tabindex="-1"
      :name="name ?? fieldAttrs.name"
      :form="form"
      :required="required"
      :disabled="disabled"
      :multiple="multiple"
      :autocomplete="autocomplete"
      @change="nativeChange"
    >
      <option v-if="!multiple" value="" :selected="value === null" disabled>
        {{ placeholder }}
      </option>
      <option
        v-for="option in options"
        :key="option.value"
        :value="option.value"
        :disabled="option.disabled"
        :selected="
          Array.isArray(value)
            ? value.includes(option.value)
            : value === option.value
        "
      >
        {{ option.label }}
      </option>
    </select></SelectRoot
  >
</template>
```


---

# vue/components/separator

---
title: "Separator"
description: "A visual and semantic divider."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/separator

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Separator from "./components/ui/separator.vue";
</script>

<template>
  <div>Account<Separator />Preferences</div>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { Separator } from "reka-ui";
withDefaults(
  defineProps<{
    orientation?: "horizontal" | "vertical";
    decorative?: boolean;
    className?: string;
  }>(),
  { orientation: "horizontal", decorative: false },
);
</script>
<template>
  <Separator
    :orientation="orientation"
    :decorative="decorative"
    :class="['cr-separator', className]"
  />
</template>
```


---

# vue/components/sheet

---
title: "Sheet"
description: "A side panel with focus management, keyboard dismissal and a labelled title."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/sheet

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Input from "./components/ui/input.vue";
import Sheet from "./components/ui/sheet.vue";
</script>

<template>
  <Sheet trigger="Open sheet" title="Workspace settings" description="Manage the details of your workspace."><Input aria-label="Workspace name" placeholder="Acme" /></Sheet>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  DialogRoot,
  DialogTrigger,
  DialogPortal,
  DialogOverlay,
  DialogContent,
  DialogTitle,
  DialogDescription,
  DialogClose,
} from "reka-ui";
import { useId } from "vue";
import { usePortalContainer } from "./utils";
import { RenderContent, focusTarget, useDisplayModel } from "./display-utils";
import type { OverlayProps } from "./display-types";
defineOptions({ inheritAttrs: false });
const props = withDefaults(defineProps<OverlayProps>(), {
  open: undefined,
  trigger: undefined,
  footer: undefined,
  initialFocus: undefined,
  finalFocus: undefined,
  defaultOpen: false,
  modal: true,
  closeLabel: "Close",
});
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
  "open-auto-focus": [event: Event];
  "close-auto-focus": [event: Event];
  "escape-key-down": [event: KeyboardEvent];
  "interact-outside": [event: Event];
}>();
const expanded = useDisplayModel(
  () => props.open,
  props.defaultOpen,
  (value) => {
    emit("update:open", value);
    emit("open-change", value);
  },
);
const container = usePortalContainer();
const descriptionId = useId();
</script>
<template>
  <DialogRoot v-model:open="expanded" :modal="modal"
    ><DialogTrigger
      v-if="trigger != null || triggerRender || $slots.trigger"
      :as-child="!!($slots.trigger || triggerRender)"
      :disabled="disabled"
      class="cr-button"
      data-variant="outline"
      ><slot name="trigger"
        ><component :is="triggerRender" v-if="triggerRender"
          ><RenderContent :content="trigger" /></component
        ><RenderContent v-else :content="trigger" /></slot></DialogTrigger
    ><DialogPortal :to="container"
      ><DialogOverlay class="cr-backdrop" />
      <div v-if="expanded" class="cr-modal-viewport" data-kind="sheet">
        <DialogContent
          v-bind="$attrs"
          :class="['cr-modal cr-sheet', className]"
          :aria-describedby="
            description || $slots.description ? descriptionId : undefined
          "
          @open-auto-focus="
            (event) => {
              focusTarget(event, initialFocus);
              emit('open-auto-focus', event);
            }
          "
          @close-auto-focus="
            (event) => {
              focusTarget(event, finalFocus);
              emit('close-auto-focus', event);
            }
          "
          @escape-key-down="emit('escape-key-down', $event)"
          @interact-outside="emit('interact-outside', $event)"
          ><header class="cr-modal-header">
            <DialogTitle class="cr-modal-title"
              ><slot name="title">{{ title }}</slot></DialogTitle
            ><DialogDescription
              :id="descriptionId"
              v-if="description || $slots.description"
              class="cr-description"
              ><slot name="description">{{
                description
              }}</slot></DialogDescription
            ><DialogClose
              class="cr-modal-close"
              :aria-label="closeLabel === 'Close' ? 'Close panel' : closeLabel"
              ><svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                aria-hidden="true"
              >
                <path d="m6 6 12 12M18 6 6 18" /></svg
            ></DialogClose>
          </header>
          <div class="cr-modal-content">
            <slot :close="() => (expanded = false)" />
          </div>
          <footer v-if="footer !== null" class="cr-modal-footer">
            <slot name="footer" :close="() => (expanded = false)"
              ><RenderContent
                v-if="footer !== undefined"
                :content="footer"
              /><DialogClose
                v-else
                class="cr-button"
                data-variant="secondary"
                >{{ closeLabel }}</DialogClose
              ></slot
            >
          </footer></DialogContent
        >
      </div></DialogPortal
    ></DialogRoot
  >
</template>
```


---

# vue/components/sidebar

---
title: "Sidebar"
description: "A collapsible application sidebar with active-link semantics."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/sidebar

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Sidebar from "./components/ui/sidebar.vue";
</script>

<template>
  <Sidebar brand="Acme" :items="[{ label: 'Overview', href: '#overview', active: true }, { label: 'Projects', href: '#projects' }, { label: 'Settings', href: '#settings' }]" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { useId } from "vue";
import { RenderContent, useDisplayModel } from "./display-utils";
import type { DisplayContent } from "./display-types";
const props = withDefaults(
  defineProps<{
    brand?: DisplayContent;
    items: Array<{
      label: string;
      href: string;
      icon?: DisplayContent;
      active?: boolean;
    }>;
    footer?: DisplayContent;
    label?: string;
    collapsed?: boolean;
    defaultCollapsed?: boolean;
  }>(),
  {
    label: "Workspace navigation",
    collapsed: undefined,
    defaultCollapsed: false,
  },
);
const emit = defineEmits<{
  "update:collapsed": [value: boolean];
  "collapsed-change": [value: boolean];
}>();
const isCollapsed = useDisplayModel(
  () => props.collapsed,
  props.defaultCollapsed,
  (value) => {
    emit("update:collapsed", value);
    emit("collapsed-change", value);
  },
);
const navigationId = useId();
</script>
<template>
  <aside class="cr-sidebar" :data-collapsed="isCollapsed">
    <div class="cr-sidebar-header">
      <template v-if="!isCollapsed"
        ><slot name="brand"><RenderContent :content="brand" /></slot></template
      ><button
        type="button"
        class="cr-button cr-sidebar-toggle"
        data-variant="ghost"
        data-size="sm"
        :aria-label="isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'"
        :aria-expanded="!isCollapsed"
        :aria-controls="navigationId"
        @click="isCollapsed = !isCollapsed"
      >
        <svg
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          aria-hidden="true"
        >
          <rect x="3" y="3" width="18" height="18" rx="2" />
          <path
            :d="isCollapsed ? 'M9 3v18m4-12 3 3-3 3' : 'M9 3v18m7-12-3 3 3 3'"
          />
        </svg>
      </button>
    </div>
    <nav :id="navigationId" :aria-label="label">
      <a
        v-for="item in items"
        :key="item.href"
        :href="item.href"
        :aria-label="isCollapsed ? item.label : undefined"
        :aria-current="item.active ? 'page' : undefined"
        :title="isCollapsed ? item.label : undefined"
        ><span class="cr-sidebar-icon" aria-hidden="true"
          ><slot name="icon" :item="item"
            ><RenderContent v-if="item.icon" :content="item.icon" /><svg
              v-else
              width="18"
              height="18"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
            >
              <circle
                cx="12"
                cy="12"
                r="9"
                stroke-dasharray="3 3"
              /></svg></slot></span
        ><template v-if="!isCollapsed">{{ item.label }}</template></a
      >
    </nav>
    <footer v-if="!isCollapsed && (footer || $slots.footer)">
      <slot name="footer"><RenderContent :content="footer" /></slot>
    </footer>
  </aside>
</template>
```


---

# vue/components/skeleton

---
title: "Skeleton"
description: "A reduced-motion-aware placeholder while content is loading."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/skeleton

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Skeleton from "./components/ui/skeleton.vue";
</script>

<template>
  <div style="width: 240px; display: grid; gap: 12px"><Skeleton style="height: 20px; width: 60%" /><Skeleton style="height: 80px" /></div>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
defineProps<{ className?: string }>();
</script>
<template>
  <div :class="['cr-skeleton', className]" aria-hidden="true"><slot /></div>
</template>
```


---

# vue/components/slider

---
title: "Slider"
description: "A bounded numeric value with keyboard controls and a visible output."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/slider

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Slider from "./components/ui/slider.vue";
</script>

<template>
  <Slider label="Volume" :default-value="40" :min="0" :max="100" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, ref, useId } from "vue";
import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "reka-ui";
import { cx, useControllable, useFieldControl, useFormReset } from "./utils";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<{
    label: string;
    value?: number | readonly number[];
    defaultValue?: number | readonly number[];
    thumbLabels?: readonly string[];
    locale?: string;
    format?: Intl.NumberFormatOptions;
    disabled?: boolean;
    name?: string;
    form?: string;
    min?: number;
    max?: number;
    step?: number;
    minStepsBetweenThumbs?: number;
    orientation?: "horizontal" | "vertical";
    dir?: "ltr" | "rtl";
    inverted?: boolean;
    className?: string;
  }>(),
  { locale: "en-US", min: 0, max: 100, step: 1, orientation: "horizontal" },
);
const model = defineModel<number | readonly number[]>();
const emit = defineEmits<{
  "value-change": [value: number | readonly number[]];
  "value-committed": [value: number | readonly number[]];
}>();
const { field, fieldAttrs } = useFieldControl();
const value = useControllable(
  model,
  () => props.value,
  () => props.defaultValue ?? props.min,
  (next) => emit("value-change", next),
);
const values = computed(() =>
  Array.isArray(value.value) ? [...value.value] : [value.value as number],
);
const disabled = computed(() => props.disabled || field?.disabled.value);
const formatted = computed(() =>
  values.value
    .map((value) =>
      new Intl.NumberFormat(props.locale, props.format).format(value),
    )
    .join(" – "),
);
const root = ref<HTMLDivElement>();
const labelId = useId();
function convert(next: number[]) {
  return Array.isArray(value.value) ? next : (next[0] ?? props.min);
}
function update(next: number[] | undefined) {
  value.value = convert(next ?? []);
  field?.notifyChange();
}
useFormReset(
  root,
  () => {
    value.value = props.defaultValue ?? props.min;
  },
  () => props.form,
);
</script>
<template>
  <div
    ref="root"
    :class="cx('cr-slider', className)"
    :data-orientation="orientation"
    :data-disabled="disabled ? '' : undefined"
  >
    <div class="cr-row">
      <span :id="labelId" class="cr-label">{{ label }}</span
      ><output class="cr-description">{{ formatted }}</output>
    </div>
    <SliderRoot
      v-bind="{ ...fieldAttrs, ...$attrs, name: undefined }"
      class="cr-slider-control"
      :aria-labelledby="labelId"
      :model-value="values"
      :disabled="disabled"
      :min="min"
      :max="max"
      :step="step"
      :min-steps-between-thumbs="minStepsBetweenThumbs"
      :orientation="orientation"
      :dir="dir"
      :inverted="inverted"
      @update:model-value="update"
      @value-commit="emit('value-committed', convert($event))"
      ><SliderTrack class="cr-slider-track"
        ><SliderRange
          class="cr-slider-indicator"
          :style="{
            position: 'absolute',
            height: orientation === 'horizontal' ? '100%' : undefined,
            width: orientation === 'vertical' ? '100%' : undefined,
          }" /><SliderThumb
          v-for="(_, index) in values"
          :key="index"
          class="cr-slider-thumb"
          :aria-label="
            thumbLabels?.[index] ??
            (values.length === 1
              ? label
              : `${label}, ${index + 1} of ${values.length}`)
          " /></SliderTrack></SliderRoot
    ><input
      v-for="(entry, index) in values"
      :key="index"
      type="hidden"
      :name="name ?? fieldAttrs.name"
      :form="form"
      :disabled="disabled"
      :value="entry"
    />
  </div>
</template>
```


---

# vue/components/spinner

---
title: "Spinner"
description: "An accessible loading indicator that respects reduced motion."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/spinner

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Spinner from "./components/ui/spinner.vue";
</script>

<template>
  <Spinner label="Loading your workspace" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
withDefaults(defineProps<{ label?: string }>(), { label: "Loading" });
</script>
<template>
  <span class="cr-spinner-container" role="status"
    ><span class="cr-spinner" aria-hidden="true" /><span class="cr-sr-only">{{
      label
    }}</span></span
  >
</template>
```


---

# vue/components/switch

---
title: "Switch"
description: "An immediate on/off setting with a visible label."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/switch

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Switch from "./components/ui/switch.vue";
</script>

<template>
  <Switch label="Email notifications" default-checked />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, ref, useId } from "vue";
import { SwitchRoot, SwitchThumb } from "reka-ui";
import { cx, useControllable, useFieldControl, useFormReset } from "./utils";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<{
    label?: string;
    className?: string;
    checked?: boolean;
    defaultChecked?: boolean;
    disabled?: boolean;
    required?: boolean;
    readOnly?: boolean;
    id?: string;
    name?: string;
    form?: string;
    value?: string;
  }>(),
  { checked: undefined, value: "on" },
);
const model = defineModel<boolean | undefined>({ default: undefined });
const emit = defineEmits<{
  "checked-change": [checked: boolean];
  "update:checked": [checked: boolean];
}>();
const { field, fieldAttrs } = useFieldControl(() => props.id);
const generatedId = useId();
const inputId = computed(() => props.id ?? fieldAttrs.value.id ?? generatedId);
const disabled = computed(() => props.disabled || field?.disabled.value);
const root = ref<HTMLLabelElement>();
const checked = useControllable(
  model,
  () => props.checked,
  () => props.defaultChecked ?? false,
  (value) => {
    emit("checked-change", value);
    emit("update:checked", value);
  },
);
function update(value: boolean) {
  if (!props.readOnly) {
    checked.value = value;
    field?.notifyChange();
  }
}
useFormReset(
  root,
  () => {
    checked.value = props.defaultChecked ?? false;
  },
  () => props.form,
);
</script>
<template>
  <label
    ref="root"
    :for="inputId"
    class="cr-check-label"
    :data-disabled="disabled ? '' : undefined"
    ><SwitchRoot
      v-bind="{ ...fieldAttrs, ...$attrs, name: undefined }"
      :id="inputId"
      :model-value="checked"
      :disabled="disabled"
      :required="required"
      :aria-readonly="readOnly || undefined"
      :class="cx('cr-switch', className)"
      :data-checked="checked ? '' : undefined"
      @update:model-value="update"
      ><SwitchThumb class="cr-switch-thumb" /></SwitchRoot
    ><input
      class="cr-sr-only"
      aria-hidden="true"
      tabindex="-1"
      type="checkbox"
      :name="name ?? fieldAttrs.name"
      :form="form"
      :value="value"
      :checked="checked"
      :disabled="disabled"
      :required="required"
      @change="update(($event.target as HTMLInputElement).checked)"
    /><span
      ><slot>{{ label }}</slot></span
    ></label
  >
</template>
```


---

# vue/components/table

---
title: "Table"
description: "A semantic table with a caption and responsive overflow."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/table

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Table from "./components/ui/table.vue";
</script>

<template>
  <Table caption="Team members" :columns="['Name', 'Role']" :rows="[['Alex Morgan', 'Owner'], ['Sam Taylor', 'Developer']]" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import type { DisplayContent } from "./display-types";
import { RenderContent } from "./display-utils";
withDefaults(
  defineProps<{
    caption: string;
    columns: string[];
    rows: DisplayContent[][];
    loading?: boolean;
    loadingMessage?: DisplayContent;
    emptyMessage?: DisplayContent;
    getRowKey?: (row: DisplayContent[], index: number) => string | number;
  }>(),
  {
    loading: false,
    loadingMessage: "Loading records…",
    emptyMessage: "No records yet.",
  },
);
</script>
<template>
  <div class="cr-table-scroll" role="region" :aria-label="caption" tabindex="0">
    <table class="cr-table" :aria-busy="loading || undefined">
      <caption>
        {{
          caption
        }}
      </caption>
      <thead>
        <tr>
          <th v-for="(column, index) in columns" :key="index" scope="col">
            <slot name="header" :column="column" :index="index">{{
              column
            }}</slot>
          </th>
        </tr>
      </thead>
      <tbody>
        <template v-if="!loading"
          ><tr
            v-for="(row, index) in rows"
            :key="getRowKey?.(row, index) ?? index"
          >
            <td v-for="(value, column) in row" :key="column">
              <slot
                name="cell"
                :value="value"
                :row="row"
                :row-index="index"
                :column-index="column"
                ><RenderContent :content="value"
              /></slot>
            </td></tr
        ></template>
        <tr v-if="loading || !rows.length">
          <td :colspan="Math.max(1, columns.length)">
            <slot v-if="loading" name="loading"
              ><RenderContent :content="loadingMessage" /></slot
            ><slot v-else name="empty"
              ><RenderContent :content="emptyMessage"
            /></slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
```


---

# vue/components/tabs

---
title: "Tabs"
description: "Related panels connected to an accessible tab list."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/tabs

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Tabs from "./components/ui/tabs.vue";
</script>

<template>
  <Tabs label="Account" :items="[{ value: 'profile', label: 'Profile', content: 'Your profile settings.' }, { value: 'notifications', label: 'Notifications', content: 'Choose how you stay informed.' }]" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { TabsRoot, TabsList, TabsTrigger, TabsContent } from "reka-ui";
import { RenderContent, useDisplayModel } from "./display-utils";
import type { DisplayContent } from "./display-types";
const props = withDefaults(
  defineProps<{
    label: string;
    items: Array<{
      value: string;
      label: string;
      content?: DisplayContent;
      disabled?: boolean;
    }>;
    value?: string;
    modelValue?: string;
    defaultValue?: string;
    keepMounted?: boolean;
    activateOnFocus?: boolean;
    orientation?: "horizontal" | "vertical";
  }>(),
  { keepMounted: false, activateOnFocus: false, orientation: "horizontal" },
);
const emit = defineEmits<{
  "update:modelValue": [value: string];
  "update:value": [value: string];
  "value-change": [value: string];
}>();
const selected = useDisplayModel(
  () => props.modelValue ?? props.value,
  props.defaultValue ?? props.items.find((item) => !item.disabled)?.value ?? "",
  (value) => {
    emit("update:modelValue", value);
    emit("update:value", value);
    emit("value-change", value);
  },
);
</script>
<template>
  <TabsRoot
    v-model="selected"
    :orientation="orientation"
    :activation-mode="activateOnFocus ? 'automatic' : 'manual'"
    class="cr-tabs"
    ><TabsList :aria-label="label" class="cr-tabs-list"
      ><TabsTrigger
        v-for="item in items"
        :key="item.value"
        :value="item.value"
        :disabled="item.disabled"
        class="cr-tab"
        ><slot name="label" :item="item">{{ item.label }}</slot></TabsTrigger
      ></TabsList
    ><TabsContent
      v-for="item in items"
      :key="item.value"
      :value="item.value"
      :force-mount="keepMounted || undefined"
      v-show="!keepMounted || selected === item.value"
      class="cr-tab-panel"
      ><slot :name="item.value" :item="item"
        ><slot name="content" :item="item"
          ><RenderContent :content="item.content" /></slot></slot></TabsContent
  ></TabsRoot>
</template>
```


---

# vue/components/textarea

---
title: "Textarea"
description: "A multiline input with native form semantics."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/textarea

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Textarea from "./components/ui/textarea.vue";
</script>

<template>
  <Textarea aria-label="Project description" placeholder="Tell us about your project…" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { ref } from "vue";
import { cx, useControllable, useFieldControl, useFormReset } from "./utils";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<{
    id?: string;
    name?: string;
    form?: string;
    disabled?: boolean;
    required?: boolean;
    value?: string;
    defaultValue?: string;
    rows?: number;
    className?: string;
  }>(),
  { rows: 4 },
);
const model = defineModel<string>();
const emit = defineEmits<{ "value-change": [value: string] }>();
const input = ref<HTMLTextAreaElement>();
const { fieldAttrs, field } = useFieldControl(() => props.id);
const value = useControllable(
  model,
  () => props.value,
  () => props.defaultValue ?? "",
  (next) => emit("value-change", next),
);
useFormReset(
  input,
  () => {
    value.value = props.defaultValue ?? "";
  },
  () => props.form,
);
defineExpose({
  input,
  focus: () => input.value?.focus(),
  select: () => input.value?.select(),
});
</script>
<template>
  <textarea
    ref="input"
    v-bind="{ ...fieldAttrs, ...$attrs }"
    :id="id ?? fieldAttrs.id"
    :name="name ?? fieldAttrs.name"
    :form="form"
    :required="required"
    :disabled="disabled || field?.disabled.value"
    :class="cx('cr-textarea', className)"
    :rows="rows"
    :value="value"
    @input="value = ($event.target as HTMLTextAreaElement).value"
  />
</template>
```


---

# vue/components/toast

---
title: "Toast"
description: "Accessible notifications with a provider, imperative manager and dismiss controls."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/toast

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Toast from "./components/ui/toast.vue";
</script>

<template>
  <Toast />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import ToastProvider from "./toast-provider.vue";
withDefaults(defineProps<{ title?: string; description?: string }>(), {
  title: "Changes saved",
  description: "Your preferences are up to date.",
});
</script>
<template>
  <ToastProvider v-slot="{ manager }"
    ><button
      type="button"
      class="cr-button"
      data-variant="primary"
      @click="manager.add({ title, description })"
    >
      <slot>Show notification</slot>
    </button></ToastProvider
  >
</template>
```


---

# vue/components/toggle-group

---
title: "Toggle Group"
description: "A labelled group of toggle buttons with keyboard navigation."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/toggle-group

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import ToggleGroup from "./components/ui/toggle-group.vue";
</script>

<template>
  <ToggleGroup label="Text alignment" :items="[{ value: 'left', label: 'Left' }, { value: 'center', label: 'Center' }, { value: 'right', label: 'Right' }]" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { computed, ref } from "vue";
import { ToggleGroupRoot, ToggleGroupItem } from "reka-ui";
import { cx, useControllable, useFormReset } from "./utils";
const props = defineProps<{
  label: string;
  items: readonly { value: string; label: string; disabled?: boolean }[];
  value?: string[];
  defaultValue?: string[];
  multiple?: boolean;
  disabled?: boolean;
  name?: string;
  form?: string;
  orientation?: "horizontal" | "vertical";
  dir?: "ltr" | "rtl";
  loop?: boolean;
  rovingFocus?: boolean;
  className?: string;
}>();
const model = defineModel<string[]>();
const emit = defineEmits<{ "value-change": [value: string[]] }>();
const root = ref<HTMLDivElement>();
const value = useControllable(
  model,
  () => props.value,
  () => props.defaultValue ?? [],
  (value) => emit("value-change", value),
);
const selected = computed(() =>
  props.multiple ? value.value : (value.value[0] ?? ""),
);
function update(next: unknown) {
  value.value = Array.isArray(next)
    ? next.map(String)
    : next
      ? [String(next)]
      : [];
}
useFormReset(
  root,
  () => {
    value.value = props.defaultValue ?? [];
  },
  () => props.form,
);
</script>
<template>
  <ToggleGroupRoot
    as-child
    :model-value="selected"
    :type="multiple ? 'multiple' : 'single'"
    :disabled="disabled"
    :orientation="orientation"
    :dir="dir"
    :loop="loop"
    :roving-focus="rovingFocus"
    :aria-label="label"
    @update:model-value="update"
    ><div
      ref="root"
      :class="cx('cr-toggle-group', className)"
      :data-orientation="orientation"
    >
      <ToggleGroupItem
        v-for="item in items"
        :key="item.value"
        :value="item.value"
        :disabled="item.disabled"
        class="cr-toggle"
        :data-pressed="value.includes(item.value) ? '' : undefined"
        >{{ item.label }}</ToggleGroupItem
      ><input
        v-for="item in value"
        :key="item"
        type="hidden"
        :name="name"
        :form="form"
        :value="item"
        :disabled="disabled"
      /></div
  ></ToggleGroupRoot>
</template>
```


---

# vue/components/toggle

---
title: "Toggle"
description: "A pressable on/off button with an accessible pressed state."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/toggle

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Toggle from "./components/ui/toggle.vue";
</script>

<template>
  <Toggle aria-label="Bold text">B</Toggle>
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import { Toggle } from "reka-ui";
import { cx, useControllable } from "./utils";
const props = withDefaults(
  defineProps<{
    pressed?: boolean;
    defaultPressed?: boolean;
    disabled?: boolean;
    className?: string;
    asChild?: boolean;
  }>(),
  { pressed: undefined },
);
const model = defineModel<boolean | undefined>({ default: undefined });
const emit = defineEmits<{
  "pressed-change": [pressed: boolean];
  "update:pressed": [pressed: boolean];
}>();
const pressed = useControllable(
  model,
  () => props.pressed,
  () => props.defaultPressed ?? false,
  (value) => {
    emit("pressed-change", value);
    emit("update:pressed", value);
  },
);
</script>
<template>
  <Toggle
    v-model="pressed"
    :disabled="disabled"
    :as-child="asChild"
    :class="cx('cr-toggle', className)"
    :data-pressed="pressed ? '' : undefined"
    ><slot
  /></Toggle>
</template>
```


---

# vue/components/tooltip

---
title: "Tooltip"
description: "Additional non-essential text shown on hover or keyboard focus."
---

Interactive preview: https://ui.coderocket.app/docs/vue/components/tooltip

## Usage

Choose Vue in the Studio and export your saved library, or install this item through its connected CLI/MCP. [Vue setup and Nuxt integration](/docs/vue).

```vue
<script setup lang="ts">
import Tooltip from "./components/ui/tooltip.vue";
</script>

<template>
  <Tooltip trigger="Save" content="Save your changes to this library" />
</template>

```

## Design system

This Vue component consumes the same CodeRocket tokens as the React version. Import the compiled styles and wrap your app in ThemeScope. Tailwind is optional.

## Behavior and accessibility

Vue uses native events, v-model and slots. Reka UI handles keyboard and focus behavior in complex primitives. Connect actions to your own application and review labels, contrast and mobile behavior in context. Components are experimental during early access.

## Source and props

This is the exact Vue single-file component delivered by the export. Related helpers and dependencies are included automatically.

```vue
<script setup lang="ts">
import {
  TooltipProvider,
  TooltipRoot,
  TooltipTrigger,
  TooltipPortal,
  TooltipContent,
  TooltipArrow,
} from "reka-ui";
import type { Component } from "vue";
import type { DisplayContent } from "./display-types";
import { RenderContent, useDisplayModel } from "./display-utils";
import { usePortalContainer } from "./utils";
defineOptions({ inheritAttrs: false });
const props = withDefaults(
  defineProps<{
    trigger?: DisplayContent;
    triggerRender?: Component;
    content?: DisplayContent;
    side?: "top" | "bottom" | "left" | "right";
    align?: "start" | "center" | "end";
    delay?: number;
    open?: boolean;
    defaultOpen?: boolean;
    disabled?: boolean;
    disableHoverableContent?: boolean;
  }>(),
  { side: "top", align: "center", open: undefined, defaultOpen: false },
);
const emit = defineEmits<{
  "update:open": [value: boolean];
  "open-change": [value: boolean];
}>();
const expanded = useDisplayModel(
  () => props.open,
  props.defaultOpen,
  (value) => {
    emit("update:open", value);
    emit("open-change", value);
  },
);
const container = usePortalContainer();
</script>
<template>
  <TooltipProvider
    :delay-duration="delay"
    :disable-hoverable-content="disableHoverableContent"
    ><TooltipRoot v-model:open="expanded" :disabled="disabled"
      ><TooltipTrigger
        :as-child="!!($slots.trigger || triggerRender)"
        class="cr-button"
        data-variant="outline"
        ><slot name="trigger"
          ><component :is="triggerRender" v-if="triggerRender"
            ><RenderContent :content="trigger" /></component
          ><RenderContent v-else :content="trigger" /></slot></TooltipTrigger
      ><TooltipPortal :to="container"
        ><TooltipContent
          v-bind="$attrs"
          :side="side"
          :align="align"
          :side-offset="6"
          class="cr-tooltip"
          ><slot><RenderContent :content="content" /></slot
          ><TooltipArrow /></TooltipContent></TooltipPortal></TooltipRoot
  ></TooltipProvider>
</template>
```


---

# vue/index

---
title: Vue 3
description: Build a Vue library with the same design tokens, components and AI workflow.
---

# Your library, in Vue

Choose **Vue** when creating a library. The Studio renders real Vue components; its source tab, ZIP exports, CLI and MCP return Vue single-file components.

The catalogue includes 48 components and 26 blocks. Vue uses Reka UI for accessible primitives, while React uses Base UI. Tokens, theme controls, saved versions and the AI proposal workflow are shared. APIs use Vue's `v-model`, emitted events and slots. Some framework-specific APIs differ; read the component's source and props.

## Installation

The [MIT-licensed component source](https://github.com/elreco/coderocket-ui) is available without an account. To install your own saved Vue library through the hosted registry, create a connection in the Studio's **Connect** dialog. With Node.js 24 or newer, run these commands from your application folder:

In bash or zsh, paste your connection token at the hidden prompt and press Enter:

```bash
printf "Connection token: "
read -rs CODEROCKET_TOKEN
export CODEROCKET_TOKEN
printf "\n"
npx @coderocketapp/cli@latest init YOUR_LIBRARY_ID
npx @coderocketapp/cli@latest add button dialog
```

Copy the library ID from **Connect** and keep the token in your terminal environment. The CLI serves Vue source automatically for a Vue library and prints the required runtime dependencies. Install the listed dependencies in your app. Use `npx @coderocketapp/cli@latest list` to find items and `npx @coderocketapp/cli@latest sync` to update installed source after saving Studio changes. Locally edited files are preserved for review.

You can also export a **Vue** library as a ZIP, copy its components and styles into your Vue application, and install its runtime dependencies:

```sh
npm install vue@3.5.43 reka-ui@2.10.4 @lucide/vue@1.47.0
```

Vue 3.5 applications using Vite with `@vitejs/plugin-vue` or Nuxt are supported. Tailwind is optional. Installed source and styles run locally without a CodeRocket connection.

Import `styles/components.css`, then `styles/blocks.css` when using blocks, and finally `styles/theme.css`. Wrap your app in `ThemeScope` from `components/ui/theme-scope.vue` so portalled overlays inherit your theme.

```vue
<script setup lang="ts">
import ThemeScope from './components/ui/theme-scope.vue'
import Button from './components/ui/button.vue'
import './styles/components.css'
import './styles/theme.css'
</script>

<template>
  <ThemeScope><Button>Continue</Button></ThemeScope>
</template>
```

## Nuxt

Copy the exported folders into your app, register the CSS files in `nuxt.config.ts`, and explicitly import ThemeScope and components in your pages. No client-only wrapper is required for the exported components. Use the `css` option with paths matching your Nuxt app directory, for example `~/styles/components.css` and `~/styles/theme.css`.

## Framework differences

The 48 components and 26 blocks share the same design tokens, layouts and core behavior. Vue components use `v-model`, events and named slots. They are native Vue SFCs, not wrappers around the React implementation.

Advanced Base UI-specific APIs are not interchangeable: imperative trigger handles, transition event details and drawer snap points do not have identical Vue counterparts. Vue drawers support directional dismissal from their handle. Use the props listed in each Vue source; do not copy React JSX or Base UI-specific props into Vue templates.

## AI and saved libraries

Connect the CLI or MCP to a saved Vue library. The connection exposes Vue source, dependencies and Vue-specific design rules automatically. The AI generates the same validated composition model; CodeRocket renders and exports it with the library's framework. Existing React libraries stay React.

The official MCP server uses `npx` with arguments `["-y", "@coderocketapp/mcp@latest"]`. Set `CODEROCKET_LIBRARY` and `CODEROCKET_TOKEN` in your client's environment using the connection from **Connect**. Hosted CLI and MCP access requires an account and a token scoped to the saved library. [Copy the complete setup](/docs/agents).

[Explore Vue components](/docs/vue/components) · [Explore Vue blocks](/docs/vue/blocks) · [Connect a coding agent](/docs/agents)