Logo

Component Blueprint

X: 1280 · Y: 720 · Grid: 8px

Empty

Composable empty states with media, title, description, actions, inputs, avatars, and RTL support.

01 Hero Preview

Grid: 8px · Scale: 1:1

No Projects Yet

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

Learn More

02 Usage

TS 

import { FrEmptyModule } from '@frame-ui-ng/components/empty';
import { FrButtonModule } from '@frame-ui-ng/components/button';

HTML 

<div frEmpty>
  <div frEmptyHeader>
    <div frEmptyMedia variant="icon">
      <ng-icon name="tablerFolderCode" />
    </div>
    <h3 frEmptyTitle>No data</h3>
    <p frEmptyDescription>No data found.</p>
  </div>
  <div frEmptyContent>
    <button frButton type="button">Add data</button>
  </div>
</div>

03 Examples

Outline

Use `variant="outline"` to create a bordered empty state.

Component Sheet

Grid: 8px · Scale: 1:1

Cloud Storage Empty

Upload files to your cloud storage to access them anywhere.

Background

Use `variant="soft"` or local token overrides to add a subtle background.

Component Sheet

Grid: 8px · Scale: 1:1

No Notifications

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

Avatar

Use EmptyMedia to display an avatar inside the empty state.

Component Sheet

Grid: 8px · Scale: 1:1

LR

User Offline

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

Avatar Group

Use EmptyMedia to display an avatar group when the empty state refers to people or teams.

Component Sheet

Grid: 8px · Scale: 1:1

CNLRER

No Team Members

Invite your team to collaborate on this project.

Input Group

Place inputs, search fields, or compact forms inside EmptyContent.

Component Sheet

Grid: 8px · Scale: 1:1

404 - Not Found

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

Need help? Contact support

RTL

Empty states inherit text direction from their container.

Component Sheet

Grid: 8px · Scale: 1:1

لا توجد مشاريع بعد

لم تقم بإنشاء أي مشاريع بعد. ابدأ بإنشاء مشروعك الأول.

تعرف على المزيد

05 Token Inspector

Inspect the empty state shell, header, media, title, description, and action content.

No Projects Yet

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

06 Design Tokens

Empty tokens style the root layout, media well, copy, and action spacing while leaving nested components like Button, Input, and Avatar to their own token contracts.

SCSS 


  --frame-empty-padding: 3rem 1.5rem;
  --frame-empty-gap: 1.5rem;
  --frame-empty-radius: var(--frame-radius-lg);
  --frame-empty-border: transparent;
  --frame-empty-bg: transparent;
  --frame-empty-color: var(--frame-foreground);
  --frame-empty-outline-border: var(--frame-border);
  --frame-empty-soft-bg: var(--frame-muted);
  --frame-empty-header-gap: 0.75rem;
  --frame-empty-content-gap: 0.75rem;
  --frame-empty-media-size: 3rem;
  --frame-empty-media-radius: var(--frame-radius-lg);
  --frame-empty-media-bg: var(--frame-muted);
  --frame-empty-media-color: var(--frame-muted-foreground);
  --frame-empty-media-icon-size: 1.5rem;
  --frame-empty-title-color: var(--frame-foreground);
  --frame-empty-title-font-size: 1rem;
  --frame-empty-title-font-weight: 600;
  --frame-empty-description-color: var(--frame-muted-foreground);
  --frame-empty-description-font-size: 0.875rem;
  --frame-empty-description-max-width: 32rem;