System

Customization

Theme presets, CSS variables, local class hooks, and source edits for every primitive.

Style Presets

Presets are complete theme objects. They change color, font, density, radius, borders, motion, and effects while keeping the same component source.

minimal

Stone

Quiet, minimal product UI with crisp borders and balanced contrast.

Live

1import { defineHyzrTheme } from "@hyzrui/core";
2 
3export const theme = defineHyzrTheme({
4  "id": "stone",
5  "name": "Stone",
6  "description": "Quiet, minimal product UI with crisp borders and balanced contrast.",
7  "aesthetic": "minimal",
8  "density": "comfortable",
9  "shade": "flat",
10  "radius": 8,
11  "shadow": 0.18,
12  "contrast": 0.84,
13  "font": "inter",
14  "colors": {
15    "background": "#f8fafc",
16    "foreground": "#111827",
17    "surface": "#ffffff",
18    "surfaceRaised": "#ffffff",
19    "surfaceMuted": "#eef2f7",
20    "border": "#dce2ea",
21    "borderStrong": "#bcc6d4",
22    "primary": "#111827",
23    "primaryForeground": "#ffffff",
24    "accent": "#2563eb",
25    "accentForeground": "#ffffff",
26    "success": "#147d64",
27    "warning": "#b45309",
28    "danger": "#dc2626",
29    "muted": "#64748b",
30    "mutedForeground": "#475569",
31    "ring": "rgba(37, 99, 235, 0.30)"
32  },
33  "dark": {
34    "shade": "raised",
35    "shadow": 0.4,
36    "colors": {
37      "background": "#0a0a0c",
38      "foreground": "#f5f5f7",
39      "surface": "#151518",
40      "surfaceRaised": "#1c1c20",
41      "surfaceMuted": "#222227",
42      "border": "#2b2b31",
43      "borderStrong": "#3d3d45",
44      "primary": "#f5f5f7",
45      "primaryForeground": "#111114",
46      "accent": "#3b82f6",
47      "accentForeground": "#ffffff",
48      "success": "#34d399",
49      "warning": "#fbbf24",
50      "danger": "#f87171",
51      "muted": "#9b9ba6",
52      "mutedForeground": "#c5c5cf",
53      "ring": "rgba(59, 130, 246, 0.40)"
54    }
55  },
56  "mode": "light",
57  "typography": {
58    "baseSize": 14,
59    "controlSize": 14,
60    "labelSize": 13,
61    "leadSize": 16,
62    "headingWeight": 680,
63    "titleWeight": 620,
64    "bodyWeight": 400,
65    "controlWeight": 500,
66    "labelWeight": 560,
67    "lineHeight": 1.58,
68    "letterSpacing": "0px"
69  },
70  "sizing": {
71    "controlHeight": 38,
72    "controlPadding": 13,
73    "fieldPadding": 12,
74    "cardPadding": 18,
75    "buttonHeight": 34,
76    "buttonPadding": 14,
77    "buttonGap": 8,
78    "iconButtonSize": 34,
79    "badgeHeight": 22,
80    "gap": 12,
81    "gridGap": 20,
82    "sectionGap": 34,
83    "containerWidth": 1180,
84    "sidebarWidth": 256,
85    "tocWidth": 240,
86    "dialogWidth": 520,
87    "sheetWidth": 420,
88    "drawerWidth": 430,
89    "floatingOffset": 8
90  },
91  "borders": {
92    "radius": 8,
93    "radiusSm": 5,
94    "radiusLg": 14,
95    "radiusFull": 999,
96    "width": 1,
97    "strongWidth": 1,
98    "focusWidth": 2
99  },
100  "motion": {
101    "duration": 150,
102    "easing": "cubic-bezier(.2, .8, .2, 1)",
103    "hoverLift": 0,
104    "activePress": 1,
105    "hoverMix": 5,
106    "disabledOpacity": 0.55
107  },
108  "effects": {
109    "overlayOpacity": 0.38,
110    "backdropBlur": 0,
111    "shadow": 0,
112    "shadowSoft": 0,
113    "floatingShadow": 0.12
114  },
115  "palette": {
116    "chart1": "#111827",
117    "chart2": "#64748b",
118    "chart3": "#bcc6d4",
119    "chart4": "#eef2f7",
120    "chart5": "#2563eb"
121  }
122});

Theme Provider

Wrap any part of your app in HyzrThemeProvider. The provider writes CSS variables, so nested components inherit the same visual language automatically.

1import { HyzrThemeProvider } from "@hyzrui/core";
2import { productTheme } from "./theme";
3 
4export function App() {
5  return (
6    <HyzrThemeProvider theme={productTheme}>
7      <Dashboard />
8    </HyzrThemeProvider>
9  );
10}

1import { defineHyzrTheme } from "@hyzrui/core";
2 
3export const productTheme = defineHyzrTheme({
4  id: "product",
5  name: "Product",
6  aesthetic: "minimal",
7  density: "comfortable",
8  shade: "flat",
9  font: "inter",
10  radius: 8,
11  shadow: 0.12,
12  contrast: 0.92,
13  colors: {
14    background: "#fbfbfc",
15    foreground: "#09090b",
16    surface: "#ffffff",
17    surfaceRaised: "#ffffff",
18    surfaceMuted: "#f4f4f5",
19    border: "#e4e4e7",
20    borderStrong: "#d4d4d8",
21    primary: "#18181b",
22    primaryForeground: "#ffffff",
23    accent: "#52525b",
24    accentForeground: "#ffffff",
25  },
26  typography: {
27    baseSize: 14,
28    controlSize: 14,
29    controlWeight: 500,
30    headingWeight: 680,
31    lineHeight: 1.58,
32  },
33  sizing: {
34    controlHeight: 38,
35    buttonHeight: 34,
36    buttonPadding: 14,
37    cardPadding: 18,
38    gridGap: 20,
39    dialogWidth: 520,
40  },
41  borders: {
42    radius: 8,
43    radiusSm: 5,
44    radiusLg: 14,
45    width: 1,
46    focusWidth: 2,
47  },
48  motion: {
49    duration: 150,
50    easing: "cubic-bezier(.2, .8, .2, 1)",
51    hoverLift: 0,
52    hoverMix: 5,
53  },
54});

Color palettes

Token	What it controls
`colors.background`	Page background and the root provider surface.
`colors.foreground`	Default text and icon color.
`colors.surface`	Cards, panels, inputs, and menus.
`colors.surfaceMuted`	Secondary controls, command rows, and quiet fills.
`colors.border`	Default edge color for controls and surfaces.
`colors.primary`	Main action controls and selected states.
`colors.accent`	Optional brand accent, charts, and highlights.
`palette.chart1...chart5`	Data colors used by chart-like examples and progress visuals.

Typography and weight

Token	What it controls
`font`	Inter, system, serif, mono, or rounded font stack.
`typography.baseSize`	Root component text size.
`typography.controlSize`	Buttons, inputs, menus, tabs, and command rows.
`typography.labelSize`	Labels, badges, metadata, and helper labels.
`typography.headingWeight`	Page and section heading emphasis.
`typography.controlWeight`	Button, tab, menu, and compact action weight.
`typography.lineHeight`	Reading rhythm for body copy and descriptions.

Sizing, layout, and positioning

Token	What it controls
`density`	Compact, comfortable, or spacious defaults.
`sizing.controlHeight`	Input, select, search, and trigger height.
`sizing.buttonHeight`	Default button height independent from fields.
`sizing.buttonPadding`	Horizontal button rhythm for all variants.
`sizing.cardPadding`	Internal card, dialog, sheet, and panel padding.
`sizing.gridGap`	Preview grids and layout collage spacing.
`sizing.containerWidth`	Main content width for docs and app shells.
`sizing.dialogWidth`	Centered modal width.
`sizing.sheetWidth`	Side sheet width.
`sizing.floatingOffset`	Popover, menu, tooltip, and hover-card distance from trigger.

Borders and radius

Token	What it controls
`radius`	The quick root radius used by the default border scale.
`borders.radius`	Default component radius.
`borders.radiusSm`	Compact controls, attached groups, and small pills.
`borders.radiusLg`	Cards, dialogs, sheets, drawers, and large surfaces.
`borders.width`	Default border width for controls and cards.
`borders.focusWidth`	Keyboard focus outline width.

Hover, motion, and effects

Token	What it controls
`motion.duration`	Shared transition duration.
`motion.easing`	Shared easing curve.
`motion.hoverLift`	Subtle hover translation for raised styles.
`motion.activePress`	Pressed-state translation.
`motion.hoverMix`	How much foreground color mixes into hover surfaces.
`motion.disabledOpacity`	Global disabled opacity.
`effects.overlayOpacity`	Dialog, drawer, sheet, and command overlay strength.
`effects.backdropBlur`	Optional glass backdrop blur.
`effects.floatingShadow`	Menus, search, popovers, and floating panels.

Local CSS

Use global tokens for shared behavior, then override variables or component classes inside a local wrapper when a single layout needs a different rhythm.

Billing summary

Local padding, radius, and button rhythm.

Production$1,200.00

1.billing-panel {
2  --hui-card-padding: 22px;
3  --hui-radius-lg: 18px;
4  --hui-button-height: 36px;
5  --hui-hover-lift: -1px;
6}
7 
8.billing-panel .hui-button {
9  font-weight: 540;
10}

Source Edits

HyzrUI is not a sealed package. Install the primitive, keep the default structure, then edit the copied source whenever props and tokens are not enough.

1pnpm dlx hyzrui add button
2pnpm dlx hyzrui add dialog
3pnpm dlx hyzrui add search-bar

1// src/components/ui/button.tsx
2// Keep the public API small, then adjust internal classes for your product.
3export function Button({ variant = "solid", size = "md", ...props }) {
4  return <button data-variant={variant} data-size={size} {...props} />;
5}

API Reference

The provider accepts a theme object, normal div props, and local styles. Component docs show the local props for each primitive.

Prop	Type	Description
`theme`	HyzrTheme	Theme object from defineHyzrTheme or getHyzrThemePreset.
`className`	string	Wrapper class used for scoped overrides and layout-specific tuning.
`style`	CSSProperties	Inline CSS variables for one-off examples or generated previews.
`children`	React.ReactNode	Components that inherit the theme variables.