Utilities

Page scaffolding helpers and semantic border utilities.

Utility helpers

.flex-between

Project settings

Updated 2 minutes ago

<div class="flex-between rounded-lg border-muted bg-white px-4 py-3">
  <div>
    <h3 class="h5">Project settings</h3>
    <p class="text-sm text-secondary-400">Updated 2 minutes ago</p>
  </div>
  <button class="btn btn-secondary btn-sm">Edit</button>
</div>

.center-page

Centered card

Use for empty states, login views, and focused workflows.

<div class="center-page p-0">
  <div class="card card-sm">
    <div class="card-body">
      <h3 class="h4">Centered card</h3>
      <p class="mt-1 text-sm text-secondary-500">Use for empty states, login views, and focused workflows.</p>
    </div>
  </div>
</div>

.page-shell

Apply .page-shell to your app root so pages stretch to the viewport and keep footers pinned to the bottom.

<p class="text-sm text-secondary-500">
  Apply <code class="code">.page-shell</code> to your app root so pages stretch to the viewport and keep footers pinned to the bottom.
</p>

Borders

Semantic border colors — pair with Tailwind utilities for full component styling.

border-primary

border-secondary

border-muted

border-light

border-success

border-info

border-warning

border-danger

border-dark

<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-lg border-primary bg-white p-4 text-sm text-secondary-700">border-primary</div>
  <div class="rounded-lg border-secondary bg-white p-4 text-sm text-secondary-700">border-secondary</div>
  <div class="rounded-lg border-muted bg-white p-4 text-sm text-secondary-700">border-muted</div>
  <div class="rounded-lg border-light bg-white p-4 text-sm text-secondary-700">border-light</div>
  <div class="rounded-lg border-success bg-white p-4 text-sm text-secondary-700">border-success</div>
  <div class="rounded-lg border-info bg-white p-4 text-sm text-secondary-700">border-info</div>
  <div class="rounded-lg border-warning bg-white p-4 text-sm text-secondary-700">border-warning</div>
  <div class="rounded-lg border-danger bg-white p-4 text-sm text-secondary-700">border-danger</div>
  <div class="rounded-lg border-dark bg-white p-4 text-sm text-secondary-700">border-dark</div>
</div>