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
Showcase
Interactive previews of some mcoli-ui primitive, themed and ready to ship.
Text fields
mc-inputLabels, addons and inline validation.
We only send updates about new components.
This username is already taken.
At least 8 characters, one symbol.
Buttons
mc-buttonFour variants across the size scale.
Toggle
mc-switchAn accessible on and off control.
Push notifications
Get told when a new theme drops.
Select
mc-selectGrouped options with avatar previews.
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-*-50Gradients
--*-gradientNeutrals
--neutral-*Semantic
--success, --warning, --destructive, --infoTypography Scale
Precision-tracked fluid typography system
Headings
header-*Paragraphs
.paragraph-*Paragraph XL
20px / 30pxParagraph LG
18px / 28pxParagraph MD
16px / 24pxParagraph SM
14px / 20pxParagraph XS
12px / 18pxElevation & Shadows
Layer depth utilizing tailored box-shadow utilities
--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
--shadow-2xl
--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
SM
--radius-sm
MD
--radius-md
LG
--radius-lg
XL
--radius-xl
2XL
--radius-2xl
Element Blur
Standard blur filter utilities for foreground elements
None
blur-none
SM
var(--blur-sm)
MD
var(--blur-md)
LG
var(--blur-lg)
XL
var(--blur-xl)
Background Blur
Frosted glassmorphism utilities for surfaces and overlays
None
blur-none
SM
var(--blur-sm)
MD
var(--blur-md)
LG
var(--blur-lg)
XL
var(--blur-xl)