Components/Surfaces/Empty
COMPONENT29.29

Empty

Empty state for searches, lists and dashboards — media slot, title, muted description and action in a centered column.

INSTALL

1pnpm dlx @sayagodev/mo add empty

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/empty.css";

EXAMPLES

Demo
No projects yet

You haven't created any projects yet. Get started by creating your first project.

Outline
Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

In a card
No projects yet

You haven't created any projects yet. Get started by creating your first project.

Avatar media
@shadcn
User Offline

This user is currently offline. You can leave a message to notify them or try again later.

Avatar group
@shadcn CN
@maxleiter ML
@evilrabbit ER
No Team Members

Invite your team to collaborate on this project.

With input group
404 - Not Found

The page you're looking for doesn't exist. Try searching for what you need below.

/

Need help? Contact support

Muted background
No Notifications

You're all caught up. New notifications will appear here.

USAGE

1<div data-empty>2  <div data-empty-header>3    <div data-empty-media data-variant="icon">4      <svg … />5    </div>6    <div data-empty-title>No projects yet</div>7    <p data-empty-description>Get started by creating your first project.</p>8  </div>9  <div data-empty-content>10    <button type="button">Create project</button>11  </div>12</div>

API

NAMEKINDDESCRIPTION
[data-empty]attributeCentered flex column, dashed border style, p-6 → p-12
[data-variant]attributeoutline (visible dashed hairline) · muted surface
[data-empty-media]attributeSlot; data-variant="icon|image" sizes it
[data-empty-title] / [data-empty-description]attributeHeading and muted supporting text
[data-empty-content]attributeActions area below the header
--mo-empty-padding / -padding-mdtokenContainer padding (mobile → desktop)
--mo-empty-gap / -radiustokenVertical rhythm and corner radius
--mo-empty-border-width / -border-colortokenDashed hairline weight and colour (currentColor default)
--mo-empty-header-max-width / -content-max-widthtokenText and actions max width
--mo-empty-media-icon-size / -icon-radius / -icon-svg-size / -image-sizetokenMedia slot geometry (icon tile vs image thumb)

FILES

src/css/empty.css
Install:mo add empty

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Tokens & hooks — edit live
Global tokens
--foreground--muted--muted-foreground--primary--radius
Component hooks
--mo-empty-border-color--mo-empty-border-width--mo-empty-content-max-width--mo-empty-gap--mo-empty-header-max-width--mo-empty-media-icon-radius--mo-empty-media-icon-size--mo-empty-media-icon-svg-size--mo-empty-media-image-size--mo-empty-padding--mo-empty-padding-md--mo-empty-radius

Preview

◻
No modules yet

Clip your first module into the rail to begin.

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.