nalarx-uiComponents
Empty state
The guiding "nothing here yet" block, and its failure twin.
bunx shadcn@latest add @nalarx/empty-stateUsage
Use it when a screen exists but the user has nothing in it yet. Say what is empty in one line, what they can do in one plain sentence, and offer the first step.
<EmptyState
icon="bell"
title="Nothing here yet"
description="Create your first item to see it in this list."
primaryAction={{ label: "Create", onClick: create }}
secondaryAction={{ label: "Learn more", href: "/docs/alerts" }}
linkComponent={Link}
/>The panel form (fills its container), a framed list form, a compact one, and ErrorState:
Could not load members
The server did not answer in time.
Could not load members
The server did not answer in time.
Props
| Prop | Type | |
|---|---|---|
icon | IconName | Default inbox. The tile is always neutral. |
title | string | |
description | ReactNode | |
primaryAction, secondaryAction | { label, onClick?, href? } | Accent and default buttons; href renders a link. |
action | ReactNode | Your own action instead of primaryAction. |
secondary | ReactNode | A quieter line under the actions. |
framed | boolean | Dashed sunken frame, for an empty list inside a section. |
compact | boolean | Smaller tile and title. |
linkComponent | ElementType | Renders href actions, e.g. Next.js Link. |
ErrorState takes title, description, onRetry, retryLabel (default: the retry string) and compact; it is a role="alert" box.
Replaces
EmptyState.tsx (web), the Platform's base/EmptyState.tsx and NxEmptyState / NxErrorState.