Settings & Preferences
Configure your UXLab experience with appearance settings and component preview
Prerequisites:
Settings Page
Access application settings at /settings or via the command palette (⌘K → "Settings").
Appearance Settings
Color Mode
Choose how UXLab responds to system appearance:
| Option | Description |
|---|---|
| Light | Always use light mode |
| Dark | Always use dark mode |
| System | Follow your OS preference |
Theme Selection
Select from seven built-in themes:
| Theme | Icon | Style |
|---|---|---|
| Default | Settings | App-config colors (primary + neutral) |
| Lyra | Palette | Blue/slate (shadcn-inspired) |
| Nord | Snowflake | Arctic blues and cyans |
| Dracula | Ghost | Deep purples and pinks |
| Catppuccin | Coffee | Warm pastels (Mocha variant) |
| Carnival | Carousel | Warm, playful carnival colors |
| Reef | DNA | Teal and citrus coastal palette |
Click any theme card to apply it immediately. The active theme shows a highlighted border.
Preview Section
The settings page includes a live preview area showing:
- Button variants (Primary, Neutral, Outline, Ghost)
- Badge colors (Primary, Success, Warning, Error)
- Text colors (Default, Muted, Dimmed)
Use this to see how your selected theme affects common UI elements.
Component Catalog
The component catalog is a slideover panel for browsing all available UI components.
Opening the Catalog
- Click the user menu (bottom of sidebar)
- Select "Component Catalog"
Or use the keyboard: ⌘K → "Component Catalog" (if added to commands).
Features
Quick Theme Switch
At the top of the catalog, theme buttons let you quickly switch themes while browsing components.
Component Categories
Browse components organized by function:
| Category | Components |
|---|---|
| Layout | UContainer, UCard, USeparator, USkeleton |
| Forms | UButton, UInput, UTextarea, USelect, UCheckbox, URadio, USwitch |
| Data Display | UTable, UBadge, UAvatar, UIcon, UProgress |
| Navigation | UNavigationMenu, UTabs, UBreadcrumb, UPagination |
| Overlay | UModal, USlideover, UDropdownMenu, UTooltip, UPopover |
| Custom | TechBadge, WorldClock, TimelineEventCard |
Click category headers to expand/collapse component lists.
Live Preview
The bottom of the catalog shows a live preview with:
- Button styles
- Badge variants
- Form inputs
- Interactive elements
All previews update immediately when you switch themes.
Quick Access Reference
| Action | Method |
|---|---|
| Open Settings | /settings or ⌘K → "Settings" |
| Change Theme | User menu → Theme → Select |
| Toggle Color Mode | User menu → Appearance → Select |
| Open Component Catalog | User menu → "Component Catalog" |
| Open Site Map | User menu → "Site Map" or ⌘K → "Open Site Map" |
| Search Everything | ⌘K (or Ctrl+K) |
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
⌘K / Ctrl+K | Open command palette |
Esc | Close modals/slidevers |
Related Guides
- Customization & Theming - Deep dive into CSS variables and custom themes