Interactive Color Palette

All colors in this UI library are defined as CSS variables in globals.css under :root. For example:

1/* globals.css */
2:root {
3  --color-primary: #2563eb;
4  --color-primary-hover: #1d4ed8;
5  --color-secondary: #9333ea;
6  --color-secondary-hover: #7e22ce;
7  --color-success: #16a34a;
8  --color-success-hover: #15803d;
9  /* ... other colors */
10}
11
12/* Tailwind helper classes */
13.bg-primary { background-color: var(--color-primary); }
14.text-primary { color: var(--color-primary); }
15.hover\:bg-primary:hover { background-color: var(--color-primary-hover); }
16

You can now use these helpers directly in your components for backgrounds, text, or borders:

• bg-primary → background
• text-primary → text color
• hover:bg-primary-hover → hover background
• border-primary → border color

This keeps your UI library consistent and makes it easy to change the theme later — just update the CSS variables.

Use the color pickers below to adjust colors