#238
Icons
Tabs with a Lucide icon, a brand-colored svg icon and a scheme-aware monochrome icon next to each label.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Icons" pattern (@codeatlasdev/ui demo #238, navigation/tabs) in my app.
Call get_demo({ ids: ["#238"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Tab bars that mix generic and third-party product marks, such as terminal or agent sessions.
Keep these library parts, with the props and tokens the demo uses:
- Tabs, TabsList, TabsTrigger, TabsContent, SchemeAsset from "@codeatlasdev/ui"
Behaviour to keep:
- `<Tabs value="shell">` with 3 triggers: `value="shell"`, `value="claude"`, `value="codex"`
- Shell uses `{#snippet icon()}<Terminal />{/snippet}`
- Claude Code and Codex set `brandIcon` so the inline `svg` keeps its own colors
- Codex wraps `<SchemeAsset>` with `{#snippet light()}` and `{#snippet dark()}` svg variants
- Wrapper is `.wrap` with `max-width: 480px`
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 - SchemeAsset
@codeatlasdev/ui
How it is built
- `<Tabs value="shell">` with 3 triggers: `value="shell"`, `value="claude"`, `value="codex"`
- Shell uses `{#snippet icon()}<Terminal />{/snippet}`
- Claude Code and Codex set `brandIcon` so the inline `svg` keeps its own colors
- Codex wraps `<SchemeAsset>` with `{#snippet light()}` and `{#snippet dark()}` svg variants
- Wrapper is `.wrap` with `max-width: 480px`
Related
Loading source.