Skip to content
DocsSupportPricing
Roadmap (has updates coming soon)XFigma3.2K
Overview
  • Introduction
  • Get Started
  • License Setup
  • Styling
  • Registry
  • MCP Server
  • Agent Skills
  • Changelog
MCP Server
  • Claude
  • CodexCodexCodex
  • Cursor
  • v0
  • Lovable
  • Replit
  • OpenCode
  • VS Code
  • Zed
  • GitHub Copilot
  • Grok
  • Antigravity
  • Bolt
Components
  • Alert
  • Autocomplete
  • Badge
  • Data GridAutosizing, fill and resize hardening, React Compiler ready
  • Date Selector
  • Event CalendarNew event calendar component with five views
  • File Upload
  • FiltersSizing and interaction refinements
  • Frame
  • GanttNew gantt component with day to year scales
  • Icon Stack
  • Icon TileNew icon tile component with five surface variants
  • KanbanonValueCommit callback and accessibility improvements
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • SortableonValueCommit callback and accessibility improvements
  • StepperRender prop composition and styling refinements
  • Timeline
  • Tree

Application

  • App Shell
  • Auth
  • Card
  • Chart
  • Dashboard
  • Dialog
  • Empty State
  • Event CalendarNew event calendar block added
  • Form
  • GanttNew gantt block added
  • Kanban Board
  • List
  • Navbar
  • Onboarding
  • Profile
  • Schedule
  • Settings
  • Sheet
  • Stats
  • Timeline
  • Wizard

Solutions

  • Agents
  • AI Ops
  • Analytics
  • Billing
  • Bookings
  • CRM
  • Inventory
  • Users

Templates

  • E-commerce
  • SaaS
  • Dashboard
  • Landing
  • All templates

eCommerce

  • Category Card
  • Checkout
  • Comparison
  • Coupon
  • Filter Sidebar
  • Product Card
  • Product Detail
  • Product Grid
  • Receipt
  • Review
  • Shopping Cart
  • Wishlist

Data Grid

  • Base
  • Columns
  • Drag & Drop
  • EditingNew editable Data Grid block added
  • Expansion
  • Filtering
  • Grouping
  • Virtualization

Marketing

  • Blog
  • Contact
  • CTA
  • FAQ

Resources

  • Components
  • Blocks
  • Docs
  • Support
  • Pricing
  • Roadmap(has updates coming soon)
  • AffiliateSoon

Legal

  • Privacy Policy
  • Terms & Conditions
  • License
  • Refunds
  • Cookies

© 2026 ReUI. All rights reserved.

3.2K

Styling

PreviousNext

A guide for extended styling options with our color system.

Overview

ReUI extends the official shadcn/ui theming system with additional semantic tokens that enable precise, context-aware UI states.

While you can use standard shadcn/ui themes, we highly recommend adopting our customcolor tokens to ensure the intended design quality and consistent contrast across all component states such as and

Extended Tokens

To support advanced state communication in components like Alerts, Badges, and Data Grids, we have extended the base palette with additional semantic tokens:

  • --destructive-foreground: Foreground color specifically for destructive actions.
  • --info & --info-foreground: Background and text colors for informational states.
  • --success & --success-foreground: Background and text colors for success/positive outcomes.
  • --warning & --warning-foreground: Background and text colors for cautionary states.
  • --invert & --invert-foreground: Background and text colors for invert states.
License SetupRegistry

On This Page

OverviewExtended Tokens
app/globals.css
@theme inline {
  --color-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-invert: var(--invert);
  --color-invert-foreground: var(--invert-foreground);
}
 
:root {
  --destructive-foreground: var(--color-red-800);
  --info: var(--color-violet-500);
  --info-foreground: var(--color-violet-900);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-900);
  --warning: var(--color-yellow-500);
  --warning-foreground: var(--color-yellow-900);
  --invert: var(--color-zinc-900);
  --invert-foreground: var(--color-zinc-50);
}
 
.dark {
  --destructive-foreground: var(--color-red-600);
  --info: var(--color-violet-500);
  --info-foreground: var(--color-violet-600);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-600);
  --warning: var(--color-yellow-500);
  --warning-foreground: var(--color-yellow-600);
  --invert: var(--color-zinc-700);
  --invert-foreground: var(--color-zinc-50);
}

For general customization guidelines such as adding your own custom colors or switching between utility classes and variables, please refer to the official shadcn/ui documentation.

Alerts
Badges