Eric's UI Kit Docs & Demo
Colors and Semantic Types

Several components within EUIKit use a type attribute to specify the type or color of the component. EUIKit supports a small, semantic set of types, the entire TailwindCSS palette, and an optional EUIKit "Extended Palette".

Some of these types are not necessarily appropriate for each component (for example, you probably wouldn't use an alert with a type of "delete") but they are supported.

EUIKit Basic Palette
type="danger" Danger Danger
type="delete"

Are you sure?

Delete Delete
type="error" Error Error
type="info" Info Info
type="primary" Primary Primary
type="success" Success Success
type="warning" Warning Warning
type="light" Light Light
type="dark" Dark Dark
type="link" Link Link
type="ghost" Ghost Ghost
Tailwind Palette

EUIKit supports the full Tailwind palette for any component that supports the type attribute:

type="red" Red Red
type="orange" Orange Orange
type="amber" Amber Amber
type="yellow" Yellow Yellow
type="lime" Lime Lime
type="green" Green Green
type="emerald" Emerald Emerald
type="teal" Teal Teal
type="cyan" Cyan Cyan
type="sky" Sky Sky
type="blue" Blue Blue
type="indigo" Indigo Indigo
type="violet" Violet Violet
type="purple" Purple Purple
type="fuchsia" Fuchsia Fuchsia
type="pink" Pink Pink
type="rose" Rose Rose
type="slate" Slate Slate
type="gray" Gray Gray
type="zinc" Zinc Zinc
type="neutral" Neutral Neutral
type="stone" Stone Stone
Extended Palette

EUIKit ships with an optional extended palette you can use in your apps, based on the 12-bit rainbow palette by Kate Morley.

To install this extended palette for use in your own apps, see the Extended Palette page.

type="plum" Plum Plum
type="mulberry" Mulberry Mulberry
type="coral" Coral Coral
type="tangerine" Tangerine Tangerine
type="sunflower" Sunflower Sunflower
type="grass" Grass Grass
type="jade" Jade Jade
type="turquoise" Turquoise Turquiose
type="electric" Electric Electric
type="cerulean" Cerulean Cerulean
type="sapphire" Sapphire Sapphire
type="amethyst" Amethyst Amethyst