Overview
MCP Server
Components
- Alert
- Autocomplete
- Badge
- CascaderCascader can now search the whole tree from any level
- Code Block
- Data GridData Grid now scrolls in RTL without an extra provider
- Date Selector
- Event Calendar
- File Upload
- Filters
- Frame
- Gantt
- Icon Stack
- Icon Tile
- Kanban
- Number Field
- Phone Input
- Rating
- Scrollspy
- Signature PadNew Signature Pad docs
- Sortable
- Stepper
- Time PickerNew Time Picker docs
- 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