For
Declarative JSX list rendering component with automatic empty state fallback.
1.1 KB
•Updated on September 3, 2026
Example 2: Interactive Product Catalog with Search
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/hooks-components-forUsage
Code
import { For } from '@/components/for'
import { For } from '@/components/for'```
```tsx
<For each={['A', 'B', 'C']} fallback={<p>Empty</p>}>
{(item, i) => <div key={i}>{item}</div>}
</For>API Reference
Parameters / Props
| Prop | Type | Default | Description |
|---|---|---|---|
each | T[]|null|undefined | required | Array to map. |
fallback | ReactNode | null | Empty state fallback. |
children | (item: T, index: number) => ReactNode | required | Item renderer. |
Return Value
| Return Type | Description |
|---|---|
ReactNode | Rendered list. |