Denozordec
3a9bd0dba3
Updated .mcp.json and .cursor/mcp.json to include reui configuration for HTTP API integration, specifying the URL and necessary headers. Modified components.json to enhance the @reui registry with authorization headers, improving security and access to resources.
1.9 KiB
Styling (ReUI delta over shadcn)
Follow the shadcn skill for the generic rules (semantic colors not raw values, gap-* not space-y-*, size-*, cn(), no manual dark: overrides, no overlay z-index). This file is only the ReUI-specific additions.
ReUI extended semantic tokens
ReUI adds semantic tokens beyond shadcn's base set. Use these instead of raw colors for status and emphasis:
--success/--success-foreground--info/--info-foreground--warning/--warning-foreground--destructive-foreground(paired with shadcn's--destructive)--invert/--invert-foreground(inverted surfaces)
Use them as Tailwind utilities (bg-success text-success-foreground, text-warning, ...). They are defined in the project's global CSS and registered with Tailwind (@theme inline on v4). If a token is missing in the project, add it to the global CSS file (never a new file) following the same name / name-foreground convention, exactly as the shadcn customization rules describe.
Incorrect: <span className="text-green-600">Active</span>
Correct: <Badge variant="success">Active</Badge> or <span className="text-success">Active</span>
Blocks follow your theme
When you install a block it adapts to your active theme through the semantic tokens above and the project's CSS variables. Don't hardcode style-specific values into installed block code and don't fork it to "restyle" - change the theme via the CSS variables / a preset and every block follows. Want a different look? search for a block whose design already fits instead of re-skinning one.
Density and typography rhythm
ReUI operational UI usually feels dense, not airy. Keep the gap between a title and its supporting description tight by default (gap-0.5, space-y-1, or space-y-px), and smaller than the gap between sections. Match the surrounding ReUI density when you add rows or fields; do not pad operational surfaces like a marketing page.