Variables are the heart of the Orbital Shadcn UI Kit. They control every aspect of your design system, from colors and spacing to radius and typography.
Collections Overview
The kit includes six core variable collections:
- Onboarding Info: Meta-data about your project setup.
- Spacing: A comprehensive spacing scale based on Tailwind CSS (0.5, 1, 2, 4, etc.).
- Theme: Semantic colors (Primary, Secondary, Destructive, Muted, Accent).
- Mode: Light and Dark mode value definitions.
- Tailwind CSS: The raw color palette (Slate, Gray, Zinc, Neutral, Stone, Red, Orange, etc.).
- Typography: Font families, weights, and size scales.
Customizing Your Theme
To change your brand color:
- Open the Variables modal.
- Select the Theme collection.
- Locate the
Primary variable group.
- Change the value of
DEFAULT to your brand’s hex code.
- The
foreground color will automatically adjust if you are using contrast-based plugins, or you can manually set it to ensure readability.
Radius and Spacing
- Radius: The kit uses a semantic radius system (
radius-sm, radius-md, radius-lg). Change the radius variable to update button and card rounded corners globally.
- Spacing: Consistent padding and margins are maintained using the spacing collection.
Use the Mode collection to toggle between Light and Dark themes instantly. Every component is linked to these variables, ensuring a perfect transition.
