Overview
MCP Server
Components
- Alert
- Autocomplete
- Badge
- CascaderCascader keeps a saved selection's full path, popup open or closed
- Code Block
- Color Picker
- Data GridData Grid works in apps that run React Compiler, with resizing, edits and callbacks kept live
- Date SelectorDate Selector keeps its year list and Today button current in apps that run React Compiler
- Emoji Picker
- Event CalendarEvent Calendar keeps today and the agenda current in apps that run React Compiler
- File TypeFile Type knows 171 formats, .env and Dockerfile included
- File Upload
- Filters
- Frame
- GanttGantt keeps its Today button and tooltip current in apps that run React Compiler
- Icon Stack
- Icon Tile
- Kanban
- Number Field
- Phone Input
- Rating
- Scrollspy
- Signature Pad
- Sortable
- Stepper
- Time Picker
- 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