Ship professional themed UIs,
faster than ever.

Mcoli UI is a premium component registry and theming engine. Copy, paste, and customize accessible components directly into your applications.

Get Started GitHub

npx mcoli-ui@latest init

The Variable Anatomy

Every single semantic variable mapped. Change the theme in the navigation bar to see the entire grid adapt instantly with perfect contrast ratios.

Base UI

--background & --surface

--input--ring

Action States

--primary

--secondary

--accent

--muted

Semantic States

Completed--success

Warning--warning

Destructive--destructive

Info--info

Elevation & Surfaces

--card & --card-foreground

Standard Card

Base elevation for standard content blocks.

--popover & --popover-foreground

Dropdown Menu

Highest elevation for floating elements.

Data & Sidebar

--chart-1 to --chart-5

--sidebar (bg & text)

--sidebar-primary

--sidebar-accent

Color Palette

The comprehensive color system powering the theme engine.

Blue Primary

--blue-primary-*

Purple Secondary

--purple-secondary-*

Gray

--gray-*

Gray Blue

--gray-blue-*

Baby Blue

--baby-blue-*

Pink

--pink-*

Cyan

--cyan-*

Orange

--orange-*

Flashy Green

--flashy-green-*

Green

--green-*

Red

--red-*

Yellow

--yellow-*

Accents

accent-*-50

Gradients

--*-gradient

Neutrals

--neutral-*

Semantic

--success, --warning, --destructive, --info

Success

Warning

Error

Info

Typography Scale

Precision-tracked fluid typography system.

Headings

header-*

Header XL

Header LG

Header MD

Header SM

Header XS

Paragraphs

.paragraph-*

Paragraph XL

20px / 30px

Paragraph LG

18px / 28px

Paragraph MD

16px / 24px

Paragraph SM

14px / 20px

Paragraph XS

12px / 18px

Elevation & Shadows

Layer depth utilizing tailored box-shadow utilities.

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

2XL

--shadow-2xl

3XL

--shadow-3xl

Stroke Widths

Border thickness scale for component boundaries.

0.5px

border-[0.5px]

1px

border

1.5px

border-[1.5px]

2px

border-[2px]

Border Radius

Consistent curvature mapped to CSS variables.

--radius-sm

--radius-md

--radius-lg

--radius-xl

2XL

--radius-2xl

Element Blur

Standard blur filter utilities for foreground elements.

None

blur-none

var(--blur-sm)

var(--blur-md)

var(--blur-lg)

var(--blur-xl)

Background Blur

Frosted glassmorphism utilities for surfaces and overlays.