### Installation and Basic Setup

Source: https://context7.com/umami-software/react-zen/llms.txt

Install the React Zen library and import global styles. Create a basic app structure with ZenProvider for theming and essential components like Box, Heading, Text, and Button.

```bash
npm install @umami/react-zen
```

```tsx
// Import the global styles once at your app root
import '@umami/react-zen/styles.css';
import { ZenProvider, Button, Heading, Text, Box } from '@umami/react-zen';

function App() {
  return (
    <ZenProvider theme="light" colorScheme="system">
      <Box padding="6" backgroundColor="1">
        <Heading size="4">Welcome to React Zen</Heading>
        <Text color="muted">Modern, minimalist components</Text>
        <Button variant="primary">Get Started</Button>
      </Box>
    </ZenProvider>
  );
}

export default App;
```

--------------------------------

### Install React Zen library via npm

Source: https://github.com/umami-software/react-zen/blob/master/README.md

Installs the @umami/react-zen package using npm. This command adds the library to your project's dependencies, enabling you to import its components and styles. Requires npm installed and internet access.

```shell
npm install @umami/react-zen
```

--------------------------------

### React Zen TextField Component Examples

Source: https://context7.com/umami-software/react-zen/llms.txt

Demonstrates the usage of the TextField component from '@umami/react-zen', showcasing different variants like basic input, password, textarea, read-only with copy, and disabled states. It also includes an example of a controlled input with email validation.

```tsx
import { TextField, Flexbox, Box, Text } from '@umami/react-zen';
import { useState } from 'react';

function TextFieldExamples() {
  const [value, setValue] = useState('');

  return (
    <Flexbox direction="column" gap="6" padding="6">
      {/* Basic text field */}
      <TextField
        label="Username"
        placeholder="Enter your username"
        value={value}
        onChange={setValue}
      />

      {/* Password field */}
      <TextField
        label="Password"
        type="password"
        placeholder="Enter password"
      />

      {/* Textarea mode */}
      <TextField
        label="Description"
        asTextArea
        resize="vertical"
        placeholder="Enter a detailed description..."
      />

      {/* Read-only with copy */}
      <TextField
        label="API Key"
        value="sk_live_abc123xyz789"
        isReadOnly
        allowCopy
      />

      {/* Disabled state */}
      <TextField
        label="Disabled Field"
        value="Cannot edit"
        isDisabled
      />
    </Flexbox>
  );
}

// Controlled input with validation
function ControlledTextField() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const validateEmail = (value) => {
    const regex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
    if (!regex.test(value)) {
      setError('Invalid email address');
    } else {
      setError('');
    }
    setEmail(value);
  };

  return (
    <Box>
      <TextField
        label="Email"
        value={email}
        onChange={validateEmail}
        placeholder="you@example.com"
      />
      {error && <Text color="error" fontSize="2">{error}</Text>}
    </Box>
  );
}

```

--------------------------------

### React Example: Border Widths

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/design/borders.mdx

Illustrates setting the border width for an ExampleBox component. Accepts numeric values '1' through '4' to control the thickness of the border.

```jsx
<ExampleBox borderWidth="1" />
<ExampleBox borderWidth="2" />
<ExampleBox borderWidth="3" />
<ExampleBox borderWidth="4" />
```

--------------------------------

### React Example: Border Positions

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/design/borders.mdx

Demonstrates how to set the border position on an ExampleBox component. Supports default (all sides) or specific sides like 'top', 'right', 'bottom', and 'left'.

```jsx
<ExampleBox border="top" backgroundColor="2" borderRadius="0" />
<ExampleBox border="right" backgroundColor="2" borderRadius="0" />
<ExampleBox border="bottom" backgroundColor="2" borderRadius="0" />
<ExampleBox border="left" backgroundColor="2" borderRadius="0" />
```

--------------------------------

### React Example: Border Colors

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/design/borders.mdx

Demonstrates applying custom border colors to an ExampleBox component. Supports predefined color names like 'primary', 'red', 'blue', and 'green'.

```jsx
<ExampleBox borderColor="primary" />
<ExampleBox borderColor="red" />
<ExampleBox borderColor="blue" />
<ExampleBox borderColor="green" />
```

--------------------------------

### React Zen Select and ComboBox Components Examples

Source: https://context7.com/umami-software/react-zen/llms.txt

Illustrates the use of Select and ComboBox components from '@umami/react-zen' for dropdown selections. The Select component is shown for single selection with a list of countries, and the ComboBox demonstrates searchable input with a list of frameworks.

```tsx
import { Select, SelectItem, ComboBox, ComboBoxItem, Flexbox, Text } from '@umami/react-zen';
import { useState } from 'react';

function SelectExample() {
  const [selected, setSelected] = useState('');

  const countries = [
    { id: 'us', name: 'United States' },
    { id: 'uk', name: 'United Kingdom' },
    { id: 'ca', name: 'Canada' },
    { id: 'au', name: 'Australia' },
    { id: 'de', name: 'Germany' }
  ];

  return (
    <Flexbox direction="column" gap="6" padding="6">
      {/* Basic select */}
      <Select
        label="Country"
        placeholder="Select a country"
        selectedKey={selected}
        onSelectionChange={setSelected}
      >
        {countries.map(country => (
          <SelectItem key={country.id} id={country.id}>
            {country.name}
          </SelectItem>
        ))}
      </Select>

      {/* Selected value display */}
      {selected && (
        <Text>Selected: {countries.find(c => c.id === selected)?.name}</Text>
      )}
    </Flexbox>
  );
}

// Searchable ComboBox
function ComboBoxExample() {
  const [value, setValue] = useState('');

  const frameworks = [
    { id: 'react', name: 'React' },
    { id: 'vue', name: 'Vue.js' },
    { id: 'angular', name: 'Angular' },
    { id: 'svelte', name: 'Svelte' },
    { id: 'next', name: 'Next.js' },
    { id: 'nuxt', name: 'Nuxt.js' }
  ];

  return (
    <ComboBox
      label="Framework"
      placeholder="Search frameworks..."
      inputValue={value}
      onInputChange={setValue}
    >
      {frameworks
        .filter(f =>
          f.name.toLowerCase().includes(value.toLowerCase())
        )
        .map(framework => (
          <ComboBoxItem key={framework.id} id={framework.id}>
            {framework.name}
          </ComboBoxItem>
        ))
      }
    </ComboBox>
  );
}

```

--------------------------------

### React Example: Border Radii

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/design/borders.mdx

Shows how to apply different border radius values to an ExampleBox component. Supports predefined radii '1' through '4', and a 'full' option for fully rounded corners.

```jsx
<ExampleBox borderRadius="1" />
<ExampleBox borderRadius="2" />
<ExampleBox borderRadius="3" />
<ExampleBox borderRadius="4" />
<ExampleBox borderRadius="full" />
```

--------------------------------

### React Tooltip Example

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/tooltip.mdx

This snippet demonstrates the usage of a React tooltip component. It showcases different placement options (top, left, right, bottom) and the ability to display an arrow. The `TooltipTrigger` and `Tooltip` components are used for triggering and displaying the tooltip content respectively.

```jsx
<Example>
  <TooltipTrigger delay={0}>
    <Button variant="secondary">Hover me</Button>
    <Tooltip>Hello</Tooltip>
  </TooltipTrigger>
</Example>
```

```jsx
<Example>
  <TooltipTrigger delay={0}>
    <Button variant="secondary">{`Top`}</Button>
    <Tooltip placement="top">{`Hello`}</Tooltip>
  </TooltipTrigger>
  <TooltipTrigger delay={0}>
    <Button variant="secondary">{`Left`}</Button>
    <Tooltip placement="left">{`Hello`}</Tooltip>
  </TooltipTrigger>
  <TooltipTrigger delay={0}>
    <Button variant="secondary">{`Right`}</Button>
    <Tooltip placement="right">{`Hello`}</Tooltip>
  </TooltipTrigger>
  <TooltipTrigger delay={0}>
    <Button variant="secondary">{`Bottom`}</Button>
    <Tooltip placement="bottom">{`Hello`}</Tooltip>
  </TooltipTrigger>
</Example>
```

```jsx
<Example>
  <TooltipTrigger delay={0}>
    <Button variant="secondary">{`Top`}</Button>
    <Tooltip placement="top" showArrow={true}>
      {`Hello`} 
    </Tooltip>
  </TooltipTrigger>
  <TooltipTrigger delay={0}>
    <Button variant="secondary">{`Left`}</Button>
    <Tooltip placement="left" showArrow={true}>
      {`Hello`} 
    </Tooltip>
  </TooltipTrigger>
  <TooltipTrigger delay={0}>
    <Button variant="secondary">{`Right`}</Button>
    <Tooltip placement="right" showArrow={true}>
      {`Hello`} 
    </Tooltip>
  </TooltipTrigger>
  <TooltipTrigger delay={0}>
    <Button variant="secondary">{`Bottom`}</Button>
    <Tooltip placement="bottom" showArrow={true}>
      {`Hello`} 
    </Tooltip>
  </TooltipTrigger>
</Example>
```

```jsx
<Example>
  <FloatingTooltipExample />
</Example>
```

--------------------------------

### UI Layout Composition Using Zen Components in JSX

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/index.mdx

This snippet demonstrates composing a welcome card layout using Zen's Box, Flexbox, Heading, Text, and Button components. It relies on React and Zen library installations, with props for styling like padding, alignment, and variants. Outputs a centered, shadowed container with text and interactive button; limitations include dependency on Zen's design system for full styling.

```jsx
<Box padding="6" borderWidth="1" borderRadius="3" shadow="3">
  <Flexbox direction="column" alignItems="center" gap="6">
    <Heading size="4">Welcome</Heading>
    <Text color="muted" weight="medium">
      This is the zen way.
    </Text>
    <Button variant="primary">Enter</Button>
  </Flexbox>
</Box>
```

--------------------------------

### React Modal Examples with Various Placements

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/modal.mdx

Demonstrates the usage of the Modal component in React, showcasing different placement options (center, top, left, right, bottom, fullscreen) for overlay dialogs. It utilizes DialogTrigger and Button components for interaction.

```jsx
<Example>
  <DialogTrigger>
    <Button>Center</Button>
    <Modal>
      <Dialog>
        <Flexbox justifyContent="center" alignItems="center" paddingX="9" paddingY="8">
          <Heading>Hello.</Heading>
        </Flexbox>
      </Dialog>
    </Modal>
  </DialogTrigger>
  <DialogTrigger>
    <Button>Top</Button>
    <Modal placement="top">
      <Dialog variant="sheet">
        <Flexbox justifyContent="center" alignItems="center" paddingX="9" paddingY="8">
          <Heading>Hello.</Heading>
        </Flexbox>
      </Dialog>
    </Modal>
  </DialogTrigger>
  <DialogTrigger>
    <Button>Left</Button>
    <Modal placement="left">
      <Dialog variant="sheet">
        <Flexbox justifyContent="center" alignItems="center" paddingX="9" paddingY="8">
          <Heading>Hello.</Heading>
        </Flexbox>
      </Dialog>
    </Modal>
  </DialogTrigger>
  <DialogTrigger>
    <Button>Right</Button>
    <Modal placement="right">
      <Dialog variant="sheet">
        <Flexbox justifyContent="center" alignItems="center" paddingX="9" paddingY="8">
          <Heading>Hello.</Heading>
        </Flexbox>
      </Dialog>
    </Modal>
  </DialogTrigger>
  <DialogTrigger>
    <Button>Bottom</Button>
    <Modal placement="bottom">
      <Dialog variant="sheet">
        <Flexbox justifyContent="center" alignItems="center" paddingX="9" paddingY="8">
          <Heading>Hello.</Heading>
        </Flexbox>
      </Dialog>
    </Modal>
  </DialogTrigger>
  <DialogTrigger>
    <Button>Fullscreen</Button>
    <Modal placement="fullscreen">
      <Dialog variant="sheet">
        <Flexbox justifyContent="center" alignItems="center" paddingX="9" paddingY="8">
          <Heading>Hello.</Heading>
        </Flexbox>
      </Dialog>
    </Modal>
  </DialogTrigger>
</Example>
```

--------------------------------

### Image component basic usage

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/image.mdx

Demonstrates basic usage of the Image component with a maxWidth container. The component is imported from the 'react-zen' package and renders an image from a local path with alt text. This example is framework-agnostic beyond React, relies on the image file existing at the given src, and omits explicit width/height or lazy-loading controls.

```JSX
<Example>
  <Box maxWidth="480px">
    <Image src="/images/sample.jpg" alt="Image" />
  </Box>
</Example>
```

--------------------------------

### Import and render Button component from React Zen

Source: https://github.com/umami-software/react-zen/blob/master/README.md

Shows how to import the Button component from the React Zen library and render it within a React functional component. The example demonstrates a minimal usage scenario without extra props. Ensure the stylesheet is imported for proper styling.

```javascript
import { Button } from '@umami/react-zen';

export default function () {
  return <Button>Button</Button>;
}
```

--------------------------------

### Display DataTable component with prop definitions in JSX

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/layout/box.mdx

Provides an example of the DataTable component populated with a list of prop definitions and nested DataColumn components. Demonstrates passing complex data arrays and rendering table columns. Useful for documenting component APIs.

```jsx
<DataTable
  data={[
    { name: 'display', value: 'Responsive<"block" | "inline-block" | "none">' },
    { name: 'position', value: 'Responsive<"static" | "relative" | "absolute" | "fixed" | "sticky">' },
    { name: 'backgroundColor', value: 'BackgroundColor' },
    { name: 'borderColor', value: 'BorderColor' },
    { name: 'borderSize', value: 'Responsive<"1" | "2" | "3" | "4">' },
    { name: 'borderTop', value: 'Responsive<"1" | "2" | "3" | "4">' },
    { name: 'borderRight', value: 'Responsive<"1" | "2" | "3" | "4">' },
    { name: 'borderBottom', value: 'Responsive<"1" | "2" | "3" | "4">' },
    { name: 'borderLeft', value: 'Responsive<"1" | "2" | "3" | "4">' },
    { name: 'borderRadius', value: 'Responsive<"1" | "2" | "3" | "4" | "5" | "6">' },
    { name: 'hoverColor', value: 'HoverColor' },
    { name: 'hoverBackgroundColor', value: 'HoverColor' },
    { name: 'hoverBorderColor', value: 'HoverColor' },
    { name: 'padding', value: 'Responsive<Spacing>' },
    { name: 'paddingX', value: 'Responsive<Spacing>' },
    { name: 'paddingY', value: 'Responsive<Spacing>' },
    { name: 'paddingTop', value: 'Responsive<Spacing>' },
    { name: 'paddingRight', value: 'Responsive<Spacing>' },
    { name: 'paddingBottom', value: 'Responsive<Spacing>' },
    { name: 'paddingLeft', value: 'Responsive<Spacing>' },
    { name: 'margin', value: 'Responsive<Spacing>' },
    { name: 'marginX', value: 'Responsive<Spacing>' },
    { name: 'marginY', value: 'Responsive<Spacing>' },
    { name: 'marginTop', value: 'Responsive<Spacing>' },
    { name: 'marginRight', value: 'Responsive<Spacing>' },
    { name: 'marginBottom', value: 'Responsive<Spacing>' },
    { name: 'marginLeft', value: 'Responsive<Spacing>' },
    { name: 'width', value: 'Responsive<string>' },
    { name: 'minWidth', value: 'Responsive<string>' },
    { name: 'maxWidth', value: 'Responsive<string>' },
    { name: 'height', value: 'Responsive<string>' },
    { name: 'minHeight', value: 'Responsive<string>' },
    { name: 'maxHeight', value: 'Responsive<string>' },
    { name: 'flexBasis', value: 'Responsive<string>' },
    { name: 'flexGrow', value: 'Responsive<string>' },
    { name: 'flexShrink', value: 'Responsive<string>' },
    { name: 'gridRow', value: 'Responsive<string>' },
    { name: 'gridColumn', value: 'Responsive<string>' },
    { name: 'order', value: 'Responsive<number>' },
    { name: 'as', value: 'string' },
    { name: 'asChild', value: 'boolean' },
  ]}
>
  <DataColumn id="name" label="Name" />
  <DataColumn id="value" label="Type" />
</DataTable>
```

--------------------------------

### Basic Toggle Group Example (React)

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/toggle-group.mdx

Demonstrates a basic React Toggle Group with single selection mode. It requires the ToggleGroup and ToggleGroupItem components. This component allows users to select a single option from a group of buttons.

```jsx
<ToggleGroup selectionMode="single">
  <ToggleGroupItem id="one">One</ToggleGroupItem>
  <ToggleGroupItem id="two">Two</ToggleGroupItem>
  <ToggleGroupItem id="three">Three</ToggleGroupItem>
</ToggleGroup>
```

--------------------------------

### Flexbox Layout Example (React)

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/layout/flexbox.mdx

Demonstrates the usage of the Flexbox component to create row and column layouts with customizable gap. It showcases the flexibility of Flexbox for arranging child elements.

```jsx
<Example gap="8">
  <Column alignItems="center">
    <Label>Row</Label>
    <Flexbox direction="row" gap="3">
      <ExampleBox />
      <ExampleBox />
      <ExampleBox />
    </Flexbox>
  </Column>
  <Column>
    <Label>Column</Label>
    <Flexbox direction="column" gap="3">
      <ExampleBox />
      <ExampleBox />
      <ExampleBox />
    </Flexbox>
  </Column>
</Example>
```

--------------------------------

### React Button with onClick Handler

Source: https://context7.com/umami-software/react-zen/llms.txt

Shows how to implement an interactive Button component with an associated click handler. The 'onPress' prop is used to define the function executed when the button is clicked. This example requires '@umami/react-zen'.

```tsx
import { Button } from '@umami/react-zen';

function InteractiveButton() {
  const handleClick = () => {
    console.log('Button clicked!');
    // Perform action
  };

  return (
    <Button
      variant="primary"
      size="lg"
      onPress={handleClick}
    >
      Click Me
    </Button>
  );
}

```

--------------------------------

### React Alert Banner Example

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/alert-banner.mdx

Demonstrates the use of the AlertBanner component in React, including variations for error and info alerts. It utilizes React components for the alert banner and associated buttons.

```jsx
<Example>
  <AlertBanner
    title="New update available!"
    description="Version 2.0 has been released."
    icon={<ExampleIcons.Rocket />}
  >
    <Button>Dismiss</Button>
    <Button variant="primary">Download</Button>
  </AlertBanner>
  <AlertBanner
    variant="error"
    title="Error"
    description="The application encountered an error."
    allowClose={true}
  />
  <AlertBanner
    variant="info"
    title="Info"
    description="Your free trial will expire in 3 days."
    allowClose={true}
  />
</Example>
```

--------------------------------

### Text Field with Placeholder - React

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/text-field.mdx

Configures the text field to display placeholder text. The placeholder guides the user on the expected input without being part of the actual value.

```jsx
import {
  TextField
} from "@umami-software/react-zen";

function App() {
  return <TextField placeholder="Enter some text" />;
}
```

--------------------------------

### Image object fit modes

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/image.mdx

Shows how objectFit controls the image scaling within a fixed-height container. The same image is rendered with cover, fill, contain, scale-down, and none, each illustrating how the image is cropped or sized to fit the container. Uses Box/Column/Label to arrange examples vertically. Ensure sufficient container height and overflow settings to visualize differences; aspect ratio of the source image affects the visual result.

```JSX
<Example>
  <Column gap="4">
    <Label>Cover</Label>
    <Box maxWidth="480px" height="480px">
      <Image src="/images/sample.jpg" alt="Image" objectFit="cover" />
    </Box>
    <Label>Fill</Label>
    <Box maxWidth="480px" height="480px">
      <Image src="/images/sample.jpg" alt="Image" objectFit="fill" />
    </Box>
    <Label>Contain</Label>
    <Box maxWidth="480px" height="480px">
      <Image src="/images/sample.jpg" alt="Image" objectFit="contain" />
    </Box>
    <Label>Scale down</Label>
    <Box maxWidth="480px" height="480px">
      <Image src="/images/sample.jpg" alt="Image" objectFit="scale-down" />
    </Box>
    <Label>None</Label>
    <Box maxWidth="480px" height="480px" overflow="hidden">
      <Image src="/images/sample.jpg" alt="Image" objectFit="none" />
    </Box>
  </Column>
</Example>
```

--------------------------------

### React Navbar Component Implementation

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/navbar.mdx

Demonstrates how to structure a navigation bar using the Navbar component with nested dropdown menus. The example shows three main navigation sections (Product, Resources, Company) each containing sub-menu items, plus an external GitHub link. The component supports hierarchical menu structures and external URL navigation.

```jsx
<Navbar>
  <NavbarItem label="Product">
    <Menu>
      <MenuItem>Features</MenuItem>
      <MenuItem>Pricing</MenuItem>
    </Menu>
  </NavbarItem>
  <NavbarItem label="Resources">
    <Menu>
      <MenuItem>Documentation</MenuItem>
      <MenuItem>API Reference</MenuItem>
      <MenuItem>Support</MenuItem>
    </Menu>
  </NavbarItem>
  <NavbarItem label="Company">
    <Menu>
      <MenuItem>About</MenuItem>
      <MenuItem>Blog</MenuItem>
      <MenuItem>Careers</MenuItem>
    </Menu>
  </NavbarItem>
  <NavbarItem>
    <a href="https://github.com/umami-software/umami">GitHub</a>
  </NavbarItem>
</Navbar>
```

--------------------------------

### Theme Management Hook and Components in React TSX

Source: https://context7.com/umami-software/react-zen/llms.txt

This implements theme state management using a Zustand hook with localStorage persistence and system preference detection, including toggle button, radio selector, and provider setup. Dependencies: @umami/react-zen (useTheme, ZenProvider, Button, Flexbox, Text). Inputs: Theme state ('light'|'dark') and color scheme ('system'); outputs: Updated theme application across app. Limitations: Assumes Zustand integration in hook; radio inputs use native HTML without library styling.

```tsx
import { useTheme } from '@umami/react-zen';
import { Button, Flexbox, Text } from '@umami/react-zen';

function ThemeToggleButton() {
  const { theme, setTheme } = useTheme();

  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };

  return (
    <Button variant="outline" onPress={toggleTheme}>
      {theme === 'light' ? '🌙 Dark Mode' : '☀️ Light Mode'}
    </Button>
  );
}

// Theme selector with radio buttons
function ThemeSelector() {
  const { theme, setTheme } = useTheme();

  return (
    <Flexbox direction="column" gap="4" padding="6">
      <Text fontSize="5" fontWeight="bold">Theme Settings</Text>

      <Flexbox direction="column" gap="2">
        <label>
          <input
            type="radio"
            name="theme"
            value="light"
            checked={theme === 'light'}
            onChange={(e) => setTheme(e.target.value)}
          />
          Light Theme
        </label>

        <label>
          <input
            type="radio"
            name="theme"
            value="dark"
            checked={theme === 'dark'}
            onChange={(e) => setTheme(e.target.value)}
          />
          Dark Theme
        </label>
      </Flexbox>
    </Flexbox>
  );
}

// Initialize theme in app root
import { ZenProvider, useInitTheme } from '@umami/react-zen';

function App() {
  return (
    <ZenProvider
      theme="light"
      colorScheme="system" // 'light' | 'dark' | 'system'
    >
      <YourApp />
    </ZenProvider>
  );
}
```

--------------------------------

### React Form Submission with Validation

Source: https://context7.com/umami-software/react-zen/llms.txt

This snippet demonstrates how to submit a form with validation using React Hook Form.  It includes example validation rules for required fields, minimum length, and pattern matching. It showcases making an API call after successful submission.

```tsx
import {
  Form,
  FormField,
  FormSubmitButton,
  FormResetButton,
  TextField,
  Flexbox
} from '@umami/react-zen';

function LoginForm() {
  const handleSubmit = (values) => {
    console.log('Form submitted:', values);
    // { username: 'john', password: 'secret123' }

    // Make API call
    fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(values),
      headers: { 'Content-Type': 'application/json' }
    })
      .then(res => res.json())
      .then(data => console.log('Success:', data))
      .catch(err => console.error('Error:', err));
  };

  return (
    <Form
      defaultValues={{ username: '', password: '' }}
      onSubmit={handleSubmit}
      autoComplete="off"
    >
      <Flexbox direction="column" gap="6">
        <FormField
          name="username"
          label="Username"
          rules={{ required: 'Username is required', minLength: { value: 3, message: 'Min 3 characters' } }}
        >
          <TextField placeholder="Enter username" />
        </FormField

        <FormField
          name="password"
          label="Password"
          rules={{ required: 'Password is required', pattern: { value: /^(?=.*[A-Za-z])(?=.*d)[A-Za-zd]{8,}/, message: 'Min 8 chars, 1 letter, 1 number' } }}
        >
          <TextField type="password" placeholder="Enter password" />
        </FormField

        <Flexbox gap="3">
          <FormSubmitButton variant="primary">Login</FormSubmitButton>
          <FormResetButton variant="outline">Reset</FormResetButton>
        </Flexbox>
      </Flexbox>
    </Form>
  );
}

// Complex form with multiple field types
function UserRegistrationForm() {
  const [error, setError] = useState(null);

  const onSubmit = async (data) => {
    try {
      const response = await fetch('/api/register', {
        method: 'POST',
        body: JSON.stringify(data),
        headers: { 'Content-Type': 'application/json' }
      });

      if (!response.ok) throw new Error('Registration failed');

      const result = await response.json();
      console.log('User registered:', result);
    } catch (err) {
      setError(err.message);
    } 
  };

  return (
    <Form
      defaultValues={{ name: '', email: '', bio: '', agree: false }}
      onSubmit={onSubmit}
      error={error}
    >
      <Flexbox direction="column" gap="5">
        <FormField
          name="name"
          label="Full Name"
          rules={{ required: 'Name is required' }}
        >
          <TextField />
        </FormField

        <FormField
          name="email"
          label="Email Address"
          rules={{ required: 'Email is required', pattern: { value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,}$/i, message: 'Invalid email address' } }}
        >
          <TextField type="email" />
        </FormField

        <FormField
          name="bio"
          label="Biography"
          description="Tell us about yourself"
        >
          <TextField asTextArea resize="vertical" />
        </FormField>

        <FormField
          name="agree"
          rules={{ required: 'You must agree to continue' }}
        >
          <Checkbox>I agree to the terms and conditions</Checkbox>
        </FormField>

        <FormSubmitButton variant="primary">Register</FormSubmitButton>
      </Flexbox>
    </Form>
  );
}
```

--------------------------------

### Toggle Group with Icons (React)

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/toggle-group.mdx

Shows how to use icons within React ToggleGroupItems for a more visually descriptive interface. This example requires Icon and specific icon components (e.g., ExampleIcons.AlignLeft). Each item displays an icon instead of text.

```jsx
<ToggleGroup selectionMode="single">
  <ToggleGroupItem id="one">
    <Icon size="sm">
      <ExampleIcons.AlignLeft />
    </Icon>
  </ToggleGroupItem>
  <ToggleGroupItem id="two">
    <Icon size="sm">
      <ExampleIcons.AlignCenter />
    </Icon>
  </ToggleGroupItem>
  <ToggleGroupItem id="three">
    <Icon size="sm">
      <ExampleIcons.AlignRight />
    </Icon>
  </ToggleGroupItem>
</ToggleGroup>
```

--------------------------------

### Form Controls: Checkbox, RadioGroup, and Switch in React Zen

Source: https://context7.com/umami-software/react-zen/llms.txt

This example demonstrates binary and multiple choice form components using Checkbox for toggling agreement, RadioGroup for selecting options, and Switch for enabling features like notifications. It relies on React's useState for managing component states and imports from '@umami/react-zen' for UI elements. Inputs are controlled via props like isSelected and onChange; outputs reflect states in a display box. Limitations include dependency on the library's theme system via ZenProvider.

```tsx
import {
  Checkbox,
  RadioGroup,
  Radio,
  Switch,
  Flexbox,
  Text
} from '@umami/react-zen';
import { useState } from 'react';

function FormControlsExample() {
  const [checked, setChecked] = useState(false);
  const [radioValue, setRadioValue] = useState('option1');
  const [switchOn, setSwitchOn] = useState(false);

  return (
    <Flexbox direction="column" gap="8" padding="6">
      {/* Checkbox */}
      <Checkbox
        isSelected={checked}
        onChange={setChecked}
      >
        I agree to the terms and conditions
      </Checkbox>

      {/* Radio group */}
      <RadioGroup
        label="Choose an option"
        value={radioValue}
        onChange={setRadioValue}
      >
        <Radio value="option1">Option 1</Radio>
        <Radio value="option2">Option 2</Radio>
        <Radio value="option3">Option 3</Radio>
      </RadioGroup>

      {/* Switch */}
      <Flexbox alignItems="center" gap="3">
        <Switch
          isSelected={switchOn}
          onChange={setSwitchOn}
        />
        <Text>Enable notifications</Text>
      </Flexbox>

      {/* Display state */}
      <Box padding="4" backgroundColor="2" borderRadius="2">
        <Text>Checkbox: {checked ? 'Checked' : 'Unchecked'}</Text>
        <Text>Radio: {radioValue}</Text>
        <Text>Switch: {switchOn ? 'On' : 'Off'}</Text>
      </Box>
    </Flexbox>
  );
}
```

--------------------------------

### React Heading Component Sizing Examples

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/typography/heading.mdx

Illustrates how to control the visual size of the Heading component using the 'size' prop. The 'size' prop accepts values from '1' to '6', corresponding to standard HTML heading levels. This allows for semantic and visual hierarchy control within the UI. Assumes the Heading component internally maps these sizes to appropriate HTML tags or CSS styles.

```jsx
<Heading size="1">Heading 1</Heading>
<Heading size="2">Heading 2</Heading>
<Heading size="3">Heading 3</Heading>
<Heading size="4">Heading 4</Heading>
<Heading size="5">Heading 5</Heading>
<Heading size="6">Heading 6</Heading>
```

--------------------------------

### Menu with Separators in React JSX

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/menu.mdx

This example adds MenuSeparator components to divide menu items into groups. Depends on Menu, MenuItem, and MenuSeparator from React Zen. Inputs are standard menu items; outputs grouped visual sections. Limited to horizontal separators without styling options shown.

```jsx
<Menu>
    <MenuItem>One</MenuItem>
    <MenuItem>Two</MenuItem>
    <MenuSeparator />
    <MenuItem>Three</MenuItem>
    <MenuItem>Four</MenuItem>
    <MenuSeparator />
    <MenuItem>Five</MenuItem>
  </Menu>
```

--------------------------------

### React Heading Component Letter Spacing Examples

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/typography/heading.mdx

Demonstrates controlling letter spacing for the Heading component via the 'spacing' prop. The prop accepts numerical values (1-5), which likely translate to CSS letter-spacing values. This allows for fine-tuning the visual appearance and readability of headings. Assumes the Heading component applies these spacing adjustments via CSS.

```jsx
<Heading spacing="1">Letter spacing 1</Heading>
<Heading spacing="2">Letter spacing 2</Heading>
<Heading spacing="3">Letter spacing 3</Heading>
<Heading spacing="4">Letter spacing 4</Heading>
<Heading spacing="5">Letter spacing 5</Heading>
```

--------------------------------

### Basic List in React

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/list.mdx

Creates a simple list with items. Uses the List and ListItem components to display a collection of items. No dependencies beyond React and React-Zen.

```react
<List>
  <ListItem>One</ListItem>
  <ListItem>Two</ListItem>
  <ListItem>Three</ListItem>
  <ListItem>Four</ListItem>
  <ListItem>Five</ListItem>
</List>
```

--------------------------------

### Basic Icon Usage with SVG - React

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/icon.mdx

Demonstrates the basic usage of the Icon component by wrapping an SVG element. It requires the Icon component and an SVG component (e.g., from ExampleIcons).

```jsx
import { Icon } from 'your-icon-library';
import { Wifi } from 'your-icon-library/icons'; // Assuming icons are imported like this

function MyComponent() {
  return (
    <Icon>
      <Wifi />
    </Icon>
  );
}
```

--------------------------------

### Render table with alignment

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/table.mdx

Configures column alignment using align property. Supports 'start', 'center', and 'end' values. No additional dependencies needed. Does not affect row height or wrapping.

```jsx
<Table>
  <TableHeader>
    <TableColumn align="start">Name</TableColumn>
    <TableColumn align="center">Type</TableColumn>
    <TableColumn align="end">Date modified</TableColumn>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell align="start">Games</TableCell>
      <TableCell align="center">File folder</TableCell>
      <TableCell align="end">6/7/2020</TableCell>
    </TableRow>
    <TableRow>
      <TableCell align="start">Program Files</TableCell>
      <TableCell align="center">File folder</TableCell>
      <TableCell align="end">4/7/2021</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

--------------------------------

### Basic React Select Component Usage

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/select.mdx

Demonstrates the fundamental usage of the React Select component to display a list of options triggered by a button. It requires an array of items and an optional placeholder.

```javascript
import React from 'react';
import { Box, Select } from '@umami/design-system';

function App() {
  return (
    <Box width="300px">
      <Select items={['One', 'Two', 'Three', 'Four', 'Five']} placeholder="Please select an option" />
    </Box>
  );
}
```

--------------------------------

### Configurable Spinner and Dots Sizes - React

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/loading.mdx

Demonstrates how to set the size of the Spinner and Dots components using the 'size' prop. Supported sizes include 'sm', 'md', and 'lg'. This allows for visual consistency across different UI contexts.

```jsx
<Row justifyContent="space-evenly" width="100%">
  <Column alignItems="center" gap>
    <Label>sm</Label>
    <Spinner size="sm" />
    <Label>md</Label>
    <Spinner size="md" />
    <Label>lg</Label>
    <Spinner size="lg" />
  </Column>
  <Column alignItems="center" gap>
    <Label>sm</Label>
    <Dots size="sm" />
    <Label>md</Label>
    <Dots size="md" />
    <Label>lg</Label>
    <Dots size="lg" />
  </Column>
</Row>
```

--------------------------------

### Configure Grid Item Placement in React

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/layout/grid.mdx

Shows advanced grid layout with explicit row and column placement for grid items using gridRow and gridColumn props. Demonstrates spanning items across multiple grid tracks to create complex layouts. Includes responsive sizing with width and height properties

--------------------------------

### Menu with Sections in React JSX

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/menu.mdx

This snippet uses MenuSection to organize items under titled headers. Requires Menu, MenuSection, and MenuItem components. Purpose is to categorize options; inputs include title props for sections. Outputs structured menu with headings; no nested sections supported in this example.

```jsx
<Menu>
    <MenuSection title="Introduction">
      <MenuItem>One</MenuItem>
      <MenuItem>Two</MenuItem>
      <MenuItem>Three</MenuItem>
    </MenuSection>
    <MenuSection title="Summary">
      <MenuItem>Four</MenuItem>
      <MenuItem>Five</MenuItem>
    </MenuSection>
  </Menu>
```

--------------------------------

### Box Component - Universal Container

Source: https://context7.com/umami-software/react-zen/llms.txt

Foundation Box component accepting comprehensive design props for layout, spacing, colors, borders, and positioning. Demonstrates responsive design with breakpoint objects and composition pattern using asChild prop.

```tsx
import { Box, Text } from '@umami/react-zen';

function DesignPropsExample() {
  return (
    <Box
      // Layout
      display="flex"
      padding="6"
      margin="4"
      width="100%"
      minHeight="200px"

      // Colors (12-step scale)
      backgroundColor="2"
      borderColor="6"
      color="12"

      // Borders & Shadows
      border="1"
      borderRadius="3"
      shadow="4"

      // Positioning
      position="relative"
      overflow="hidden"
    >
      <Text fontSize="4" fontWeight="medium">
        All styling via props - no CSS needed
      </Text>
    </Box>
  );
}
```

```tsx
// Responsive design with breakpoint objects
function ResponsiveBox() {
  return (
    <Box
      padding={{ xs: "3", md: "6", lg: "8" }}
      display={{ xs: "block", md: "flex" }}
      backgroundColor="1"
    >
      <Text fontSize={{ xs: "3", md: "5", xl: "7" }}>
        Adapts to screen size: xs(576), sm(768), md(992), lg(1200), xl(1200+)
      </Text>
    </Box>
  );
}
```

```tsx
// Composition pattern with asChild
function BoxAsButton() {
  return (
    <Box padding="4" borderRadius="2" backgroundColor="blue" asChild>
      <button onClick={() => console.log('clicked')}>
        Box renders as button element
      </button>
    </Box>
  );
}
```

--------------------------------

### Basic Loading Button Usage in React

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/loading-button.mdx

Demonstrates the fundamental usage of the LoadingButton component in React, showing how to enable the loading indicator. This component is useful for providing visual feedback during asynchronous operations.

```jsx
<LoadingButton isLoading />
```

--------------------------------

### Import React Zen CSS styles in JavaScript

Source: https://github.com/umami-software/react-zen/blob/master/README.md

Imports the global stylesheet for React Zen components to apply the library's pure CSS styling. Place this import at the root of your application before using any Zen components. No additional configuration required.

```javascript
import '@umami/react-zen/styles.css';
```

--------------------------------

### React Button Basic Usage

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/button.mdx

Demonstrates the fundamental usage of the Button component in React. This component allows users to perform actions via mouse, touch, or keyboard. It requires no external dependencies beyond React itself.

```jsx
<Button variant="primary">Button</Button>
```

--------------------------------

### Render basic table

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/table.mdx

Displays a simple table with headers and rows. No dependencies required. Takes no input parameters beyond the static data shown. Does not support interactivity beyond navigation.

```jsx
<Table>
  <TableHeader>
    <TableColumn>Name</TableColumn>
    <TableColumn>Email</TableColumn>
    <TableColumn>Date created</TableColumn>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Bob</TableCell>
      <TableCell>bob@aol.com</TableCell>
      <TableCell>5/5/2020</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Fred</TableCell>
      <TableCell>fred@yahoo.com</TableCell>
      <TableCell>4/7/2021</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Ted</TableCell>
      <TableCell>ted@gmail.com</TableCell>
      <TableCell>11/20/2010</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Joe</TableCell>
      <TableCell>joe@outlook.com</TableCell>
      <TableCell>1/18/2016</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

--------------------------------

### Basic Menu Usage in React JSX

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/components/menu.mdx

This snippet demonstrates a simple menu with a list of MenuItem components. It requires the Menu and MenuItem components from React Zen. No selection mode is specified, defaulting to non-selectable items. Outputs a vertical list of clickable options.

```jsx
<Menu>
    <MenuItem>One</MenuItem>
    <MenuItem>Two</MenuItem>
    <MenuItem>Three</MenuItem>
    <MenuItem>Four</MenuItem>
    <MenuItem>Five</MenuItem>
  </Menu>
```

--------------------------------

### React Heading Component Alignment Examples

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/typography/heading.mdx

Shows how to align text within the Heading component using the 'align' prop. Accepted values are 'left', 'center', and 'right'. This functionality likely relies on CSS text-align properties applied internally by the component. It's demonstrated within a Box component, suggesting layout utilities might be used in conjunction.

```jsx
<Box width="100%">
  <Heading align="left">Left</Heading>
  <Heading align="center">Center</Heading>
  <Heading align="right">Right</Heading>
</Box>
```

--------------------------------

### Render basic Box component with JSX

Source: https://github.com/umami-software/react-zen/blob/master/src/content/docs/layout/box.mdx

Demonstrates rendering a simple Box component containing text. No additional props are required, only the child content is provided. Suitable for quick layout elements.

```jsx
<Box>I am a box.</Box>
```