Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Tabs

Switch between related panels with keyboard-accessible tab controls.

CoreBasics@gaudi/design-system/core/TabsView 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 { Tabs } from '@gaudi/design-system/core/Tabs';

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

Usage

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@gaudi/design-system/core/Tabs';
<Tabs defaultValue='overview'>  <TabsList aria-label='Project'><TabsTrigger value='overview'>Overview</TabsTrigger><TabsTrigger value='activity'>Activity</TabsTrigger></TabsList>  <TabsContent value='overview'>{overview}</TabsContent>  <TabsContent value='activity'>{activity}</TabsContent></Tabs>

Examples

Badge counts

Storybook

Period switch

Storybook

Settings form tabs

Storybook

API

9 props

Accessibility

Radix associates tabs and panels. Label the tab list; use manual activation when loading panels is expensive.

SwitchSwitch renders a token-styled boolean preference control.4 examplesCardCard frames reusable content with title, subtitle, and optional children.8 examplesFieldField composes form label, description, error, and input building blocks.7 examplesPillPill renders compact category and status labels.4 examplesInputText, search, numeric and date inputs with prefix and suffix slots.11 examples