#164
Default
An uncontrolled tab set of Overview, Props and Examples, each with a short paragraph of documentation text.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Default" pattern (@codeatlasdev/ui demo #164, navigation/tabs) in my app.
Call get_demo({ ids: ["#164"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Splitting a detail view into a few peer sections of content without managing state.
Keep these library parts, with the props and tokens the demo uses:
- Tabs, TabsList, TabsTrigger, TabsContent from "@codeatlasdev/ui"
Behaviour to keep:
- `<Tabs value="overview">` sets the initial tab without binding
- `<TabsList>` holds 3 `TabsTrigger` items: `value="overview"`, `value="props"`, `value="examples"`
- Each value has a `TabsContent` with a `<div class="panel">` and one paragraph
- Wrapper is `.wrap` with `max-width: 560px`
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- Tabs
@codeatlasdev/ui - TabsList
@codeatlasdev/ui - TabsTrigger
@codeatlasdev/ui - TabsContent
@codeatlasdev/ui
How it is built
- `<Tabs value="overview">` sets the initial tab without binding
- `<TabsList>` holds 3 `TabsTrigger` items: `value="overview"`, `value="props"`, `value="examples"`
- Each value has a `TabsContent` with a `<div class="panel">` and one paragraph
- Wrapper is `.wrap` with `max-width: 560px`
Related
Loading source.