Utilities Reference
Complete list of UC utility classes organized by category. All classes use the uc- prefix.
Responsive Variants
Mobile-first breakpoint prefixes. Classes without a prefix apply to all screen sizes.
| Prefix | Min Width | Description |
|---|---|---|
| uc-sm: | 640px | Small screens and up |
| uc-md: | 768px | Medium screens and up |
| uc-lg: | 1024px | Large screens and up |
Example: stack on mobile, row on md+
Column 1
Column 2
Column 3
class="uc-flex uc-flex-col uc-md:flex-row uc-gap-3"
State Variants
Apply styles conditionally based on element state.
| Prefix | Description | Example |
|---|---|---|
| uc-hover: | On mouse hover | uc-hover:bg-neutrals-subtle |
| uc-focus: | On focus | uc-focus:ring-2 uc-focus:ring-accents-blue |
| uc-focus-visible: | Keyboard focus only | uc-focus-visible:ring-2 |
| uc-disabled: | When disabled | uc-disabled:opacity-50 uc-disabled:cursor-not-allowed |
| uc-group-hover: | When parent .group is hovered | group uc-group-hover:text-fg-primary |
| uc-placeholder: | Placeholder text style | uc-placeholder:text-fg-disabled |
Dark Mode Variants
Prefix classes with uc-dark: to apply only when .dark is on <html>.
| Class | Description |
|---|---|
| uc-dark:hidden | Hide in dark mode |
| uc-dark:block | Show in dark mode |
| uc-dark:bg-constant-black/50 | Dark overlay |
Display
10 classes
| Class | CSS |
|---|---|
| uc-block | display: block |
| uc-inline-block | display: inline-block |
| uc-inline | display: inline |
| uc-flex | display: flex |
| uc-inline-flex | display: inline-flex |
| uc-grid | display: grid |
| uc-hidden | display: none |
| uc-table | display: table |
| uc-table-row | display: table-row |
| uc-table-cell | display: table-cell |
Position
10 classes
| Class | CSS |
|---|---|
| uc-static | position: static |
| uc-relative | position: relative |
| uc-absolute | position: absolute |
| uc-fixed | position: fixed |
| uc-sticky | position: sticky |
| uc-inset-0 | inset: 0 |
| uc-top-0 | top: 0 |
| uc-right-0 | right: 0 |
| uc-bottom-0 | bottom: 0 |
| uc-left-0 | left: 0 |
Flexbox
19 classes
| Class | CSS |
|---|---|
| uc-flex-row | flex-direction: row |
| uc-flex-col | flex-direction: column |
| uc-flex-wrap | flex-wrap: wrap |
| uc-flex-nowrap | flex-wrap: nowrap |
| uc-flex-1 | flex: 1 1 0% |
| uc-shrink-0 | flex-shrink: 0 |
| uc-grow | flex-grow: 1 |
| uc-items-start | align-items: flex-start |
| uc-items-center | align-items: center |
| uc-items-end | align-items: flex-end |
| uc-items-stretch | align-items: stretch |
| uc-items-baseline | align-items: baseline |
| uc-justify-start | justify-content: flex-start |
| uc-justify-center | justify-content: center |
| uc-justify-end | justify-content: flex-end |
| uc-justify-between | justify-content: space-between |
| uc-self-start | align-self: flex-start |
| uc-self-center | align-self: center |
| uc-self-end | align-self: flex-end |
Grid
9 classes
| Class | CSS |
|---|---|
| uc-grid-cols-1 | grid-template-columns: repeat(1, 1fr) |
| uc-grid-cols-2 | grid-template-columns: repeat(2, 1fr) |
| uc-grid-cols-3 | grid-template-columns: repeat(3, 1fr) |
| uc-grid-cols-4 | grid-template-columns: repeat(4, 1fr) |
| uc-grid-cols-6 | grid-template-columns: repeat(6, 1fr) |
| uc-grid-cols-12 | grid-template-columns: repeat(12, 1fr) |
| uc-col-span-2 | grid-column: span 2 / span 2 |
| uc-col-span-3 | grid-column: span 3 / span 3 |
| uc-col-span-full | grid-column: 1 / -1 |
Spacing (Padding)
11 classes
| Class | CSS |
|---|---|
| uc-p-0 | padding: 0 |
| uc-p-1 | padding: 0.25rem |
| uc-p-2 | padding: 0.5rem |
| uc-p-3 | padding: 0.75rem |
| uc-p-4 | padding: 1rem |
| uc-p-6 | padding: 1.5rem |
| uc-p-8 | padding: 2rem |
| uc-px-4 | padding-left/right: 1rem |
| uc-py-4 | padding-top/bottom: 1rem |
| uc-pt-4 | padding-top: 1rem |
| uc-pb-4 | padding-bottom: 1rem |
Spacing (Margin)
8 classes
| Class | CSS |
|---|---|
| uc-m-0 | margin: 0 |
| uc-m-auto | margin: auto |
| uc-mx-auto | margin-left/right: auto |
| uc-mt-4 | margin-top: 1rem |
| uc-mb-4 | margin-bottom: 1rem |
| uc-ml-2 | margin-left: 0.5rem |
| uc-mr-2 | margin-right: 0.5rem |
| uc--mt-1 | margin-top: -0.25rem |
Spacing (Gap)
8 classes
| Class | CSS |
|---|---|
| uc-gap-1 | gap: 0.25rem |
| uc-gap-2 | gap: 0.5rem |
| uc-gap-3 | gap: 0.75rem |
| uc-gap-4 | gap: 1rem |
| uc-gap-6 | gap: 1.5rem |
| uc-gap-8 | gap: 2rem |
| uc-gap-x-4 | column-gap: 1rem |
| uc-gap-y-4 | row-gap: 1rem |
Sizing
13 classes
| Class | CSS |
|---|---|
| uc-w-full | width: 100% |
| uc-w-auto | width: auto |
| uc-w-screen | width: 100vw |
| uc-h-full | height: 100% |
| uc-h-screen | height: 100vh |
| uc-min-h-screen | min-height: 100vh |
| uc-min-w-0 | min-width: 0 |
| uc-max-w-sm | max-width: 24rem |
| uc-max-w-md | max-width: 28rem |
| uc-max-w-lg | max-width: 32rem |
| uc-max-w-5xl | max-width: 64rem |
| uc-w-8 | width: 2rem |
| uc-h-8 | height: 2rem |
Typography
29 classes
| Class | CSS |
|---|---|
| uc-text-xs | font-size: 0.75rem |
| uc-text-sm | font-size: 0.875rem |
| uc-text-base | font-size: 1rem |
| uc-text-lg | font-size: 1.125rem |
| uc-text-xl | font-size: 1.25rem |
| uc-text-2xl | font-size: 1.5rem |
| uc-text-3xl | font-size: 1.875rem |
| uc-font-normal | font-weight: 400 |
| uc-font-medium | font-weight: 500 |
| uc-font-semibold | font-weight: 600 |
| uc-font-bold | font-weight: 700 |
| uc-text-left | text-align: left |
| uc-text-center | text-align: center |
| uc-text-right | text-align: right |
| uc-uppercase | text-transform: uppercase |
| uc-lowercase | text-transform: lowercase |
| uc-capitalize | text-transform: capitalize |
| uc-tracking-tight | letter-spacing: -0.025em |
| uc-tracking-wider | letter-spacing: 0.05em |
| uc-leading-none | line-height: 1 |
| uc-leading-tight | line-height: 1.25 |
| uc-leading-normal | line-height: 1.5 |
| uc-leading-relaxed | line-height: 1.625 |
| uc-font-mono | font-family: monospace |
| uc-truncate | overflow: hidden; text-overflow: ellipsis; white-space: nowrap |
| uc-line-clamp-2 | -webkit-line-clamp: 2 |
| uc-whitespace-nowrap | white-space: nowrap |
| uc-no-underline | text-decoration: none |
| uc-underline | text-decoration: underline |
Colors (Text)
10 classes
| Class | CSS |
|---|---|
| uc-text-fg-primary | color: hsl(var(--fg-primary)) |
| uc-text-fg-secondary | color: hsl(var(--fg-secondary)) |
| uc-text-fg-tertiary | color: hsl(var(--fg-tertiary)) |
| uc-text-fg-disabled | color: hsl(var(--fg-disabled)) |
| uc-text-accents-blue | color: hsl(var(--accents-blue)) |
| uc-text-accents-green | color: hsl(var(--accents-green)) |
| uc-text-accents-red | color: hsl(var(--accents-red)) |
| uc-text-accents-orange | color: hsl(var(--accents-orange)) |
| uc-text-constant-white | color: hsl(var(--constant-white)) |
| uc-text-constant-black | color: hsl(var(--constant-black)) |
Colors (Background)
16 classes
| Class | CSS |
|---|---|
| uc-bg-neutrals-background | background: hsl(var(--neutrals-background)) |
| uc-bg-neutrals-surface | background: hsl(var(--neutrals-surface)) |
| uc-bg-neutrals-subtle | background: hsl(var(--neutrals-subtle)) |
| uc-bg-neutrals-muted | background: hsl(var(--neutrals-muted)) |
| uc-bg-neutrals-emphasis | background: hsl(var(--neutrals-emphasis)) |
| uc-bg-accents-blue | background: hsl(var(--accents-blue)) |
| uc-bg-accents-green | background: hsl(var(--accents-green)) |
| uc-bg-accents-red | background: hsl(var(--accents-red)) |
| uc-bg-accents-orange | background: hsl(var(--accents-orange)) |
| uc-bg-tint-blue | background: hsl(var(--tint-blue)) |
| uc-bg-tint-green | background: hsl(var(--tint-green)) |
| uc-bg-tint-red | background: hsl(var(--tint-red)) |
| uc-bg-tint-orange | background: hsl(var(--tint-orange)) |
| uc-bg-constant-white | background: hsl(var(--constant-white)) |
| uc-bg-constant-black | background: hsl(var(--constant-black)) |
| uc-bg-transparent | background: transparent |
Borders
15 classes
| Class | CSS |
|---|---|
| uc-border | border-width: 1px |
| uc-border-0 | border-width: 0 |
| uc-border-2 | border-width: 2px |
| uc-border-t | border-top-width: 1px |
| uc-border-b | border-bottom-width: 1px |
| uc-border-border-default | border-color: hsl(var(--border-default)) |
| uc-border-border-strong | border-color: hsl(var(--border-strong)) |
| uc-border-transparent | border-color: transparent |
| uc-rounded-sm | border-radius: var(--radius-sm) |
| uc-rounded-lg | border-radius: var(--radius-lg) |
| uc-rounded-xl | border-radius: var(--radius-xl) |
| uc-rounded-2xl | border-radius: var(--radius-2xl) |
| uc-rounded-full | border-radius: 9999px |
| uc-divide-y | border-top on children |
| uc-divide-border-default | divide color: hsl(var(--border-default)) |
Shadows
6 classes
| Class | CSS |
|---|---|
| uc-shadow-sm | box-shadow: var(--shadow-sm) |
| uc-shadow | box-shadow: var(--shadow) |
| uc-shadow-md | box-shadow: var(--shadow-md) |
| uc-shadow-lg | box-shadow: var(--shadow-lg) |
| uc-shadow-xl | box-shadow: var(--shadow-xl) |
| uc-shadow-none | box-shadow: none |
Ring (Focus)
5 classes
| Class | CSS |
|---|---|
| uc-ring-1 | box-shadow ring: 1px |
| uc-ring-2 | box-shadow ring: 2px |
| uc-ring-accents-blue | ring color: blue |
| uc-ring-accents-red | ring color: red |
| uc-ring-offset-2 | ring offset: 2px |
Opacity
6 classes
| Class | CSS |
|---|---|
| uc-opacity-0 | opacity: 0 |
| uc-opacity-25 | opacity: 0.25 |
| uc-opacity-50 | opacity: 0.5 |
| uc-opacity-75 | opacity: 0.75 |
| uc-opacity-90 | opacity: 0.9 |
| uc-opacity-100 | opacity: 1 |
Transforms
9 classes
| Class | CSS |
|---|---|
| uc-translate-x-0 | --uc-translate-x: 0 |
| uc-translate-x-full | --uc-translate-x: 100% |
| uc--translate-x-full | --uc-translate-x: -100% |
| uc--translate-y-1/2 | --uc-translate-y: -50% |
| uc-rotate-90 | --uc-rotate: 90deg |
| uc-rotate-180 | --uc-rotate: 180deg |
| uc-scale-95 | --uc-scale-x/y: 0.95 |
| uc-scale-100 | --uc-scale-x/y: 1 |
| uc-scale-105 | --uc-scale-x/y: 1.05 |
Transitions & Animation
12 classes
| Class | CSS |
|---|---|
| uc-transition-colors | transition: color, background, border |
| uc-transition-opacity | transition: opacity |
| uc-transition-transform | transition: transform |
| uc-transition-shadow | transition: box-shadow |
| uc-transition-all | transition: all |
| uc-duration-150 | transition-duration: 150ms |
| uc-duration-200 | transition-duration: 200ms |
| uc-duration-300 | transition-duration: 300ms |
| uc-ease-in-out | transition-timing: ease-in-out |
| uc-animate-spin | animation: spin 1s linear infinite |
| uc-animate-pulse | animation: pulse 2s ease infinite |
| uc-animate-ping | animation: ping 1s ease infinite |
Overflow & Cursor
9 classes
| Class | CSS |
|---|---|
| uc-overflow-hidden | overflow: hidden |
| uc-overflow-auto | overflow: auto |
| uc-overflow-x-auto | overflow-x: auto |
| uc-overflow-y-auto | overflow-y: auto |
| uc-cursor-pointer | cursor: pointer |
| uc-cursor-not-allowed | cursor: not-allowed |
| uc-cursor-default | cursor: default |
| uc-select-none | user-select: none |
| uc-pointer-events-none | pointer-events: none |
Z-Index
7 classes
| Class | CSS |
|---|---|
| uc-z-0 | z-index: 0 |
| uc-z-10 | z-index: 10 |
| uc-z-20 | z-index: 20 |
| uc-z-30 | z-index: 30 |
| uc-z-40 | z-index: 40 |
| uc-z-50 | z-index: 50 |
| uc-z-100 | z-index: 100 |
Backdrop Blur
6 classes
| Class | CSS |
|---|---|
| uc-backdrop-blur-none | backdrop-filter: blur(0) |
| uc-backdrop-blur-sm | backdrop-filter: blur(4px) |
| uc-backdrop-blur | backdrop-filter: blur(8px) |
| uc-backdrop-blur-md | backdrop-filter: blur(12px) |
| uc-backdrop-blur-lg | backdrop-filter: blur(16px) |
| uc-backdrop-blur-xl | backdrop-filter: blur(24px) |