{
"$schema": "https://ui.shadcn.com/schema/registry.json",
"name": "tro",
"homepage": "https://ui.tro.de",
"items": [
{
"name": "base",
"title": "TRO Design System",
"description": "Complete TRO setup for a new project: monochrome Charcoal/Off-White theme, Poppins (ExtraLight/Light/Medium), 1px outlines, pill buttons, 32px card radius, Phosphor icons, the @tro registry namespace and all TRO primitives. Use with `shadcn init`.",
"dependencies": [
"cn",
"tw-animate-css",
"@phosphor-icons/react"
],
"registryDependencies": [
"@tro/theme",
"@tro/font-poppins",
"@tro/button",
"@tro/badge",
"@tro/input",
"@tro/textarea",
"@tro/card",
"@tro/switch",
"@tro/slider",
"@tro/progress",
"@tro/logo",
"@tro/sphere",
"@tro/icons",
"@tro/icon-provider",
"@tro/skill"
],
"categories": [
"tro",
"base"
],
"type": "registry:base",
"config": {
"style": "base-maia",
"tailwind": {
"baseColor": "neutral"
},
"iconLibrary": "phosphor",
"menuColor": "default",
"menuAccent": "subtle",
"registries": {
"@tro": "https://ui.tro.de/r/{name}.json"
}
}
},
{
"name": "theme",
"title": "TRO Theme",
"description": "TRO theme for any shadcn project: Charcoal #1E1E1E on Off-White #F5F5F3 (inverted in dark mode), 1px charcoal borders, 5%/10% charcoal hover tints, a very rounded radius scale (rounded-2xl = 32px cards) and brand weights only (200/300/500). Typography: ExtraLight headlines with tightened tracking, Light small headlines, sentence case everywhere (never all caps), display tokens text-display (heroes, covers) and text-headline (section headlines). Also the TRO spacing grid (p-tro-xs/sm/md/lg = 10/25/40/75px), a max-w-page content width, the brand palette as bg-tro-* utilities, and monochrome chart colours with TRO Yellow (chart-2) for the highlighted value. Add this to restyle every shadcn component at once.",
"dependencies": [
"tw-animate-css",
"@fontsource/poppins"
],
"registryDependencies": [
"@tro/font-poppins"
],
"cssVars": {
"theme": {
"font-heading": "var(--font-sans)",
"font-weight-thin": "200",
"font-weight-extralight": "200",
"font-weight-light": "300",
"font-weight-normal": "300",
"font-weight-medium": "500",
"font-weight-semibold": "500",
"font-weight-bold": "500",
"font-weight-extrabold": "500",
"font-weight-black": "500",
"spacing-tro-xs": "10px",
"spacing-tro-sm": "25px",
"spacing-tro-md": "40px",
"spacing-tro-lg": "75px",
"text-display": "clamp(2.75rem, 1.6rem + 4.5vw, 5.25rem)",
"text-display--line-height": "1.04",
"text-display--letter-spacing": "-0.035em",
"text-headline": "clamp(2rem, 1.4rem + 2vw, 2.75rem)",
"text-headline--line-height": "1.12",
"text-headline--letter-spacing": "-0.025em",
"container-page": "1320px"
},
"light": {
"radius": "1.125rem",
"background": "#F5F5F3",
"foreground": "#1E1E1E",
"card": "#F5F5F3",
"card-foreground": "#1E1E1E",
"popover": "#F5F5F3",
"popover-foreground": "#1E1E1E",
"primary": "#1E1E1E",
"primary-foreground": "#F5F5F3",
"secondary": "rgb(30 30 30 / 0.05)",
"secondary-foreground": "#1E1E1E",
"muted": "rgb(30 30 30 / 0.05)",
"muted-foreground": "#6B6B69",
"accent": "rgb(30 30 30 / 0.1)",
"accent-foreground": "#1E1E1E",
"destructive": "#C83C0A",
"border": "#1E1E1E",
"input": "#1E1E1E",
"ring": "#1E1E1E",
"chart-1": "#1E1E1E",
"chart-2": "#FFC832",
"chart-3": "#6B6B69",
"chart-4": "#A3A3A0",
"chart-5": "#D4D4D0",
"sidebar": "#F5F5F3",
"sidebar-foreground": "#1E1E1E",
"sidebar-primary": "#1E1E1E",
"sidebar-primary-foreground": "#F5F5F3",
"sidebar-accent": "rgb(30 30 30 / 0.1)",
"sidebar-accent-foreground": "#1E1E1E",
"sidebar-border": "#1E1E1E",
"sidebar-ring": "#1E1E1E",
"tro-charcoal": "#1E1E1E",
"tro-off-white": "#F5F5F3",
"tro-yellow": "#FFC832",
"tro-red": "#FA5A19",
"tro-lavender": "#DCC3FA",
"tro-light-blue": "#A0DCFF"
},
"dark": {
"background": "#1E1E1E",
"foreground": "#F5F5F3",
"card": "#1E1E1E",
"card-foreground": "#F5F5F3",
"popover": "#1E1E1E",
"popover-foreground": "#F5F5F3",
"primary": "#F5F5F3",
"primary-foreground": "#1E1E1E",
"secondary": "rgb(245 245 243 / 0.05)",
"secondary-foreground": "#F5F5F3",
"muted": "rgb(245 245 243 / 0.05)",
"muted-foreground": "#A3A3A0",
"accent": "rgb(245 245 243 / 0.1)",
"accent-foreground": "#F5F5F3",
"destructive": "#FA5A19",
"border": "#F5F5F3",
"input": "#F5F5F3",
"ring": "#F5F5F3",
"chart-1": "#F5F5F3",
"chart-2": "#FFC832",
"chart-3": "#A3A3A0",
"chart-4": "#6B6B69",
"chart-5": "#484846",
"sidebar": "#1E1E1E",
"sidebar-foreground": "#F5F5F3",
"sidebar-primary": "#F5F5F3",
"sidebar-primary-foreground": "#1E1E1E",
"sidebar-accent": "rgb(245 245 243 / 0.1)",
"sidebar-accent-foreground": "#F5F5F3",
"sidebar-border": "#F5F5F3",
"sidebar-ring": "#F5F5F3",
"tro-charcoal": "#1E1E1E",
"tro-off-white": "#F5F5F3",
"tro-yellow": "#FFC832",
"tro-red": "#FA5A19",
"tro-lavender": "#DCC3FA",
"tro-light-blue": "#A0DCFF"
}
},
"css": {
"@import \"@fontsource/poppins/200.css\"": {},
"@import \"@fontsource/poppins/300.css\"": {},
"@import \"@fontsource/poppins/500.css\"": {},
"@layer base": {
":root": {
"color-scheme": "light"
},
".dark": {
"color-scheme": "dark"
},
"body": {
"font-weight": "300",
"line-height": "1.6"
},
"h1, h2, h3, h4, h5, h6": {
"font-family": "var(--font-heading)",
"font-weight": "200",
"line-height": "1.3",
"text-wrap": "balance"
},
"h1": {
"font-size": "clamp(2.25rem, 1.5rem + 3vw, 3rem)",
"line-height": "1.1",
"letter-spacing": "-0.02em"
},
"h2": {
"font-size": "1.75rem",
"line-height": "1.2",
"letter-spacing": "-0.01em"
},
"h3": {
"font-size": "1.5rem",
"line-height": "1.25"
},
"h4, h5, h6": {
"font-weight": "300",
"line-height": "1.2"
},
"b, strong": {
"font-weight": "500"
},
"h1 strong, h2 strong, h3 strong, h1 b, h2 b, h3 b": {
"font-weight": "300"
}
},
"@utility tro-label": {
"font-size": "0.875rem",
"font-weight": "500",
"line-height": "1.3"
},
"@utility tro-image": {
"filter": "grayscale(1)"
}
},
"categories": [
"tro",
"theme"
],
"type": "registry:theme"
},
{
"name": "font-poppins",
"title": "Poppins",
"description": "Poppins, the TRO typeface, in the three brand weights: ExtraLight (200) for headlines, Light (300) for body text, Medium (500) for emphasis.",
"categories": [
"tro",
"font"
],
"type": "registry:font",
"font": {
"family": "'Poppins', sans-serif",
"provider": "google",
"import": "Poppins",
"variable": "--font-sans",
"weight": [
"200",
"300",
"500"
],
"subsets": [
"latin"
],
"dependency": "@fontsource/poppins"
}
},
{
"name": "primitives",
"title": "TRO Primitives",
"description": "All TRO UI primitives at once (button, badge, input, textarea, card, switch, slider, progress) plus the theme. Add it in the same command as any shadcn block or component, with --overwrite, so the TRO versions win over the shadcn originals: npx shadcn@latest add login-01 @tro/primitives --overwrite",
"registryDependencies": [
"@tro/theme",
"@tro/button",
"@tro/badge",
"@tro/input",
"@tro/textarea",
"@tro/card",
"@tro/switch",
"@tro/slider",
"@tro/progress"
],
"categories": [
"tro",
"ui"
],
"type": "registry:item"
},
{
"name": "button",
"title": "Button",
"description": "TRO pill button, a drop-in for shadcn Button (same props). Rounded-full, light weight, sentence case (never all caps). variant: default (solid charcoal, the primary action), outline (1px charcoal outline, the standard TRO pill), secondary, ghost, destructive, link. size: xs, sm, default, lg, icon*. Hover is a 10% charcoal tint with no movement; aria-pressed / aria-current=page render solid charcoal. render={} or render={} works without extra props.",
"dependencies": [
"@base-ui/react",
"class-variance-authority",
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/button.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui",
"form"
],
"type": "registry:ui"
},
{
"name": "badge",
"title": "Badge",
"description": "TRO tag, a drop-in for shadcn Badge (same props). Small outlined pill in sentence case for categories and labels. variant: outline (default), default (solid), secondary (outlined with 10% tint, for the active tag), destructive, ghost, link.",
"dependencies": [
"@base-ui/react",
"class-variance-authority",
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/badge.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "input",
"title": "Input",
"description": "TRO text input, a drop-in for shadcn Input. Pill-shaped (rounded-full) with a 1px charcoal outline, transparent background and a subtle 5% hover tint.",
"dependencies": [
"@base-ui/react",
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/input.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui",
"form"
],
"type": "registry:ui"
},
{
"name": "textarea",
"title": "Textarea",
"description": "TRO textarea, a drop-in for shadcn Textarea. 1px charcoal outline, generous rounding (rounded-xl), auto-sizing to content.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/textarea.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui",
"form"
],
"type": "registry:ui"
},
{
"name": "card",
"title": "Card",
"description": "TRO card, a drop-in for shadcn Card (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter). 1px outline, 32px radius, 40px inner spacing (size=\"sm\": 24px), ExtraLight titles. A leading ![]()
becomes a fully rounded grayscale image panel. Pass interactive for clickable cards: 5% charcoal hover tint, no movement. Use one card system for projects, services and insights, and keep cards in a row the same height.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/card.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui",
"layout"
],
"type": "registry:ui"
},
{
"name": "switch",
"title": "Switch",
"description": "TRO switch, a drop-in for shadcn Switch, modelled on the TRO logo: an outlined pill with a solid circle that travels left (off) to right (on). size: default, sm.",
"dependencies": [
"@base-ui/react",
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/switch.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui",
"form"
],
"type": "registry:ui"
},
{
"name": "slider",
"title": "Slider",
"description": "TRO slider, a drop-in for shadcn Slider: a solid circle travelling along a 1px line, like the TRO play bar, with the selected range drawn as a thicker stroke. Supports ranges and vertical orientation.",
"dependencies": [
"@base-ui/react",
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/slider.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui",
"form"
],
"type": "registry:ui"
},
{
"name": "progress",
"title": "Progress",
"description": "TRO progress bar, a drop-in for shadcn Progress (Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue): an outlined pill track with a solid charcoal fill, echoing the extended logo.",
"dependencies": [
"@base-ui/react",
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/progress.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "accordion",
"title": "Accordion",
"description": "TRO Accordion, a drop-in for shadcn Accordion (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/accordion.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "alert",
"title": "Alert",
"description": "TRO Alert, a drop-in for shadcn Alert (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/alert.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "alert-dialog",
"title": "Alert Dialog",
"description": "TRO Alert Dialog, a drop-in for shadcn Alert Dialog (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/button"
],
"files": [
{
"path": "registry/tro/ui/alert-dialog.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "aspect-ratio",
"title": "Aspect Ratio",
"description": "TRO Aspect Ratio, a drop-in for shadcn Aspect Ratio (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/aspect-ratio.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "attachment",
"title": "Attachment",
"description": "TRO Attachment, a drop-in for shadcn Attachment (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/button"
],
"files": [
{
"path": "registry/tro/ui/attachment.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "avatar",
"title": "Avatar",
"description": "TRO Avatar, a drop-in for shadcn Avatar (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/avatar.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "breadcrumb",
"title": "Breadcrumb",
"description": "TRO Breadcrumb, a drop-in for shadcn Breadcrumb (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/breadcrumb.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "bubble",
"title": "Bubble",
"description": "TRO Bubble, a drop-in for shadcn Bubble (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/bubble.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "button-group",
"title": "Button Group",
"description": "TRO Button Group, a drop-in for shadcn Button Group (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/separator"
],
"files": [
{
"path": "registry/tro/ui/button-group.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "calendar",
"title": "Calendar",
"description": "TRO Calendar, a drop-in for shadcn Calendar (same props), styled by the TRO theme.",
"dependencies": [
"cn",
"react-day-picker@latest",
"date-fns"
],
"registryDependencies": [
"@tro/theme",
"@tro/button"
],
"files": [
{
"path": "registry/tro/ui/calendar.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "carousel",
"title": "Carousel",
"description": "TRO Carousel, a drop-in for shadcn Carousel (same props), styled by the TRO theme.",
"dependencies": [
"cn",
"embla-carousel-react"
],
"registryDependencies": [
"@tro/theme",
"@tro/button"
],
"files": [
{
"path": "registry/tro/ui/carousel.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "chart",
"title": "Chart",
"description": "TRO Chart, a drop-in for shadcn Chart (same props), styled by the TRO theme.",
"dependencies": [
"cn",
"recharts@3.8.0"
],
"registryDependencies": [
"@tro/theme",
"@tro/card"
],
"files": [
{
"path": "registry/tro/ui/chart.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "checkbox",
"title": "Checkbox",
"description": "TRO Checkbox, a drop-in for shadcn Checkbox (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/checkbox.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "code-block",
"title": "Code Block",
"description": "TRO Code Block, a drop-in for shadcn Code Block (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/button",
"@tro/use-highlighted-code"
],
"files": [
{
"path": "registry/tro/ui/code-block.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "collapsible",
"title": "Collapsible",
"description": "TRO Collapsible, a drop-in for shadcn Collapsible (same props), styled by the TRO theme.",
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/collapsible.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "combobox",
"title": "Combobox",
"description": "TRO Combobox, a drop-in for shadcn Combobox (same props), styled by the TRO theme.",
"dependencies": [
"cn",
"@base-ui/react"
],
"registryDependencies": [
"@tro/theme",
"@tro/button",
"@tro/input-group"
],
"files": [
{
"path": "registry/tro/ui/combobox.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "command",
"title": "Command",
"description": "TRO Command, a drop-in for shadcn Command (same props), styled by the TRO theme.",
"dependencies": [
"cn",
"cmdk"
],
"registryDependencies": [
"@tro/theme",
"@tro/dialog",
"@tro/input-group"
],
"files": [
{
"path": "registry/tro/ui/command.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "context-menu",
"title": "Context Menu",
"description": "TRO Context Menu, a drop-in for shadcn Context Menu (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/context-menu.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "dialog",
"title": "Dialog",
"description": "TRO Dialog, a drop-in for shadcn Dialog (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/button"
],
"files": [
{
"path": "registry/tro/ui/dialog.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "direction",
"title": "Direction",
"description": "TRO Direction, a drop-in for shadcn Direction (same props), styled by the TRO theme.",
"dependencies": [
"@base-ui/react"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/direction.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "drawer",
"title": "Drawer",
"description": "TRO Drawer, a drop-in for shadcn Drawer (same props), styled by the TRO theme.",
"dependencies": [
"cn",
"@base-ui/react"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/drawer.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "dropdown-menu",
"title": "Dropdown Menu",
"description": "TRO Dropdown Menu, a drop-in for shadcn Dropdown Menu (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/dropdown-menu.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "empty",
"title": "Empty",
"description": "TRO Empty, a drop-in for shadcn Empty (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/empty.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "field",
"title": "Field",
"description": "TRO Field, a drop-in for shadcn Field (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/label",
"@tro/separator"
],
"files": [
{
"path": "registry/tro/ui/field.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "hover-card",
"title": "Hover Card",
"description": "TRO Hover Card, a drop-in for shadcn Hover Card (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/hover-card.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "input-group",
"title": "Input Group",
"description": "TRO Input Group, a drop-in for shadcn Input Group (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/button",
"@tro/input",
"@tro/textarea"
],
"files": [
{
"path": "registry/tro/ui/input-group.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "input-otp",
"title": "Input Otp",
"description": "TRO Input Otp, a drop-in for shadcn Input Otp (same props), styled by the TRO theme.",
"dependencies": [
"cn",
"input-otp"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/input-otp.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "item",
"title": "Item",
"description": "TRO Item, a drop-in for shadcn Item (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/separator"
],
"files": [
{
"path": "registry/tro/ui/item.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "kbd",
"title": "Kbd",
"description": "TRO Kbd, a drop-in for shadcn Kbd (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/kbd.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "label",
"title": "Label",
"description": "TRO Label, a drop-in for shadcn Label (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/label.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "marker",
"title": "Marker",
"description": "TRO Marker, a drop-in for shadcn Marker (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/marker.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "menubar",
"title": "Menubar",
"description": "TRO Menubar, a drop-in for shadcn Menubar (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/dropdown-menu"
],
"files": [
{
"path": "registry/tro/ui/menubar.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "message",
"title": "Message",
"description": "TRO Message, a drop-in for shadcn Message (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/message.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "message-scroller",
"title": "Message Scroller",
"description": "TRO Message Scroller, a drop-in for shadcn Message Scroller (same props), styled by the TRO theme.",
"dependencies": [
"cn",
"@shadcn/react"
],
"registryDependencies": [
"@tro/theme",
"@tro/button"
],
"files": [
{
"path": "registry/tro/ui/message-scroller.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "native-select",
"title": "Native Select",
"description": "TRO Native Select, a drop-in for shadcn Native Select (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/native-select.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "navigation-menu",
"title": "Navigation Menu",
"description": "TRO Navigation Menu, a drop-in for shadcn Navigation Menu (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/navigation-menu.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "pagination",
"title": "Pagination",
"description": "TRO Pagination, a drop-in for shadcn Pagination (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/button"
],
"files": [
{
"path": "registry/tro/ui/pagination.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "popover",
"title": "Popover",
"description": "TRO Popover, a drop-in for shadcn Popover (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/popover.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "questionnaire",
"title": "Questionnaire",
"description": "TRO Questionnaire, a drop-in for shadcn Questionnaire (same props), styled by the TRO theme.",
"dependencies": [
"cn",
"@shadcn/react"
],
"registryDependencies": [
"@tro/theme",
"@tro/button"
],
"files": [
{
"path": "registry/tro/ui/questionnaire.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "radio-group",
"title": "Radio Group",
"description": "TRO Radio Group, a drop-in for shadcn Radio Group (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/radio-group.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "resizable",
"title": "Resizable",
"description": "TRO Resizable, a drop-in for shadcn Resizable (same props), styled by the TRO theme.",
"dependencies": [
"cn",
"react-resizable-panels"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/resizable.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "scroll-area",
"title": "Scroll Area",
"description": "TRO Scroll Area, a drop-in for shadcn Scroll Area (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/scroll-area.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "select",
"title": "Select",
"description": "TRO Select, a drop-in for shadcn Select (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/select.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "separator",
"title": "Separator",
"description": "TRO Separator, a drop-in for shadcn Separator (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/separator.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "sheet",
"title": "Sheet",
"description": "TRO Sheet, a drop-in for shadcn Sheet (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/button"
],
"files": [
{
"path": "registry/tro/ui/sheet.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "sidebar",
"title": "Sidebar",
"description": "TRO Sidebar, a drop-in for shadcn Sidebar (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/button",
"@tro/input",
"@tro/separator",
"@tro/sheet",
"@tro/skeleton",
"@tro/tooltip",
"@tro/use-mobile"
],
"files": [
{
"path": "registry/tro/ui/sidebar.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "skeleton",
"title": "Skeleton",
"description": "TRO Skeleton, a drop-in for shadcn Skeleton (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/skeleton.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "sonner",
"title": "Sonner",
"description": "TRO Sonner, a drop-in for shadcn Sonner (same props), styled by the TRO theme.",
"dependencies": [
"sonner",
"next-themes"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/sonner.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "spinner",
"title": "Spinner",
"description": "TRO Spinner, a drop-in for shadcn Spinner (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/spinner.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "table",
"title": "Table",
"description": "TRO Table, a drop-in for shadcn Table (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/table.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "tabs",
"title": "Tabs",
"description": "TRO Tabs, a drop-in for shadcn Tabs (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/tabs.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "toast",
"title": "Toast",
"description": "TRO Toast, a drop-in for shadcn Toast (same props), styled by the TRO theme.",
"dependencies": [
"cn",
"@base-ui/react"
],
"registryDependencies": [
"@tro/theme",
"@tro/button"
],
"files": [
{
"path": "registry/tro/ui/toast.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "toggle",
"title": "Toggle",
"description": "TRO Toggle, a drop-in for shadcn Toggle (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/toggle.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "toggle-group",
"title": "Toggle Group",
"description": "TRO Toggle Group, a drop-in for shadcn Toggle Group (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/toggle"
],
"files": [
{
"path": "registry/tro/ui/toggle-group.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "tooltip",
"title": "Tooltip",
"description": "TRO Tooltip, a drop-in for shadcn Tooltip (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme"
],
"files": [
{
"path": "registry/tro/ui/tooltip.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "trace",
"title": "Trace",
"description": "TRO Trace, a drop-in for shadcn Trace (same props), styled by the TRO theme.",
"dependencies": [
"cn"
],
"registryDependencies": [
"@tro/theme",
"@tro/collapsible"
],
"files": [
{
"path": "registry/tro/ui/trace.tsx",
"type": "registry:ui"
}
],
"categories": [
"tro",
"ui"
],
"type": "registry:ui"
},
{
"name": "use-mobile",
"title": "TRO Use Mobile",
"description": "Support code for TRO components, mirrored from shadcn Use Mobile.",
"registryDependencies": [],
"files": [
{
"path": "registry/tro/hooks/use-mobile.ts",
"type": "registry:hook"
}
],
"categories": [
"tro",
"support"
],
"type": "registry:hook"
},
{
"name": "use-highlighted-code",
"title": "TRO Use Highlighted Code",
"description": "Support code for TRO components, mirrored from shadcn Use Highlighted Code.",
"dependencies": [
"shiki"
],
"registryDependencies": [],
"files": [
{
"path": "registry/tro/hooks/use-highlighted-code.ts",
"type": "registry:hook"
},
{
"path": "registry/tro/lib/highlighter.tsx",
"type": "registry:lib"
}
],
"categories": [
"tro",
"support"
],
"type": "registry:hook"
},
{
"name": "logo",
"title": "TRO Logo",
"description": "The official TRO logo as a React component, always with its pill frame: solid circle + wordmark, built to the brand construction (frame stroke = half the letter stroke). variant: default (compact), extended (fills its container; use full-width in headers and footers). orientation: horizontal, vertical (turned 90° clockwise, for a layout's vertical edge). size: xs, sm, default (56px high), lg. progress={0..1} moves the circle along the bar, so the logo doubles as a play bar or progress indicator. claim adds the fixed \"World building sound\" lockup. Colour follows currentColor (dark on light, light on dark). Keep clear space of one circle diameter around it; never recolour, distort, rotate other than 90°, make transparent, outline the circle or swap the typeface.",
"dependencies": [
"cn"
],
"files": [
{
"path": "registry/tro/blocks/logo.tsx",
"type": "registry:component",
"target": "@components/tro/logo.tsx"
}
],
"categories": [
"tro",
"brand"
],
"type": "registry:component"
},
{
"name": "sphere",
"title": "TRO Sphere",
"description": "The TRO sphere, the only colour element on TRO websites: a soft, luminous, blurred colour field placed behind content (absolute; centred, cropped at an edge, or reduced to an arc in a corner of an overflow-hidden section). preset: aura (default, the styleguide sphere), sunrise, ember, ocean, dusk, blush, lavender. colors: custom colours, first is the base (combine a client's colours with TRO Yellow #FFC832). image: an official rendered sphere hosted on ui.tro.de (e.g. red-1, purple-2-distorted for the textured look). mono: monochrome sphere in currentColor; blur=\"0\" for a crisp circle. Size it with a width class. Use sparingly; keep text readable; no other accent colours or gradients.",
"dependencies": [
"cn"
],
"files": [
{
"path": "registry/tro/blocks/sphere.tsx",
"type": "registry:component",
"target": "@components/tro/sphere.tsx"
}
],
"categories": [
"tro",
"brand"
],
"type": "registry:component"
},
{
"name": "icons",
"title": "TRO Icons",
"description": "The eight TRO brand icons as React components (OrchestrationIcon, AmplificationIcon, SimplificationIcon, InspirationIcon, SignificationIcon, SoundIcon, VoiceIcon, MusicIcon). Thin line illustrations from the world of sound, in currentColor; use them large (40px+) for features, services and values. For small UI icons use Phosphor in thin or light weight.",
"files": [
{
"path": "registry/tro/blocks/tro-icons.tsx",
"type": "registry:component",
"target": "@components/tro/icons.tsx"
}
],
"categories": [
"tro",
"brand"
],
"type": "registry:component"
},
{
"name": "icon-provider",
"title": "TRO Icon Provider",
"description": "Sets the TRO icon style for all Phosphor icons (@phosphor-icons/react, the TRO icon library; never use lucide-react). Wrap the app root in once. Default weight light for UI sizes; use weight=\"thin\" on icons from 32px up, as in the styleguide.",
"dependencies": [
"@phosphor-icons/react"
],
"files": [
{
"path": "registry/tro/blocks/icon-provider.tsx",
"type": "registry:component",
"target": "@components/tro/icon-provider.tsx"
}
],
"categories": [
"tro",
"brand"
],
"type": "registry:component"
},
{
"name": "skill",
"title": "TRO Claude Skill",
"description": "Installs the tro-design agent skill into .claude/skills/tro-design: TRO brand rules, setup paths, typography, colour, spheres, logo and page patterns, plus the plain tro.css for artifacts. Works in any project, no components.json needed.",
"files": [
{
"path": "registry/tro/universal/skill/SKILL.md",
"type": "registry:file",
"target": "~/.claude/skills/tro-design/SKILL.md"
},
{
"path": "registry/tro/universal/tro.css",
"type": "registry:file",
"target": "~/.claude/skills/tro-design/tro.css"
}
],
"categories": [
"tro",
"agent"
],
"type": "registry:item"
},
{
"name": "css",
"title": "TRO CSS",
"description": "Framework-agnostic TRO styles as one plain CSS file (styles/tro.css): tokens, Poppins, base typography and component classes (tro-btn, tro-badge, tro-input, tro-card, tro-logo, tro-sphere, tro-label). For Astro, Svelte, plain HTML or any project without Tailwind. Also served at https://ui.tro.de/tro.css.",
"files": [
{
"path": "registry/tro/universal/tro.css",
"type": "registry:file",
"target": "~/styles/tro.css"
}
],
"categories": [
"tro",
"css"
],
"type": "registry:item"
}
]
}