Create Theme

Create and customize your own theme with this interactive theme builder. Adjust border widths, radius values, and colors to match your brand, then copy the generated CSS to use in your project. Changes are reflected in real-time in the playground below.

Preview your theme configuration with live component examples below. Changes update in real-time as you adjust the controls above.

Copy the generated CSS below and add it to your stylesheet. Apply the theme by setting data-theme="custom" on your HTML element.

[data-theme="custom"] {
  /* Border & Radius */
  --border-width: var(--border-width-xs);
  --radius-box: var(--radius-sm);
  --radius-field: var(--radius-sm);
  --radius-selector: var(--radius-full);

  /* Colors */
  --primary-base-color: #06b6d4;
  --secondary-base-color: #14b8a6;
  --success-base-color: #22c55e;
  --danger-base-color: #ef4444;
  --warning-base-color: #f59e0b;
  --info-base-color: #3b82f6;
  --neutral-base-color: #71717a;
}