Primitives

import { Stack } from "@app/kit/primitives";

<Stack gap="sm" children={["One","Two"]} />

{
  "Stack": {
    "gap": "sm",
    "children": [
      "One",
      "Two"
    ]
  }
}

import { Row } from "@app/kit/primitives";

<Row gap="sm" justify="between" children={["Left","Right"]} />

{
  "Row": {
    "gap": "sm",
    "justify": "between",
    "children": [
      "Left",
      "Right"
    ]
  }
}

import { Grid } from "@app/kit/primitives";

<Grid columns={2} children={["A","B","C"]} />

{
  "Grid": {
    "columns": 2,
    "children": [
      "A",
      "B",
      "C"
    ]
  }
}

import { Box } from "@app/kit/primitives";

<Box padding="md" tone="muted" children={["Inside a box"]} />

{
  "Box": {
    "padding": "md",
    "tone": "muted",
    "children": [
      "Inside a box"
    ]
  }
}

import { Center } from "@app/kit/primitives";

<Center minHeight={120} children={["Centered"]} />

{
  "Center": {
    "minHeight": 120,
    "children": [
      "Centered"
    ]
  }
}

import { Spacer } from "@app/kit/primitives";

<Spacer size="md" />

{
  "Spacer": {
    "size": "md"
  }
}

import { Split } from "@app/kit/primitives";

<Split ratio="2:1" children={["Main","Aside"]} />

{
  "Split": {
    "ratio": "2:1",
    "children": [
      "Main",
      "Aside"
    ]
  }
}

import { Card } from "@app/kit/primitives";

<Card title="Morning flow" description="Mon · 7:00" children={["Body copy"]} />

{
  "Card": {
    "title": "Morning flow",
    "description": "Mon · 7:00",
    "children": [
      "Body copy"
    ]
  }
}

import { Section } from "@app/kit/primitives";

<Section title="This week" eyebrow="Schedule" children={["…"]} />

{
  "Section": {
    "title": "This week",
    "eyebrow": "Schedule",
    "children": [
      "…"
    ]
  }
}

import { Separator } from "@app/kit/primitives";

<Separator />

{
  "Separator": {}
}

import { AspectRatio } from "@app/kit/primitives";

<AspectRatio ratio="16:9" children={["media"]} />

{
  "AspectRatio": {
    "ratio": "16:9",
    "children": [
      "media"
    ]
  }
}

import { ScrollArea } from "@app/kit/primitives";

<ScrollArea maxHeight={120} children={["Row 1","Row 2"]} />

{
  "ScrollArea": {
    "maxHeight": 120,
    "children": [
      "Row 1",
      "Row 2"
    ]
  }
}

import { Collapsible } from "@app/kit/primitives";

<Collapsible title="Details" defaultOpen={true} children={["Hidden detail"]} />

{
  "Collapsible": {
    "title": "Details",
    "defaultOpen": true,
    "children": [
      "Hidden detail"
    ]
  }
}

import { Accordion } from "@app/kit/primitives";

<Accordion
  items={[{"title":"How often?","body":"Weekly."},{"title":"Where?","body":"Studio B."}]}
/>

{
  "Accordion": {
    "items": [
      {
        "title": "How often?",
        "body": "Weekly."
      },
      {
        "title": "Where?",
        "body": "Studio B."
      }
    ]
  }
}

import { Tabs } from "@app/kit/primitives";

<Tabs labels={["Today","Week"]} children={["Today panel","Week panel"]} />

{
  "Tabs": {
    "labels": [
      "Today",
      "Week"
    ],
    "children": [
      "Today panel",
      "Week panel"
    ]
  }
}

import { Container } from "@app/kit/primitives";

<Container size="md" children={["Narrow column"]} />

{
  "Container": {
    "size": "md",
    "children": [
      "Narrow column"
    ]
  }
}

import { Resizable } from "@app/kit/primitives";

<Resizable children={["Left pane","Right pane"]} />

{
  "Resizable": {
    "children": [
      "Left pane",
      "Right pane"
    ]
  }
}

import { Heading } from "@app/kit/primitives";

<Heading text="Your plants today" level={2} />

{
  "Heading": {
    "text": "Your plants today",
    "level": 2
  }
}

import { Text } from "@app/kit/primitives";

<Text text="Water when the top inch is dry." tone="muted" />

{
  "Text": {
    "text": "Water when the top inch is dry.",
    "tone": "muted"
  }
}

import { Display } from "@app/kit/primitives";

<Display text="Grow on schedule." />

{
  "Display": {
    "text": "Grow on schedule."
  }
}

import { Lead } from "@app/kit/primitives";

<Lead text="Every class this week, at a glance." />

{
  "Lead": {
    "text": "Every class this week, at a glance."
  }
}

import { Eyebrow } from "@app/kit/primitives";

<Eyebrow text="This week" />

{
  "Eyebrow": {
    "text": "This week"
  }
}

import { Meta } from "@app/kit/primitives";

<Meta text="Updated 5 min ago" icon="Clock" />

{
  "Meta": {
    "text": "Updated 5 min ago",
    "icon": "Clock"
  }
}

import { Value } from "@app/kit/primitives";

<Value text="$1,240" size="lg" />

{
  "Value": {
    "text": "$1,240",
    "size": "lg"
  }
}

import { Code } from "@app/kit/primitives";

<Code text="INV-2041" />

{
  "Code": {
    "text": "INV-2041"
  }
}

import { Kbd } from "@app/kit/primitives";

<Kbd text="⌘K" />

{
  "Kbd": {
    "text": "⌘K"
  }
}

import { Badge } from "@app/kit/primitives";

<Badge text="Operational" tone="positive" />

{
  "Badge": {
    "text": "Operational",
    "tone": "positive"
  }
}

import { Marker } from "@app/kit/primitives";

<Marker text="Live" tone="positive" />

{
  "Marker": {
    "text": "Live",
    "tone": "positive"
  }
}

import { FieldLabel } from "@app/kit/primitives";

<FieldLabel text="Next watering" />

{
  "FieldLabel": {
    "text": "Next watering"
  }
}

import { Quote } from "@app/kit/primitives";

<Quote text="Best class schedule in town." cite="Maya, member" />

{
  "Quote": {
    "text": "Best class schedule in town.",
    "cite": "Maya, member"
  }
}

import { BulletList } from "@app/kit/primitives";

<BulletList items={["Bright, indirect light","Water weekly"]} marker="check" />

{
  "BulletList": {
    "items": [
      "Bright, indirect light",
      "Water weekly"
    ],
    "marker": "check"
  }
}

import { Message } from "@app/kit/primitives";

<Message title="Coach Dana" text="Bring a mat tomorrow." />

{
  "Message": {
    "title": "Coach Dana",
    "text": "Bring a mat tomorrow."
  }
}

import { ChatBubble } from "@app/kit/primitives";

<ChatBubble text="See you at 7!" mine={true} time="6:42" />

{
  "ChatBubble": {
    "text": "See you at 7!",
    "mine": true,
    "time": "6:42"
  }
}

import { Markdown } from "@app/kit/primitives";

<Markdown
  text="## Care notes\n\nWater **weekly**; mist in *summer*.\n\n- Bright, indirect light\n- [x] Repotted\n\n[Guide](https://example.com/monstera)"
/>

{
  "Markdown": {
    "text": "## Care notes\n\nWater **weekly**; mist in *summer*.\n\n- Bright, indirect light\n- [x] Repotted\n\n[Guide](https://example.com/monstera)"
  }
}

import { Stat } from "@app/kit/primitives";

<Stat label="Classes this week" value="42" hint="+6 vs last week" trend="up" />

{
  "Stat": {
    "label": "Classes this week",
    "value": "42",
    "hint": "+6 vs last week",
    "trend": "up"
  }
}

import { StatGroup } from "@app/kit/primitives";

<StatGroup children={["stat A","stat B"]} />

{
  "StatGroup": {
    "children": [
      "stat A",
      "stat B"
    ]
  }
}

import { MetricCard } from "@app/kit/primitives";

<MetricCard
  label="Uptime (30d)"
  value="99.98%"
  change="+0.02%"
  trend="up"
  icon="Activity"
/>

{
  "MetricCard": {
    "label": "Uptime (30d)",
    "value": "99.98%",
    "change": "+0.02%",
    "trend": "up",
    "icon": "Activity"
  }
}

import { Progress } from "@app/kit/primitives";

<Progress value={7} max={10} label="7 of 10 plants watered" />

{
  "Progress": {
    "value": 7,
    "max": 10,
    "label": "7 of 10 plants watered"
  }
}

import { ProgressRing } from "@app/kit/primitives";

<ProgressRing value={5} max={7} label="5d" caption="Watering streak" tone="positive" />

{
  "ProgressRing": {
    "value": 5,
    "max": 7,
    "label": "5d",
    "caption": "Watering streak",
    "tone": "positive"
  }
}

import { AnimatedNumber } from "@app/kit/primitives";

<AnimatedNumber value={1287} format="number" />

{
  "AnimatedNumber": {
    "value": 1287,
    "format": "number"
  }
}

import { Avatar } from "@app/kit/primitives";

<Avatar name="Dana Ruiz" size="default" />

{
  "Avatar": {
    "name": "Dana Ruiz",
    "size": "default"
  }
}

import { AvatarGroup } from "@app/kit/primitives";

<AvatarGroup names={["Ana Li","Bo Kim","Cy Ng","Di Ho"]} max={3} />

{
  "AvatarGroup": {
    "names": [
      "Ana Li",
      "Bo Kim",
      "Cy Ng",
      "Di Ho"
    ],
    "max": 3
  }
}

import { Persona } from "@app/kit/primitives";

<Persona name="Coach Dana" subtitle="Yoga · Studio B" />

{
  "Persona": {
    "name": "Coach Dana",
    "subtitle": "Yoga · Studio B"
  }
}

import { DataTable } from "@app/kit/primitives";

<DataTable
  columns={["name","status"]}
  headers={["Service","Status"]}
  rows={[{"name":"API","status":"Up"},{"name":"Web","status":"Up"}]}
/>

{
  "DataTable": {
    "columns": [
      "name",
      "status"
    ],
    "headers": [
      "Service",
      "Status"
    ],
    "rows": [
      {
        "name": "API",
        "status": "Up"
      },
      {
        "name": "Web",
        "status": "Up"
      }
    ]
  }
}

import { KeyValueList } from "@app/kit/primitives";

<KeyValueList
  items={[{"label":"Light","value":"Bright, indirect"},{"label":"Water","value":"Weekly"}]}
/>

{
  "KeyValueList": {
    "items": [
      {
        "label": "Light",
        "value": "Bright, indirect"
      },
      {
        "label": "Water",
        "value": "Weekly"
      }
    ]
  }
}

import { Timeline } from "@app/kit/primitives";

<Timeline
  items={[{"title":"Repotted","time":"Mar 2"},{"title":"Fertilised","time":"Mar 9"}]}
/>

{
  "Timeline": {
    "items": [
      {
        "title": "Repotted",
        "time": "Mar 2"
      },
      {
        "title": "Fertilised",
        "time": "Mar 9"
      }
    ]
  }
}

import { ActivityFeed } from "@app/kit/primitives";

<ActivityFeed
  title="Recent"
  entries={[{"title":"Booked Spin 7am","actor":"Maya","time":"2h ago"}]}
/>

{
  "ActivityFeed": {
    "title": "Recent",
    "entries": [
      {
        "title": "Booked Spin 7am",
        "actor": "Maya",
        "time": "2h ago"
      }
    ]
  }
}

import { MilestonePath } from "@app/kit/primitives";

<MilestonePath
  items={[{"title":"Sprout","state":"complete"},{"title":"First leaf","state":"current"},{"title":"Bloom","state":"upcoming"}]}
/>

{
  "MilestonePath": {
    "items": [
      {
        "title": "Sprout",
        "state": "complete"
      },
      {
        "title": "First leaf",
        "state": "current"
      },
      {
        "title": "Bloom",
        "state": "upcoming"
      }
    ]
  }
}

import { Steps } from "@app/kit/primitives";

<Steps labels={["Pick class","Confirm","Done"]} current={2} />

{
  "Steps": {
    "labels": [
      "Pick class",
      "Confirm",
      "Done"
    ],
    "current": 2
  }
}

import { Rating } from "@app/kit/primitives";

<Rating value={4.5} max={5} />

{
  "Rating": {
    "value": 4.5,
    "max": 5
  }
}

import { PriceTag } from "@app/kit/primitives";

<PriceTag amount={24} compareAt={30} />

{
  "PriceTag": {
    "amount": 24,
    "compareAt": 30
  }
}

import { ListItem } from "@app/kit/primitives";

<ListItem
  title="Fiddle-leaf fig"
  description="Living room"
  meta="in 2d"
  icon="Sparkles"
/>

{
  "ListItem": {
    "title": "Fiddle-leaf fig",
    "description": "Living room",
    "meta": "in 2d",
    "icon": "Sparkles"
  }
}

import { ItemList } from "@app/kit/primitives";

<ItemList children={["row 1","row 2"]} />

{
  "ItemList": {
    "children": [
      "row 1",
      "row 2"
    ]
  }
}

import { StructuredList } from "@app/kit/primitives";

<StructuredList
  title="Care"
  items={[{"title":"Light","value":"Indirect"},{"title":"Humidity","value":"60%"}]}
/>

{
  "StructuredList": {
    "title": "Care",
    "items": [
      {
        "title": "Light",
        "value": "Indirect"
      },
      {
        "title": "Humidity",
        "value": "60%"
      }
    ]
  }
}

import { Attachment } from "@app/kit/primitives";

<Attachment name="invoice-0412.pdf" type="PDF" meta="120 KB" />

{
  "Attachment": {
    "name": "invoice-0412.pdf",
    "type": "PDF",
    "meta": "120 KB"
  }
}

import { EmptyState } from "@app/kit/primitives";

<EmptyState title="No classes today" description="The studio is resting." />

{
  "EmptyState": {
    "title": "No classes today",
    "description": "The studio is resting."
  }
}

import { Skeleton } from "@app/kit/primitives";

<Skeleton lines={2} />

{
  "Skeleton": {
    "lines": 2
  }
}

import { Spinner } from "@app/kit/primitives";

<Spinner label="Loading" />

{
  "Spinner": {
    "label": "Loading"
  }
}

import { QrCode } from "@app/kit/primitives";

<QrCode value="TICKET-8812" size={96} />

{
  "QrCode": {
    "value": "TICKET-8812",
    "size": 96
  }
}

import { IconBadge } from "@app/kit/primitives";

<IconBadge icon="Dumbbell" tone="accent" />

{
  "IconBadge": {
    "icon": "Dumbbell",
    "tone": "accent"
  }
}

import { AreaChart } from "@app/kit/primitives";

<AreaChart
  caption="Bookings by day"
  data={[{"label":"Mon","value":12},{"label":"Tue","value":18},{"label":"Wed","value":9}]}
/>

{
  "AreaChart": {
    "caption": "Bookings by day",
    "data": [
      {
        "label": "Mon",
        "value": 12
      },
      {
        "label": "Tue",
        "value": 18
      },
      {
        "label": "Wed",
        "value": 9
      }
    ]
  }
}

import { BarChart } from "@app/kit/primitives";

<BarChart
  caption="Bookings by day"
  data={[{"label":"Mon","value":12},{"label":"Tue","value":18},{"label":"Wed","value":9}]}
/>

{
  "BarChart": {
    "caption": "Bookings by day",
    "data": [
      {
        "label": "Mon",
        "value": 12
      },
      {
        "label": "Tue",
        "value": 18
      },
      {
        "label": "Wed",
        "value": 9
      }
    ]
  }
}

import { LineChart } from "@app/kit/primitives";

<LineChart
  caption="Bookings by day"
  data={[{"label":"Mon","value":12},{"label":"Tue","value":18},{"label":"Wed","value":9}]}
/>

{
  "LineChart": {
    "caption": "Bookings by day",
    "data": [
      {
        "label": "Mon",
        "value": 12
      },
      {
        "label": "Tue",
        "value": 18
      },
      {
        "label": "Wed",
        "value": 9
      }
    ]
  }
}

import { PieChart } from "@app/kit/primitives";

<PieChart
  caption="Plants by room"
  data={[{"label":"Kitchen","value":3},{"label":"Bedroom","value":5}]}
/>

{
  "PieChart": {
    "caption": "Plants by room",
    "data": [
      {
        "label": "Kitchen",
        "value": 3
      },
      {
        "label": "Bedroom",
        "value": 5
      }
    ]
  }
}

import { RadarChart } from "@app/kit/primitives";

<RadarChart
  caption="Fitness profile"
  data={[{"label":"Cardio","value":7},{"label":"Strength","value":5},{"label":"Mobility","value":8}]}
/>

{
  "RadarChart": {
    "caption": "Fitness profile",
    "data": [
      {
        "label": "Cardio",
        "value": 7
      },
      {
        "label": "Strength",
        "value": 5
      },
      {
        "label": "Mobility",
        "value": 8
      }
    ]
  }
}

import { RadialChart } from "@app/kit/primitives";

<RadialChart
  caption="Weekly goals"
  max={100}
  data={[{"label":"Water","value":80},{"label":"Feed","value":40}]}
/>

{
  "RadialChart": {
    "caption": "Weekly goals",
    "max": 100,
    "data": [
      {
        "label": "Water",
        "value": 80
      },
      {
        "label": "Feed",
        "value": 40
      }
    ]
  }
}

import { CalendarHeatmap } from "@app/kit/primitives";

<CalendarHeatmap
  weeks={8}
  data={[{"date":"2026-09-01","value":2},{"date":"2026-09-02","value":5}]}
/>

{
  "CalendarHeatmap": {
    "weeks": 8,
    "data": [
      {
        "date": "2026-09-01",
        "value": 2
      },
      {
        "date": "2026-09-02",
        "value": 5
      }
    ]
  }
}

import { ActivityHeatmap } from "@app/kit/primitives";

<ActivityHeatmap
  total="128"
  caption="check-ins this season"
  weeks={8}
  data={[{"date":"2026-09-01","value":3}]}
/>

{
  "ActivityHeatmap": {
    "total": "128",
    "caption": "check-ins this season",
    "weeks": 8,
    "data": [
      {
        "date": "2026-09-01",
        "value": 3
      }
    ]
  }
}

import { Sparkline } from "@app/kit/primitives";

<Sparkline
  data={[{"label":"1","value":3},{"label":"2","value":6},{"label":"3","value":4}]}
/>

{
  "Sparkline": {
    "data": [
      {
        "label": "1",
        "value": 3
      },
      {
        "label": "2",
        "value": 6
      },
      {
        "label": "3",
        "value": 4
      }
    ]
  }
}

import { BarStrip } from "@app/kit/primitives";

<BarStrip
  caption="API uptime"
  summary="99.9% uptime"
  goodAbove={99.9}
  warnAbove={99}
  data={[{"label":"Sep 1","value":100},{"label":"Sep 2","value":99.95},{"label":"Sep 3","value":98.2},{"label":"Sep 4","value":"degraded"},{"label":"Sep 5","value":"up"}]}
/>

{
  "BarStrip": {
    "caption": "API uptime",
    "summary": "99.9% uptime",
    "goodAbove": 99.9,
    "warnAbove": 99,
    "data": [
      {
        "label": "Sep 1",
        "value": 100
      },
      {
        "label": "Sep 2",
        "value": 99.95
      },
      {
        "label": "Sep 3",
        "value": 98.2
      },
      {
        "label": "Sep 4",
        "value": "degraded"
      },
      {
        "label": "Sep 5",
        "value": "up"
      }
    ]
  }
}

import { BarList } from "@app/kit/primitives";

<BarList data={[{"label":"Spin","value":32},{"label":"Yoga","value":21}]} />

{
  "BarList": {
    "data": [
      {
        "label": "Spin",
        "value": 32
      },
      {
        "label": "Yoga",
        "value": 21
      }
    ]
  }
}

import { Alert } from "@app/kit/primitives";

<Alert
  title="Degraded performance"
  description="API latency is elevated."
  tone="warning"
/>

{
  "Alert": {
    "title": "Degraded performance",
    "description": "API latency is elevated.",
    "tone": "warning"
  }
}

import { Banner } from "@app/kit/primitives";

<Banner
  title="Holiday hours"
  description="The studio closes at 4pm Friday."
  tone="info"
/>

{
  "Banner": {
    "title": "Holiday hours",
    "description": "The studio closes at 4pm Friday.",
    "tone": "info"
  }
}

import { Tooltip } from "@app/kit/primitives";

<Tooltip text="Last checked 2 min ago" children={["hover me"]} />

{
  "Tooltip": {
    "text": "Last checked 2 min ago",
    "children": [
      "hover me"
    ]
  }
}

import { HoverCard } from "@app/kit/primitives";

<HoverCard title="Studio B" text="Heated floor, 20 mats." children={["Studio B"]} />

{
  "HoverCard": {
    "title": "Studio B",
    "text": "Heated floor, 20 mats.",
    "children": [
      "Studio B"
    ]
  }
}

import { Popover } from "@app/kit/primitives";

<Popover trigger="Details" children={["More detail"]} />

{
  "Popover": {
    "trigger": "Details",
    "children": [
      "More detail"
    ]
  }
}

import { Dialog } from "@app/kit/primitives";

<Dialog
  trigger="View policy"
  title="Cancellation policy"
  children={["Cancel up to 2h before class."]}
/>

{
  "Dialog": {
    "trigger": "View policy",
    "title": "Cancellation policy",
    "children": [
      "Cancel up to 2h before class."
    ]
  }
}

import { Sheet } from "@app/kit/primitives";

<Sheet trigger="Filters" title="Filters" children={["…"]} />

{
  "Sheet": {
    "trigger": "Filters",
    "title": "Filters",
    "children": [
      "…"
    ]
  }
}

import { Drawer } from "@app/kit/primitives";

<Drawer trigger="Open" title="Care guide" children={["Water weekly."]} />

{
  "Drawer": {
    "trigger": "Open",
    "title": "Care guide",
    "children": [
      "Water weekly."
    ]
  }
}

import { Button } from "@app/kit/primitives";

<Button label="Book this class" variant="default" icon="Calendar" />

{
  "Button": {
    "label": "Book this class",
    "variant": "default",
    "icon": "Calendar"
  }
}

import { IconButton } from "@app/kit/primitives";

<IconButton icon="Settings" label="Settings" />

{
  "IconButton": {
    "icon": "Settings",
    "label": "Settings"
  }
}

import { HeroButton } from "@app/kit/primitives";

<HeroButton label="Start free" showArrow={true} />

{
  "HeroButton": {
    "label": "Start free",
    "showArrow": true
  }
}

import { TextLink } from "@app/kit/primitives";

<TextLink label="See all plants" to="/" />

{
  "TextLink": {
    "label": "See all plants",
    "to": "/"
  }
}

import { Breadcrumb } from "@app/kit/primitives";

<Breadcrumb items={[{"label":"Plants","to":"/"},{"label":"Monstera"}]} />

{
  "Breadcrumb": {
    "items": [
      {
        "label": "Plants",
        "to": "/"
      },
      {
        "label": "Monstera"
      }
    ]
  }
}

import { ButtonGroup } from "@app/kit/primitives";

<ButtonGroup items={[{"label":"Day","to":"/"},{"label":"Week","to":"/"}]} active="Day" />

{
  "ButtonGroup": {
    "items": [
      {
        "label": "Day",
        "to": "/"
      },
      {
        "label": "Week",
        "to": "/"
      }
    ],
    "active": "Day"
  }
}

import { DropdownMenu } from "@app/kit/primitives";

<DropdownMenu label="More" items={[{"label":"History","to":"/"}]} />

{
  "DropdownMenu": {
    "label": "More",
    "items": [
      {
        "label": "History",
        "to": "/"
      }
    ]
  }
}

import { Dock } from "@app/kit/primitives";

<Dock
  items={[{"label":"Home","icon":"Home","to":"/"},{"label":"Plants","icon":"Sparkles","to":"/"}]}
/>

{
  "Dock": {
    "items": [
      {
        "label": "Home",
        "icon": "Home",
        "to": "/"
      },
      {
        "label": "Plants",
        "icon": "Sparkles",
        "to": "/"
      }
    ]
  }
}

import { Pagination } from "@app/kit/primitives";

<Pagination page={2} totalPages={5} />

import { MapView } from "@app/kit/primitives";

<MapView
  caption="Our three shops"
  markers={[{"lat":52.5208,"lng":13.4095,"label":"Mitte"},{"lat":52.4996,"lng":13.418,"label":"Kreuzberg"},{"lat":52.539,"lng":13.424,"label":"Prenzlauer Berg"}]}
/>

{
  "MapView": {
    "caption": "Our three shops",
    "markers": [
      {
        "lat": 52.5208,
        "lng": 13.4095,
        "label": "Mitte"
      },
      {
        "lat": 52.4996,
        "lng": 13.418,
        "label": "Kreuzberg"
      },
      {
        "lat": 52.539,
        "lng": 13.424,
        "label": "Prenzlauer Berg"
      }
    ]
  }
}

import { Embed } from "@app/kit/primitives";

<Embed url="https://www.youtube.com/watch?v=dQw4w9WgXcQ" title="Studio tour" />

{
  "Embed": {
    "url": "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
    "title": "Studio tour"
  }
}

import { Image } from "@app/kit/primitives";

<Image alt="Monstera deliciosa" ratio="4:3" />

{
  "Image": {
    "alt": "Monstera deliciosa",
    "ratio": "4:3"
  }
}

import { Icon } from "@app/kit/primitives";

<Icon name="Sparkles" size="lg" tone="accent" />

{
  "Icon": {
    "name": "Sparkles",
    "size": "lg",
    "tone": "accent"
  }
}

import { IconDisk } from "@app/kit/primitives";

<IconDisk icon="Heart" tone="pink" />

{
  "IconDisk": {
    "icon": "Heart",
    "tone": "pink"
  }
}

import { Carousel } from "@app/kit/primitives";

<Carousel children={["Slide 1","Slide 2","Slide 3"]} />

{
  "Carousel": {
    "children": [
      "Slide 1",
      "Slide 2",
      "Slide 3"
    ]
  }
}

import { ImageMask } from "@app/kit/primitives";

<ImageMask src="" alt="Studio" shape="clover-soft" />

{
  "ImageMask": {
    "src": "",
    "alt": "Studio",
    "shape": "clover-soft"
  }
}

import { BeforeAfter } from "@app/kit/primitives";

<BeforeAfter before="" after="" beforeLabel="Before" afterLabel="After" />

{
  "BeforeAfter": {
    "before": "",
    "after": "",
    "beforeLabel": "Before",
    "afterLabel": "After"
  }
}

import { LogoStrip } from "@app/kit/primitives";

<LogoStrip names={["Acme","Globex","Initech"]} />

{
  "LogoStrip": {
    "names": [
      "Acme",
      "Globex",
      "Initech"
    ]
  }
}

import { VideoPlayer } from "@app/kit/primitives";

<VideoPlayer src="data:video/mp4;base64," poster="" />

{
  "VideoPlayer": {
    "src": "data:video/mp4;base64,",
    "poster": ""
  }
}

import { SeedArt } from "@app/kit/primitives";

<SeedArt seed="monstera" label="Monstera" />

{
  "SeedArt": {
    "seed": "monstera",
    "label": "Monstera"
  }
}

import { ShapeMark } from "@app/kit/primitives";

<ShapeMark shape="daisy-12" size={48} />

{
  "ShapeMark": {
    "shape": "daisy-12",
    "size": 48
  }
}

import { TextInput } from "@app/kit/primitives";

<TextInput label="Name" value="Monstera" />

import { TextArea } from "@app/kit/primitives";

<TextArea label="Notes" value="Likes humidity" />

import { SearchInput } from "@app/kit/primitives";

<SearchInput placeholder="Search plants" />

import { PasswordInput } from "@app/kit/primitives";

<PasswordInput label="Password" strength={true} />

import { NumberInput } from "@app/kit/primitives";

<NumberInput label="Reps" value={12} min={0} max={50} />

import { QuantityStepper } from "@app/kit/primitives";

<QuantityStepper value={2} min={1} max={9} />

import { Checkbox } from "@app/kit/primitives";

<Checkbox label="Watered" checked={true} />

import { Switch } from "@app/kit/primitives";

<Switch label="Reminders" checked={true} />

import { Slider } from "@app/kit/primitives";

<Slider label="Intensity" value={40} min={0} max={100} />

import { RadioGroup } from "@app/kit/primitives";

<RadioGroup label="Level" options={["Easy","Medium","Hard"]} value="Medium" />

import { Select } from "@app/kit/primitives";

<Select label="Room" options={["Kitchen","Bedroom"]} value="Kitchen" />

import { NativeSelect } from "@app/kit/primitives";

<NativeSelect label="Month" options={["Jan","Feb"]} value="Jan" />

import { Combobox } from "@app/kit/primitives";

<Combobox options={["Aloe","Basil","Cactus"]} placeholder="Pick a plant" />

import { MultiSelect } from "@app/kit/primitives";

<MultiSelect label="Days" options={["Mon","Wed","Fri"]} value={["Mon"]} />

import { TagsInput } from "@app/kit/primitives";

<TagsInput value={["indoor","low-light"]} />

import { Toggle } from "@app/kit/primitives";

<Toggle label="Favourite" pressed={true} icon="Star" />

import { ToggleGroup } from "@app/kit/primitives";

<ToggleGroup options={["Day","Week","Month"]} value="Week" />

import { OptionWheel } from "@app/kit/primitives";

<OptionWheel options={["S","M","L"]} index={1} />

import { DatePicker } from "@app/kit/primitives";

<DatePicker value="2026-10-01" />

import { Calendar } from "@app/kit/primitives";

<Calendar value="2026-10-01" />

{
  "Calendar": {
    "value": "2026-10-01"
  }
}

import { OtpInput } from "@app/kit/primitives";

<OtpInput length={6} />

import { ColorPicker } from "@app/kit/primitives";

<ColorPicker value="#3b82f6" />

import { FileDrop } from "@app/kit/primitives";

<FileDrop label="Drop a photo" accept="image/*" />

import { Field } from "@app/kit/primitives";

<Field label="Nickname" description="Shown on the leaderboard" children={["input"]} />

import { RichTextEditor } from "@app/kit/primitives";

<RichTextEditor label="Description" value="**Bright** light, water *weekly*." />

import { TextReveal } from "@app/kit/primitives";

<TextReveal text="Every class, one glance." as="h2" />

{
  "TextReveal": {
    "text": "Every class, one glance.",
    "as": "h2"
  }
}

import { Marquee } from "@app/kit/primitives";

<Marquee label="News" children={["Open late Thursday","New spin bikes"]} />

{
  "Marquee": {
    "label": "News",
    "children": [
      "Open late Thursday",
      "New spin bikes"
    ]
  }
}

import { FadeIn } from "@app/kit/primitives";

<FadeIn direction="up" children={["Hello"]} />

{
  "FadeIn": {
    "direction": "up",
    "children": [
      "Hello"
    ]
  }
}

import { Typewriter } from "@app/kit/primitives";

<Typewriter words={["yoga","spin","pilates"]} />

{
  "Typewriter": {
    "words": [
      "yoga",
      "spin",
      "pilates"
    ]
  }
}

import { GradientHeading } from "@app/kit/primitives";

<GradientHeading text="Grow something" preset="primary" />

{
  "GradientHeading": {
    "text": "Grow something",
    "preset": "primary"
  }
}

import { WordRelay } from "@app/kit/primitives";

<WordRelay words={["Plan","Track","Grow"]} />

{
  "WordRelay": {
    "words": [
      "Plan",
      "Track",
      "Grow"
    ]
  }
}

import { WarpText } from "@app/kit/primitives";

<WarpText text="Warp" />

{
  "WarpText": {
    "text": "Warp"
  }
}

import { ZoomWords } from "@app/kit/primitives";

<ZoomWords text="Big bold words" />

{
  "ZoomWords": {
    "text": "Big bold words"
  }
}

import { WordStream } from "@app/kit/primitives";

<WordStream text="Stream of words" />

{
  "WordStream": {
    "text": "Stream of words"
  }
}

import { FallingText } from "@app/kit/primitives";

<FallingText text="Gravity" />

{
  "FallingText": {
    "text": "Gravity"
  }
}

import { ParticleText } from "@app/kit/primitives";

<ParticleText text="Particles" />

{
  "ParticleText": {
    "text": "Particles"
  }
}

import { TextRibbon } from "@app/kit/primitives";

<TextRibbon text="Along the ribbon" />

{
  "TextRibbon": {
    "text": "Along the ribbon"
  }
}

import { TypographyVortex } from "@app/kit/primitives";

<TypographyVortex text="Vortex" />

{
  "TypographyVortex": {
    "text": "Vortex"
  }
}

import { VariableProximity } from "@app/kit/primitives";

<VariableProximity text="Hover me" />

{
  "VariableProximity": {
    "text": "Hover me"
  }
}

import { ScrollReveal } from "@app/kit/primitives";

<ScrollReveal text="Scroll to read" />

{
  "ScrollReveal": {
    "text": "Scroll to read"
  }
}

import { CaretSwap } from "@app/kit/primitives";

<CaretSwap from="Chaos" to="Calm" />

{
  "CaretSwap": {
    "from": "Chaos",
    "to": "Calm"
  }
}

import { WritingCaret } from "@app/kit/primitives";

<WritingCaret text="Start typing" />

{
  "WritingCaret": {
    "text": "Start typing"
  }
}

import { ScrollExpand } from "@app/kit/primitives";

<ScrollExpand children={["Expanding"]} />

{
  "ScrollExpand": {
    "children": [
      "Expanding"
    ]
  }
}

import { FloatLayer } from "@app/kit/primitives";

<FloatLayer children={["Floating"]} />

{
  "FloatLayer": {
    "children": [
      "Floating"
    ]
  }
}

import { Parallax } from "@app/kit/primitives";

<Parallax children={["Parallax"]} />

{
  "Parallax": {
    "children": [
      "Parallax"
    ]
  }
}

import { ImageSwap } from "@app/kit/primitives";

<ImageSwap first="" second="" alt="Before and after" effect="wave" />

{
  "ImageSwap": {
    "first": "",
    "second": "",
    "alt": "Before and after",
    "effect": "wave"
  }
}

import { DotsBackground } from "@app/kit/primitives";

<DotsBackground height={160} children={["Headline on decor"]} />

{
  "DotsBackground": {
    "height": 160,
    "children": [
      "Headline on decor"
    ]
  }
}

import { GridBackground } from "@app/kit/primitives";

<GridBackground height={160} children={["Headline on decor"]} />

{
  "GridBackground": {
    "height": 160,
    "children": [
      "Headline on decor"
    ]
  }
}

import { PatternBackground } from "@app/kit/primitives";

<PatternBackground height={160} children={["Headline on decor"]} />

{
  "PatternBackground": {
    "height": 160,
    "children": [
      "Headline on decor"
    ]
  }
}

import { ContoursBackground } from "@app/kit/primitives";

<ContoursBackground height={160} children={["Headline on decor"]} />

{
  "ContoursBackground": {
    "height": 160,
    "children": [
      "Headline on decor"
    ]
  }
}

import { FoldsBackground } from "@app/kit/primitives";

<FoldsBackground height={160} children={["Headline on decor"]} />

{
  "FoldsBackground": {
    "height": 160,
    "children": [
      "Headline on decor"
    ]
  }
}

import { PebblesBackground } from "@app/kit/primitives";

<PebblesBackground height={160} children={["Headline on decor"]} />

{
  "PebblesBackground": {
    "height": 160,
    "children": [
      "Headline on decor"
    ]
  }
}

import { SproutsBackground } from "@app/kit/primitives";

<SproutsBackground height={160} children={["Headline on decor"]} />

{
  "SproutsBackground": {
    "height": 160,
    "children": [
      "Headline on decor"
    ]
  }
}

import { SunwashBackground } from "@app/kit/primitives";

<SunwashBackground height={160} children={["Headline on decor"]} />

{
  "SunwashBackground": {
    "height": 160,
    "children": [
      "Headline on decor"
    ]
  }
}

import { WeaveBackground } from "@app/kit/primitives";

<WeaveBackground height={160} children={["Headline on decor"]} />

{
  "WeaveBackground": {
    "height": 160,
    "children": [
      "Headline on decor"
    ]
  }
}

import { AmbientBackground } from "@app/kit/primitives";

<AmbientBackground height={160} children={["Headline on decor"]} />

{
  "AmbientBackground": {
    "height": 160,
    "children": [
      "Headline on decor"
    ]
  }
}