Overview
MCP Server
Components
- Alert
- Autocomplete
- Badge
- Data GridRebuilt on TanStack Table v9, with pinning now start/end
- 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
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 Alerts and Badges
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.
@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.
On This Page