Control Flow Components

Powerful components for conditional and list rendering

Show Component

Conditional rendering based on signal truthiness

Please log in

<Show when={user} fallback={<span>Please log in</span>}>
  {(u) => <span>Welcome, {u.name}!</span>}
</Show>

Switch / Match Pattern

Mutually exclusive conditional rendering using Show

Ready to start

<Show when={() => status.value === 'loading'}>
  {() => <Spinner />}
</Show>
<Show when={() => status.value === 'success'}>
  {() => <SuccessMessage />}
</Show>

For Component

Reactive list rendering with keyed reconciliation

Apple
Banana
Cherry

<For 
  each={items}
  keyExtractor={(item, i) => item.id}
  fallback={<Empty />}
>
  {(item, index) => <Item data={item.value} />}
</For>

Dynamic Styling

Reactive styles and classes with signals

Current: mint

<div style={() => ({
  backgroundColor: `var(--accent-${color.value})`,
  transition: 'background-color 0.3s ease',
})}>
  {color.value}
</div>

Repeat Component

Render content N times with index access and fallback support

Current count: 3

Item 1

Item 2

Item 3

<Repeat 
  times={count} 
  fallback={<EmptyState />}
>
  {(index) => <SkeletonCard index={index} />}
</Repeat>

Await Component

Declarative async rendering with pending, error, and success states

Loading user data...

<Await 
  promise={fetchUser(userId)}
  pending={<LoadingSpinner />}
  error={(err) => <ErrorState error={err} />}
>
  {(user) => <UserProfile user={user} />}
</Await>