Colors

Generate your own palettes, use Tailwind's or use color prop to generate at runtime

Generate your own palettes

Generate your own color palette like Tailwind. With the same properties as Tailwind color palettes.

This is the generated palette when you use the color directly on the color prop like <x-button color="#10B981">Hello</x-button>

Theme colors

Default theme color names and how to customize them.

The default theme color names are primary, secondary, success, warning and error. You can customize them or even add your own.

Customize the color prop, e.g. color="primary" on the UI initialization.

Allow you to use the Tailwind classes like text-primary-500, bg-primary-500, etc:

Tailwind Colors

Default tailwind color palettes.