Empty — Componentes

Comparación entre la versión Astro (Saastro) y React (shadcn/ui)

🚀 saastro/ui (Astro)

No results found

Try adjusting your search or filter to find what you're looking for.

⚛️ shadcn/ui (React)

Installation

pnpm dlx saastro add empty

Development (local registry):

cd apps/ui
REGISTRY_URL=http://localhost:3456/r node ../../packages/saastro/dist/index.js add empty --yes

Usage

---
import {
  Empty,
  EmptyHeader,
  EmptyMedia,
  EmptyTitle,
  EmptyDescription,
} from "@/components/ui-saastro/empty"
---

<Empty class="border">
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <!-- Icon here -->
    </EmptyMedia>
    <EmptyTitle>No results found</EmptyTitle>
    <EmptyDescription>Try adjusting your search.</EmptyDescription>
  </EmptyHeader>
</Empty>

Components

Empty - The main container
EmptyHeader - Header section with title and description
EmptyMedia - Icon/image container with variants
EmptyTitle - The title text
EmptyDescription - The description text
EmptyContent - Additional content section

Props

EmptyMedia

Prop	Type	Default	Description
`variant`	`"default" \| "icon"`	`"default"`	Visual style of the media container
`class`	`string`	-	Additional CSS classes

Accessibility

Centered text with balanced line wrapping
Semantic structure with title and description
Proper spacing for readability