Skip to main content
Urbicon UI

Specimen book — Svelte 5 · Tailwind 4 · zero dependencies

Blocks

75

The complete set as living specimens. Every cell renders the real component and links to its page — props, variants, playground.

Form

16 components · hold a value · modify tier

FileUpload
Drop files to upload
PDF, PNG — up to 10 MB
Input
Select
DatePicker
DateRangePicker
Combobox
CurrencyInput
NumberInput
TimeInput
Stand-up
Slider
Grid density 64%
Textarea
FormField
Stored locally, never synced.
RadioGroup
Plan
PinInput
Verification code
Checkbox
Toggle

Actions

8 components · dispatch actions · commit tier

Button
CommandPalette
Search commands… ⌘K
New file ⌘N
Toggle theme ⌘T
Open settings ⌘,
Menu
Toolbar
ButtonGroup
CopyButton
bun add @urbicon-ui/blocks
ThemeSwitcher
LocaleSwitcher

Overlay

5 components · top layer · focus managed

ConfirmDialog

Delete project?

This can't be undone.

Cancel Delete
Guide
Billing Rooms theme
Drawer
Dialog
Popover

Feedback

7 components · status & ambient · fixed geometry

EmptyState

No entries yet

Create the first entry to get started.

Alert
Toast
Progress
80%
Skeleton
Loading…
Loading…
Loading…
Badge
Online Syncing Offline
Spinner

Layout

8 components · architectural surfaces · contain tier

Card
AL

Ada Lovelace

Design Engineer

Svelte TypeScript Tailwind
Accordion
OKLCH semantic tokens — dark mode included.
Keyboard navigation and ARIA built in.
Collapsible

Region, retention and export settings live here.

SidebarLayout
SplitPane
Scroller

Foundation

OKLCH ramps

Semantic

light-dark()

Interaction

hover & focus

Motion

mint presets

Elevation

shadow scale

Z-index

layer tokens

Sidebar
Separator
A
B
C

Navigation

6 components · where you are · roving focus

Tab

The default tab — line variant, token-driven, keyboard-navigable.

Stepper
  1. Account Create your login
  2. 2
    Workspace Name the studio
  3. 3
    Invite Bring the team
Breadcrumb
SegmentGroup
Pagination
JourneyTimeline

Display

15 components · data, time & identity

BarChart
Revenue — Q1: 38Costs — Q1: 22Revenue — Q2: 52Costs — Q2: 28Revenue — Q3: 44Costs — Q3: 25Revenue — Q4: 61Costs — Q4: 31
  • Revenue
  • Costs
Bar chart: 4 categories, 2 series
CategoryRevenueCosts
Q13822
Q25228
Q34425
Q46131
AreaChart
  • New
  • Returning
Area chart: 6 points, 2 series, stacked
CategoryNewReturning
Jan128
Feb169
Mar1412
Apr2113
May1916
Jun2618
Calendar
July 2026
Today
MonTueWedThuFriSatSun
Studio
Thu, July 9
No events
LineChart
Series 1 — Mon: 42Series 1 — Tue: 38Series 1 — Wed: 51Series 1 — Thu: 46Series 1 — Fri: 58
Line chart: 5 points
CategorySeries 1
Mon42
Tue38
Wed51
Thu46
Fri58
DonutChart
Direct: 45 (45%)Search: 30 (30%)Referral: 25 (25%)100
Donut chart: 3 segments, total 100
SegmentValueShare
Direct4545%
Search3030%
Referral2525%
Sankey
SearchDirectSite
Sankey diagram: 3 nodes, 2 links — Search → Site: 64; Direct → Site: 36
SourceTargetValue
SearchSite64
DirectSite36
Sparkline
CompositionBar
Total 774
Composition: 774 (3 shares) — Documents 53.2 %, Media 34.1 %, Other 12.7 %
ShareValuePercent
Documents41253.2 %
Media26434.1 %
Other9812.7 %
ChartFrame
Planner
Avatar
AL
AK
ST
+5
GH
GH
GH
AvatarGroup
NP
GC
LP
+2
Tooltip
Copy to clipboard
Kbd
Palette ⌘K Send ⇧+⏎
QRCode

AI

10 components · streams & agent surfaces · untrusted by default

A2UIView
Chat
Assistant

How do I theme the buttons?

Copy

Register a preset on the provider and reference it by name.

Copy
ChatMessageList

How do I theme the buttons?

Copy

Register a preset on the provider and reference it by name.

Copy
ChatMessage

You can override a single slot with slotClasses — no full rebuild.

Copy
StreamingMarkdown
Theming

Tokens switch light and dark automatically:

  • bg-surface-base

  • text-text-primary

ToolCallCard
Input 
{
  "city": "Berlin"
}
Output 
{
  "temperature": 21
}
ReasoningDisclosure

A single DatePicker binds one date — the range preset keeps one popover for both bounds.

PromptInput
CodeBlock
ts 
const theme = 'oklch';
CitationChip
tokens

Zero external dependencies. Every component supports unstyled, slotClasses, and mint micro-interactions. AI-native with the urbicon CLI and per-component llms.txt.