ROC Design System v2 — React

Generated from the Figma export. 202 components, 1019 variants.

npm install
npm run dev      # gallery of every component and variant, port 5273
npm run build    # type-check + production build

Layout

| Path | What | | --- | --- | | src/components/<Name>/<Name>.tsx | one component, one typed prop per variant axis | | src/components/<Name>/<Name>.css | its classes, deduplicated across variants | | src/components/index.ts | barrel export | | src/registry.ts | machine-readable index: variant axes, uses / usedBy | | src/styles/tokens.css | design tokens as CSS custom properties | | src/styles/aliases.css | Figma library variable names bridged to local tokens | | design-system/components/*.html | static preview cards for Claude Design |

Using a component

import { Button } from './components';

<Button variant="Neutral" state="Default" size="default">Guardar</Button>

Every component takes className, style and the usual div props; they are merged onto the root node. When a component has three or fewer text layers, children replaces the first one, so labels can be set without new variants.

Theming

Tokens carry every Figma mode. Switch them with data attributes on any ancestor:

• accent="amber"
• accent="faco-lime"
• accent="gold"
• accent="orange"
• brand="civic"
• brand="faco"
• brand="generic"
• brand="plp"
• breakpoint="mobile"
• breakpoint="tablet"
• theme="dark"

<div data-theme="dark" data-brand="civic"> … </div>

Responsive size modes (Tablet, Mobile) are emitted as media queries, so they apply automatically.

Icons

Icons render as @tabler/icons-react outline components, matching the Figma library where every icon layer is icon-<name>.

Regenerating

npm run codegen

codegen/ reads the raw Figma export (~/Downloads/components) and the variable exports. Hand edits under src/components are overwritten — change the generator or the Figma source instead.

Known gap: components that live in a non-default mode

A few components are designed on a page pinned to a Figma mode — Main-nav is drawn in Dark, so its labels are white. The component export only carried modes a node sets on itself, and these inherit theirs, so those components currently render with light-mode tokens and their text disappears.

The exporter plugin now also records resolvedVariableModes, which is the mode a node actually renders under. Re-export from the plugin and re-run npm run codegen; the affected roots will come back carrying data-theme="dark" and render correctly. Until then, wrap them yourself:

<div data-theme="dark"><MainNav /></div>

Groups

• Components: 66
• Layout: 39
• Chart: 24
• Form: 7
• Command: 5
• DropdownMenu: 5
• Menubar: 5
• Card: 4
• ContextMenu: 4
• Calendar: 3
• Carousel: 3
• Date Picker: 3
• Hover Card: 3
• NavigationMenu: 3
• Step-Progress: 3
• Data Table: 2
• Dialog: 2
• Drawer: 2
• Input: 2
• Select Menu: 2
• Sheet: 2
• Table: 2
• Accordion: 1
• Breadcrumb: 1
• InputOTP: 1
• Items: 1
• NavigationMenuItem: 1
• Pagination: 1
• Popover: 1
• Radio: 1
• Select: 1
• Tabs: 1
• Toast: 1