Back to Design
Layer 3 — Primitives
Material UI Primitives
Pure CSS reusable visual building blocks evaluated natively inside the engine. Contains zero client-side JavaScript.
Elements
Buttons & Badges
Shorthand markup utility bindings for brand badges and buttons.
Active Spec
Done
HTML Markup
<button class="button button-brand">Action</button> <span class="badge badge-brand">Active</span> <span class="badge badge-success">Done</span>
Surfaces
Cards & Containers
Flex column panels that automatically respond to background raises, dark mode configurations, and borders highlight states.
Visual Card Box
Inherits JIT theme borders and scale elevations.
HTML Card Markup
<div class="card card-hover p-6 bg-white dark:bg-zinc-900"> <h3 class="card-title text-base font-bold">Title</h3> <p class="card-text text-xs text-zinc-500">Details</p> </div>
