Utilities
Layout classes for the space around components — how they are named, the prefixes that make them responsive or stateful, and every class in one searchable list.
Class Naming
Every class carries the vt- prefix, so Veritheme sits next to any other framework without collisions.
| Class | What it is | Kind |
|---|---|---|
vt-flex |
display: flex | Utility |
vt-p-4 |
padding: 1rem | Utility |
vt-text-foreground-primary |
color: hsl(var(--vt-foreground-primary)) | Utility |
vt-btn vt-btn-primary |
A component and its variant | Component |
vt-hover:bg-surface-subtle |
A state variant | Variant |
vt-md:flex-row |
A responsive variant | Variant |
Utilities lay out components; they do not restyle them — a button's size or color comes from its variant class. See Design Principles.
Prefixes
Put a prefix in front of any utility. Breakpoints are mobile-first; prefixes combine, as in vt-md:hover:bg-surface-subtle.
| Prefix | Applies | Example | Kind |
|---|---|---|---|
vt-sm: |
Small screens and up (640px) | vt-sm:flex-row | Breakpoint |
vt-md: |
Medium screens and up (768px) | vt-md:flex-row | Breakpoint |
vt-lg: |
Large screens and up (1024px) | vt-lg:flex-row | Breakpoint |
vt-hover: |
On mouse hover | vt-hover:bg-surface-subtle | State |
vt-focus: |
On focus | vt-focus:ring-2 vt-focus:ring-info-fill | State |
vt-focus-visible: |
Keyboard focus only | vt-focus-visible:ring-2 | State |
vt-disabled: |
When disabled | vt-disabled:opacity-50 vt-disabled:cursor-not-allowed | State |
vt-group-hover: |
When a parent .vt-group is hovered | vt-group-hover:opacity-100 | State |
vt-placeholder: |
Placeholder text style | vt-placeholder:text-foreground-muted | State |
vt-dark: |
When .dark is on <html> | vt-dark:hidden | Mode |
Reference
199 classes. Search by class or by the CSS it sets.
| Class | CSS | Group |
|---|---|---|
vt-block |
display: block | Display |
vt-inline-block |
display: inline-block | Display |
vt-inline |
display: inline | Display |
vt-flex |
display: flex | Display |
vt-inline-flex |
display: inline-flex | Display |
vt-grid |
display: grid | Display |
vt-hidden |
display: none | Display |
vt-table |
display: table | Display |
vt-table-row |
display: table-row | Display |
vt-table-cell |
display: table-cell | Display |
vt-static |
position: static | Position |
vt-relative |
position: relative | Position |
vt-absolute |
position: absolute | Position |
vt-fixed |
position: fixed | Position |
vt-sticky |
position: sticky | Position |
vt-inset-0 |
inset: 0 | Position |
vt-top-0 |
top: 0 | Position |
vt-right-0 |
right: 0 | Position |
vt-bottom-0 |
bottom: 0 | Position |
vt-left-0 |
left: 0 | Position |
vt-flex-row |
flex-direction: row | Flexbox |
vt-flex-col |
flex-direction: column | Flexbox |
vt-flex-wrap |
flex-wrap: wrap | Flexbox |
vt-flex-1 |
flex: 1 1 0% | Flexbox |
vt-shrink-0 |
flex-shrink: 0 | Flexbox |
vt-items-start |
align-items: flex-start | Flexbox |
vt-items-center |
align-items: center | Flexbox |
vt-items-end |
align-items: flex-end | Flexbox |
vt-items-baseline |
align-items: baseline | Flexbox |
vt-justify-start |
justify-content: flex-start | Flexbox |
vt-justify-center |
justify-content: center | Flexbox |
vt-justify-end |
justify-content: flex-end | Flexbox |
vt-justify-between |
justify-content: space-between | Flexbox |
vt-self-center |
align-self: center | Flexbox |
vt-grid-cols-1 |
grid-template-columns: repeat(1, 1fr) | Grid |
vt-grid-cols-2 |
grid-template-columns: repeat(2, 1fr) | Grid |
vt-grid-cols-3 |
grid-template-columns: repeat(3, 1fr) | Grid |
vt-grid-cols-4 |
grid-template-columns: repeat(4, 1fr) | Grid |
vt-grid-cols-6 |
grid-template-columns: repeat(6, 1fr) | Grid |
vt-grid-cols-12 |
grid-template-columns: repeat(12, 1fr) | Grid |
vt-col-span-2 |
grid-column: span 2 / span 2 | Grid |
vt-col-span-3 |
grid-column: span 3 / span 3 | Grid |
vt-col-span-full |
grid-column: 1 / -1 | Grid |
vt-p-0 |
padding: 0 | Spacing (Padding) |
vt-p-1 |
padding: 0.25rem | Spacing (Padding) |
vt-p-2 |
padding: 0.5rem | Spacing (Padding) |
vt-p-3 |
padding: 0.75rem | Spacing (Padding) |
vt-p-4 |
padding: 1rem | Spacing (Padding) |
vt-p-6 |
padding: 1.5rem | Spacing (Padding) |
vt-p-8 |
padding: 2rem | Spacing (Padding) |
vt-px-4 |
padding-left/right: 1rem | Spacing (Padding) |
vt-py-4 |
padding-top/bottom: 1rem | Spacing (Padding) |
vt-pt-4 |
padding-top: 1rem | Spacing (Padding) |
vt-pb-4 |
padding-bottom: 1rem | Spacing (Padding) |
vt-m-0 |
margin: 0 | Spacing (Margin) |
vt-mx-auto |
margin-left/right: auto | Spacing (Margin) |
vt-mt-4 |
margin-top: 1rem | Spacing (Margin) |
vt-mb-4 |
margin-bottom: 1rem | Spacing (Margin) |
vt-ml-2 |
margin-left: 0.5rem | Spacing (Margin) |
vt-mr-2 |
margin-right: 0.5rem | Spacing (Margin) |
vt--mt-1 |
margin-top: -0.25rem | Spacing (Margin) |
vt-gap-1 |
gap: 0.25rem | Spacing (Gap) |
vt-gap-2 |
gap: 0.5rem | Spacing (Gap) |
vt-gap-3 |
gap: 0.75rem | Spacing (Gap) |
vt-gap-4 |
gap: 1rem | Spacing (Gap) |
vt-gap-6 |
gap: 1.5rem | Spacing (Gap) |
vt-gap-8 |
gap: 2rem | Spacing (Gap) |
vt-gap-x-4 |
column-gap: 1rem | Spacing (Gap) |
vt-gap-y-4 |
row-gap: 1rem | Spacing (Gap) |
vt-w-full |
width: 100% | Sizing |
vt-w-auto |
width: auto | Sizing |
vt-h-full |
height: 100% | Sizing |
vt-h-screen |
height: 100vh | Sizing |
vt-min-h-screen |
min-height: 100vh | Sizing |
vt-min-w-0 |
min-width: 0 | Sizing |
vt-max-w-sm |
max-width: 24rem | Sizing |
vt-max-w-md |
max-width: 28rem | Sizing |
vt-max-w-lg |
max-width: 32rem | Sizing |
vt-max-w-5xl |
max-width: 64rem | Sizing |
vt-w-8 |
width: 2rem | Sizing |
vt-h-8 |
height: 2rem | Sizing |
vt-text-xs |
font-size: 0.75rem | Typography |
vt-text-sm |
font-size: 0.875rem | Typography |
vt-text-base |
font-size: 1rem | Typography |
vt-text-lg |
font-size: 1.125rem | Typography |
vt-text-xl |
font-size: 1.25rem | Typography |
vt-text-2xl |
font-size: 1.5rem | Typography |
vt-text-3xl |
font-size: 1.875rem | Typography |
vt-font-normal |
font-weight: 400 | Typography |
vt-font-medium |
font-weight: 500 | Typography |
vt-font-semibold |
font-weight: 600 | Typography |
vt-font-bold |
font-weight: 700 | Typography |
vt-text-left |
text-align: left | Typography |
vt-text-center |
text-align: center | Typography |
vt-text-right |
text-align: right | Typography |
vt-uppercase |
text-transform: uppercase | Typography |
vt-lowercase |
text-transform: lowercase | Typography |
vt-capitalize |
text-transform: capitalize | Typography |
vt-tracking-tight |
letter-spacing: -0.025em | Typography |
vt-tracking-wider |
letter-spacing: 0.05em | Typography |
vt-leading-none |
line-height: 1 | Typography |
vt-leading-tight |
line-height: 1.25 | Typography |
vt-leading-relaxed |
line-height: 1.625 | Typography |
vt-font-mono |
font-family: monospace | Typography |
vt-truncate |
overflow: hidden; text-overflow: ellipsis; white-space: nowrap | Typography |
vt-whitespace-nowrap |
white-space: nowrap | Typography |
vt-no-underline |
text-decoration: none | Typography |
vt-underline |
text-decoration: underline | Typography |
vt-text-foreground-primary |
color: hsl(var(--vt-foreground-primary)) | Colors (Text) |
vt-text-foreground-secondary |
color: hsl(var(--vt-foreground-secondary)) | Colors (Text) |
vt-text-foreground-muted |
color: hsl(var(--vt-foreground-muted)) | Colors (Text) |
vt-text-foreground-disabled |
color: hsl(var(--vt-foreground-disabled)) | Colors (Text) |
vt-text-info-fill |
color: hsl(var(--vt-info-fill)) | Colors (Text) |
vt-text-success-fill |
color: hsl(var(--vt-success-fill)) | Colors (Text) |
vt-text-error-fill |
color: hsl(var(--vt-error-fill)) | Colors (Text) |
vt-text-warning-fill |
color: hsl(var(--vt-warning-fill)) | Colors (Text) |
vt-text-generic-white |
color: hsl(var(--vt-generic-white)) | Colors (Text) |
vt-text-generic-black |
color: hsl(var(--vt-generic-black)) | Colors (Text) |
vt-bg-surface-page |
background: hsl(var(--vt-surface-page)) | Colors (Background) |
vt-bg-surface-card |
background: hsl(var(--vt-surface-card)) | Colors (Background) |
vt-bg-surface-subtle |
background: hsl(var(--vt-surface-subtle)) | Colors (Background) |
vt-bg-surface-moderate |
background: hsl(var(--vt-surface-moderate)) | Colors (Background) |
vt-bg-surface-strong |
background: hsl(var(--vt-surface-strong)) | Colors (Background) |
vt-bg-info-fill |
background: hsl(var(--vt-info-fill)) | Colors (Background) |
vt-bg-success-fill |
background: hsl(var(--vt-success-fill)) | Colors (Background) |
vt-bg-error-fill |
background: hsl(var(--vt-error-fill)) | Colors (Background) |
vt-bg-warning-fill |
background: hsl(var(--vt-warning-fill)) | Colors (Background) |
vt-bg-info-surface |
background: hsl(var(--vt-info-surface)) | Colors (Background) |
vt-bg-error-surface |
background: hsl(var(--vt-error-surface)) | Colors (Background) |
vt-bg-warning-surface |
background: hsl(var(--vt-warning-surface)) | Colors (Background) |
vt-bg-generic-white |
background: hsl(var(--vt-generic-white)) | Colors (Background) |
vt-bg-generic-black |
background: hsl(var(--vt-generic-black)) | Colors (Background) |
vt-bg-transparent |
background: transparent | Colors (Background) |
vt-border |
border-width: 1px | Borders |
vt-border-0 |
border-width: 0 | Borders |
vt-border-2 |
border-width: 2px | Borders |
vt-border-t |
border-top-width: 1px | Borders |
vt-border-b |
border-bottom-width: 1px | Borders |
vt-border-border-default |
border-color: hsl(var(--vt-border-default)) | Borders |
vt-border-border-strong |
border-color: hsl(var(--vt-border-strong)) | Borders |
vt-border-transparent |
border-color: transparent | Borders |
vt-rounded-sm |
border-radius: var(--vt-radius-sm) | Borders |
vt-rounded-md |
border-radius: var(--vt-radius-md) | Borders |
vt-rounded-lg |
border-radius: var(--vt-radius-lg) | Borders |
vt-rounded-2xl |
border-radius: var(--vt-radius-2xl) | Borders |
vt-rounded-full |
border-radius: 9999px | Borders |
vt-divide-y |
border-top on children | Borders |
vt-divide-border-default |
divide color: hsl(var(--vt-border-default)) | Borders |
vt-shadow-sm |
box-shadow: var(--vt-shadow-sm) | Shadows |
vt-shadow |
box-shadow: var(--shadow) | Shadows |
vt-shadow-md |
box-shadow: var(--vt-shadow-md) | Shadows |
vt-shadow-lg |
box-shadow: var(--vt-shadow-lg) | Shadows |
vt-shadow-xl |
box-shadow: var(--vt-shadow-xl) | Shadows |
vt-shadow-none |
box-shadow: none | Shadows |
vt-ring-2 |
box-shadow ring: 2px | Ring (Focus) |
vt-ring-info-fill |
ring color: blue | Ring (Focus) |
vt-ring-offset-2 |
ring offset: 2px | Ring (Focus) |
vt-opacity-0 |
opacity: 0 | Opacity |
vt-opacity-25 |
opacity: 0.25 | Opacity |
vt-opacity-50 |
opacity: 0.5 | Opacity |
vt-opacity-75 |
opacity: 0.75 | Opacity |
vt-opacity-90 |
opacity: 0.9 | Opacity |
vt-translate-x-0 |
--vt-translate-x: 0 | Transforms |
vt-translate-x-full |
--vt-translate-x: 100% | Transforms |
vt--translate-x-full |
--vt-translate-x: -100% | Transforms |
vt--translate-y-1/2 |
--vt-translate-y: -50% | Transforms |
vt-rotate-90 |
--vt-rotate: 90deg | Transforms |
vt-rotate-180 |
--vt-rotate: 180deg | Transforms |
vt-transition-colors |
transition: color, background, border | Transitions & Animation |
vt-transition-opacity |
transition: opacity | Transitions & Animation |
vt-transition-transform |
transition: transform | Transitions & Animation |
vt-transition-shadow |
transition: box-shadow | Transitions & Animation |
vt-transition-all |
transition: all | Transitions & Animation |
vt-duration-200 |
transition-duration: 200ms | Transitions & Animation |
vt-duration-300 |
transition-duration: 300ms | Transitions & Animation |
vt-ease-in-out |
transition-timing: ease-in-out | Transitions & Animation |
vt-animate-spin |
animation: spin 1s linear infinite | Transitions & Animation |
vt-animate-pulse |
animation: pulse 2s ease infinite | Transitions & Animation |
vt-animate-ping |
animation: ping 1s ease infinite | Transitions & Animation |
vt-overflow-hidden |
overflow: hidden | Overflow & Cursor |
vt-overflow-auto |
overflow: auto | Overflow & Cursor |
vt-overflow-x-auto |
overflow-x: auto | Overflow & Cursor |
vt-overflow-y-auto |
overflow-y: auto | Overflow & Cursor |
vt-cursor-pointer |
cursor: pointer | Overflow & Cursor |
vt-cursor-not-allowed |
cursor: not-allowed | Overflow & Cursor |
vt-select-none |
user-select: none | Overflow & Cursor |
vt-pointer-events-none |
pointer-events: none | Overflow & Cursor |
vt-z-0 |
z-index: 0 | Z-Index |
vt-z-10 |
z-index: 10 | Z-Index |
vt-z-20 |
z-index: 20 | Z-Index |
vt-z-30 |
z-index: 30 | Z-Index |
vt-z-40 |
z-index: 40 | Z-Index |
vt-z-50 |
z-index: 50 | Z-Index |
vt-backdrop-blur-none |
backdrop-filter: blur(0) | Backdrop Blur |
vt-backdrop-blur-sm |
backdrop-filter: blur(4px) | Backdrop Blur |
vt-backdrop-blur |
backdrop-filter: blur(8px) | Backdrop Blur |
vt-backdrop-blur-md |
backdrop-filter: blur(12px) | Backdrop Blur |
vt-backdrop-blur-lg |
backdrop-filter: blur(16px) | Backdrop Blur |
vt-backdrop-blur-xl |
backdrop-filter: blur(24px) | Backdrop Blur |
No utility matches. Try part of a class name or a CSS property.