Empty State

Polished placeholders for when content is missing. Designed to provide clarity and direct action for users.

Usage

Use Empty States to fill a screen when no data is available (e.g., initial setup, search with no results, or deleted items). Always include a clear "Call to Action" (CTA) to help users take the next step.

Content

Dashboard Placeholder

A standard empty state for a new project or collection.

No events found

You haven't created any events yet. Start by creating your first event to see it here.

Variations

Different icons for specific contexts.

Tracks

Collaborators

Spec

Border: 2px dashed #E5E5E5.
Background: #F8F8F8 at 50% opacity.
Icon Container: White background, subtle shadow, brand primary icon.
Typography: Title (2xl/bold), Description (muted-foreground, max-width 384px).
Button: Full brand primary style with 95% scaling on interaction.

Anatomy

DASHED CONTAINER