State Boundary
Consistent handling of loading, error, empty, and success states.
Quickstart
- Ensure the registry is set up in Installation.
- Run the registry command:
npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/state-boundaryOverview
State Boundary standardizes async state rendering with accessible defaults. It works with React Query, SWR, or any async state shape that provides data, isLoading, and error.
Basic Usage
import {
StateBoundary,
LoadingSkeleton,
EmptyState,
ErrorState,
} from "@/components/systems/state/state-boundary"
<StateBoundary
state={query}
loading={<LoadingSkeleton variant="card" />}
empty={<EmptyState title="No users" description="Try adjusting your filters." />}
error={({ error, retry }) => <ErrorState error={error} onRetry={retry} />}
>
{({ data }) => <UserList users={data} />}
</StateBoundary>Loading Behavior
Use loadingDelay and minLoadingDuration to avoid UI flicker. To keep data visible during refetches, setkeepPreviousData.
<StateBoundary
state={query}
loadingDelay={150}
minLoadingDuration={400}
keepPreviousData
>
{({ data }) => <UserList users={data} />}
</StateBoundary>Custom Empty Logic
Provide isEmpty when your data needs a custom empty check.
<StateBoundary
state={query}
isEmpty={(data) => data.items.length === 0}
>
{({ data }) => <ItemGrid items={data.items} />}
</StateBoundary>API Reference
| Prop | Type | Notes |
|---|---|---|
| state | Async state | Supports React Query, SWR, custom |
| loading / empty / error | ReactNode | render prop | Override UI states |
| onRetry | () => void | Retry handler |
| loadingDelay / minLoadingDuration | number | Reduce flicker |
| keepPreviousData | boolean | Keep content during refetch |
| isEmpty | (data) => boolean | Custom empty logic |