Theming
All react-ui components are built with customization in mind. They follow a design system that integrates seamlessly with existing React applications, whether you use Tailwind CSS, standard CSS, or CSS-in-JS.
CSS Variables
The library uses a set of semantic CSS variables for its core appearance. You can override these in your root stylesheet to match your brand.
:root {
/* Core Colors */
--torch-primary: 250 80% 60%;
--torch-background: 0 0% 100%;
--torch-foreground: 0 0% 10%;
/* Borders and Radius */
--torch-border: 0 0% 90%;
--torch-radius: 0.75rem;
}
.dark {
--torch-background: 0 0% 5%;
--torch-foreground: 0 0% 95%;
}Tailwind Integration
All components accept a className prop. Since react-ui uses standard Tailwind classes internally, you can use the ! prefix or tw-merge to override styles.
<TrainingStats
className="bg-blue-500/10 border-blue-500 shadow-lg"
epoch={10}
loss={0.5}
/>Dark Mode
Dark mode is supported out-of-the-box. Components listen for the .dark class on the html or body element.
| Mode | Behavior |
|---|---|
| Light | High contrast, light gray backgrounds, dark text |
| Dark | Muted accents, deep zinc backgrounds, light text |
Interactive Color Scales
For components that visualize numeric data (like TensorViewer or GPUHeatmap), you can specify a colorScale.
| Scale | Best For |
|---|---|
| viridis / magma / plasma | Sequential data (Magnitudes, Activations) |
| diverging | Relative data (Positive/Negative weights) |
| grayscale | Minimalist technical displays |
Customizing Icons
The library uses Phosphor Icons by default. While you cannot swap icons globally, you can often override specific parts of components by passing your own SVG elements or icon components as props where supported.