> ## Documentation Index
> Fetch the complete documentation index at: https://blacksilva.com/silva-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Recipes

> Practical composition patterns for common screens.

# Recipes

## Settings row

Use layout primitives and a `Switch` to create a compact, readable preference row.

```tsx theme={null}
<XStack p="medium" alignItems="center" justifyContent="space-between" bg="card" borderRadius="medium">
  <YStack gap="xs">
    <Text fontWeight="medium">Email notifications</Text>
    <Text fontSize="sm" color="muted">Receive a summary of account activity.</Text>
  </YStack>
  <Switch name="email-notifications" defaultChecked />
</XStack>
```

## Empty state

```tsx theme={null}
<YStack p="2xl" gap="medium" alignItems="center" textAlign="center" bg="card" borderRadius="large">
  <Heading level={2}>No projects yet</Heading>
  <Paragraph color="muted">Create your first project to get started.</Paragraph>
  <Button>Create project</Button>
</YStack>
```

## Controlled toast region

```tsx theme={null}
<ToastProvider position="top-right">
  {saved && (
    <Toast variant="success">
      <ToastTitle>Changes saved</ToastTitle>
      <ToastDescription>Your profile is up to date.</ToastDescription>
      <ToastClose onClick={() => setSaved(false)}>Close</ToastClose>
    </Toast>
  )}
</ToastProvider>
```

## Theme preview

```tsx theme={null}
<XStack gap="medium" flexWrap="wrap">
  {["light", "dark", "emerald", "midnight"].map((name) => (
    <Theme name={name}>
      <Card p="medium" minWidth="48" bg="card">
        <Text color="primary" fontWeight="semibold">{name}</Text>
        <Text color="muted" fontSize="sm">Theme-aware token preview</Text>
      </Card>
    </Theme>
  ))}
</XStack>
```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.