caliper uidocs
DemoSign inGet Pro

Overlays & tabs

Free

Change a setting without leaving the page. Tabs move the selection indicator and show the panel immediately.

Kind CompositionComponents 4

Atlas platform

Project settings · local preview

Ready

Project configuration

Environment and alerts apply to this local preview. Activity shows the last change; Settings opens the project editor.

Environment
Production
Project alerts
Enabled

Identity with useful actions

A named trigger and caller-owned account actions.

Keyboard-first panel switching

Vertical tabs use manual activation: move with arrows, then press Enter.

Small editable parts. Consumers own content and local state.

Changes affect this preview only.

Composition and keyboard contract

Drawer reuses Dialog’s root, trigger, title and description. Popover and DropdownMenu wrap maintained Radix primitives. Give popovers a name and menus a named trigger; items use onSelect, including keyboard activation. Tabs accept controlled or default values, orientation and activationMode. The moving indicator uses shared tokens; panels update immediately. UserMenu composes DropdownMenu and accepts your trigger, identity and actions. Native refs and className overrides remain available.

<Tabs defaultValue="overview">
  <TabsList aria-label="Project views">
    <TabsTrigger value="overview">Overview</TabsTrigger>
    <TabsTrigger value="settings">Settings</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
  <TabsContent value="settings">…</TabsContent>
</Tabs>
<Popover>
  <PopoverTrigger asChild><Button>Settings</Button></PopoverTrigger>
  <PopoverContent aria-label="Quick settings">…</PopoverContent>
</Popover>
Page appearance

Components #

Each component has its own page with a focused preview, installation, usage and API.