Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Commander

Commander provides the site command palette with host-supplied destinations for navigation, content search, and theme actions.

CoreOverlays & Menus@gaudi/design-system/core/CommanderView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import Commander from '@gaudi/design-system/core/Commander';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/command-dialog-shortcuts.json.

Usage

import { useState } from 'react';import { Button, Commander } from '@gaudi/design-system';
export function ContentSearch({ posts = [], projects = [], publications = [], tags = [], thoughts = [] }) {  const [open, setOpen] = useState(false);  return (    <>      <Button onClick={() => setOpen(true)}>Search content</Button>      <Commander        open={open}        setOpen={setOpen}        posts={posts}        projects={projects}        publications={publications}        tags={tags}        thoughts={thoughts}      />    </>  );}

Examples

Command dialog with groups and shortcuts

Storybook

Inline palette

Storybook

Search everything

Storybook

API

8 props

Accessibility

Commander is a keyboard-first overlay. Keep focus visible, support Escape close/back behavior, expose readable result labels, and make Cmd/Ctrl + K available without hiding the visible trigger.

AvatarProfile images, resilient initials, presence, verification, account menus and collaborator groups. The existing Avatar API and curated patterns share the same image and fallback primitives.10 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesPillPill renders compact category and status labels.4 examplesKbdKbd renders keyboard keys and multi-key shortcuts.2 examples