### Basic Dialog Component

Source: https://context7_llms

This example shows how to create a basic modal dialog using Dialog, DialogTrigger, and DialogContent. It includes a title, description, and a close button, demonstrating fundamental dialog structure.

```tsx
import { Dialog, DialogTrigger, DialogClose, DialogContent } from './Dialog';
import { Button } from '../Button/Button';
import { Typography } from '../Typography/Typography';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent
    title="Basic Dialog"
    description="This is a simple dialog."
  >
    <Typography variant="bodyMedium">
      This is the content of the dialog.
    </Typography>
    <DialogClose asChild>
      <Button>Close</Button>
    </DialogClose>
  </DialogContent>
</Dialog>
```

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

### Basic DatePicker Component

Source: https://context7_llms

This example demonstrates a basic, controlled DatePicker component. It includes a label and placeholder text, and its state is managed via the value and onChange props.

```tsx
import { useState } from 'react';
import { DatePicker } from './DatePicker';

const DefaultRender = () => {
  const [date, setDate] = useState<Date | null>(null);
  return <DatePicker
    label="Date"
    placeholder="MM/DD/YYYY"
    value={date}
    onChange={setDate}
  />;
};
```

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

### Basic Avatar Component

Source: https://context7_llms

This example shows the basic usage of the Avatar component, which displays an image from a src URL and provides a text fallback (e.g., user initials) if the image fails to load.

```tsx
import { Avatar } from './Avatar';

<Avatar
  src="https://picsum.photos/id/237/200/300"
  alt="User Avatar"
  fallback="JD"
  size={40}
/>
```

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

### Basic Select Component

Source: https://context7_llms

The Select component provides a dropdown menu for selecting one option from a list. This example shows an 'outlined' variant.

```tsx
import { useState } from 'react';
import { Select } from './Select';

const OutlinedSelect = () => {
  const [value, setValue] = useState('');
  const fruitOptions = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
  ];

  return (
    <Select
      label="Choose a fruit"
      value={value}
      onChange={setValue}
      options={fruitOptions}
      variant="outlined"
    />
  );
};
```

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

### Basic Menu Component Triggered by Button

Source: https://context7_llms

This example demonstrates a basic Menu, triggered by a Button. The menu contains MenuItem components and a MenuSeparator, showcasing fundamental menu structure and interaction for common UI patterns.

```tsx
import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator } from './Menu';
import { Button } from '../Button';

<Menu>
  <MenuTrigger asChild>
    <Button variant="outlined">Open Menu</Button>
  </MenuTrigger>
  <MenuContent>
    <MenuItem>Profile</MenuItem>
    <MenuItem>Settings</MenuItem>
    <MenuSeparator />
    <MenuItem>Log out</MenuItem>
  </MenuContent>
</Menu>
```

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

### Badge Component with an Icon Button

Source: https://context7_llms

This example demonstrates how to position a Badge relative to another element, such as an IconButton, to create a notification indicator.

```tsx
import { Badge } from './Badge';
import { IconButton } from '../IconButton';
import { MdNotifications } from 'react-icons/md';

<div style={{ position: 'relative', display: 'inline-block' }}>
  <IconButton>
    <MdNotifications size={24} />
  </IconButton>
  <div style={{ position: 'absolute', top: '-8px', right: '-8px' }}>
    <Badge>5</Badge>
  </div>
</div>
```

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

### Alert Component with an Action Button

Source: https://context7_llms

This example shows how to add an interactive element, such as a Button, to an Alert component using the action prop. This is useful for providing users with a direct way to respond to the alert.

```tsx
import { Alert } from './Alert';
import { Button } from '../Button';

<Alert
  severity="warning"
  children="Your session will expire in 5 minutes."
  action={
    <Button variant="text" size="sm">
      Extend
    </Button>
  }
/>
```

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

### Button Component Variants

Source: https://context7_llms

This example showcases all available visual styles for the Button component: 'filled', 'outlined', 'text', 'elevated', and 'tonal'. Each variant serves a different level of emphasis in the UI.

```tsx
import { Button } from './Button';

<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
  <Button variant="filled">Filled Button</Button>
  <Button variant="outlined">Outlined Button</Button>
  <Button variant="text">Text Button</Button>
  <Button variant="elevated">Elevated Button</Button>
  <Button variant="tonal">Tonal Button</Button>
</div>
```

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

### Basic List Component

Source: https://context7_llms

The List component is used to display a vertical list of items. This example shows a simple list with several ListItem children.

```tsx
import { List, ListItem } from './List';

<List>
  <ListItem>Item 1</ListItem>
  <ListItem>Item 2</ListItem>
  <ListItem>Item 3</ListItem>
</List>
```

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

### Alert Component with Various Severities

Source: https://context7_llms

This example showcases the Alert component with all available severity levels: 'info', 'success', 'warning', and 'error'. Each severity level applies a distinct color scheme to communicate the nature of the message.

```tsx
import { Alert } from './Alert';

<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
  <Alert severity="info">This is an info alert — provides neutral information to users.</Alert>
  <Alert severity="success">
    This is a success alert — indicates a successful action or positive outcome.
  </Alert>
  <Alert severity="warning">
    This is a warning alert — warns users about potential issues or important information.
  </Alert>
  <Alert severity="error">
    This is an error alert — indicates an error has occurred that needs attention.
  </Alert>
</div>
```

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

### Linear Progress Indicator

Source: https://context7_llms

The Progress component can be rendered as a linear bar. This example shows a determinate linear progress indicator with a specific value.

```tsx
import { Progress } from './Progress';

<Progress variant="linear" value={65} />
```

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

### Basic Layout with Typography and Divider

Source: https://context7_llms

This snippet demonstrates a simple flexbox layout using `Typography` and `Divider` components to arrange content horizontally.

```tsx
import { Typography } from '../Typography/Typography';

<div style={{ display: 'flex', height: '100px', alignItems: 'center' }}>
  <Typography variant="bodyLarge">Left content</Typography>
  <Divider orientation="vertical" />
  <Typography variant="bodyLarge">Right content</Typography>
</div>
```

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

### Floating Action Button (FAB)

Source: https://context7_llms

The Floating Action Button (FAB) represents the primary action on a screen. This example shows a standard FAB with a primary color variant.

```tsx
import { FAB } from './FAB';
import { MdAdd } from 'react-icons/md';

<FAB variant="primary">
  <MdAdd size={24} />
</FAB>
```

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

### Assist Chip Component

Source: https://context7_llms

Assist chips represent smart or automated actions, like adding an event to a calendar. They often start with a verb and can include an icon.

```tsx
import { Chip, ChipSet } from './';
import { MdCalendarToday, MdMap } from 'react-icons/md';

<ChipSet>
  <Chip
    variant="assist"
    label="Add to my itinerary"
    icon={<MdCalendarToday />}
    onClick={() => console.log('Add to itinerary')}
  />
  <Chip
    variant="assist"
    label="12 mins from hotel"
    icon={<MdMap />}
    onClick={() => console.log('Show on map')}
  />
</ChipSet>
```

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

### Square-Shaped Avatar Component

Source: https://context7_llms

The Avatar component's shape can be customized using the shape prop. This example shows how to create a square-shaped avatar.

```tsx
import { Avatar } from './Avatar';

<Avatar
  src="https://picsum.photos/id/237/200/300"
  alt="Square Avatar"
  fallback="SQ"
  size={48}
  shape="square"
/>
```

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

### Basic TextArea Component Usage

Source: https://context7_llms

The TextArea component provides a multi-line text input field for forms. This example demonstrates the default 'classic' variant, showing a standard text area with a placeholder.

```tsx
import { TextArea } from './TextArea';

<TextArea
  placeholder="Enter your message..."
  variant="classic"
  size="md"
/>
```

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

### Basic RadioGroup Usage

Source: https://context7_llms

Demonstrates the fundamental usage of the RadioGroup and RadioButton components for selecting a single option from a list.

```tsx
import { RadioButton, RadioGroup } from './RadioButton';

<RadioGroup label="Select an option" defaultValue="option1">
  <RadioButton value="option1" label="Option 1" />
  <RadioButton value="option2" label="Option 2" />
  <RadioButton value="option3" label="Option 3" />
</RadioGroup>
```

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

### Configuring Application with YodaProvider for Theming and Toasts

Source: https://context7_llms

The YodaProvider is a convenient wrapper that combines YodaThemeProvider and ToastProvider. It's the recommended way to set up the library at the root of your application, enabling features like initial theme setting and toast notifications.

```tsx
import { YodaProvider } from './YodaProvider';

const App = () => {
  return (
    <YodaProvider
      initialTheme="dark"
      sourceColorHex="#F37021"
      features={{ enableToast: true }}
    >
      {/* Your application components */}
    </YodaProvider>
  );
};
```

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

### Dismissible Alert Component

Source: https://context7_llms

This example demonstrates how to make an Alert component dismissible by providing an onClose callback function. This will render a close icon button that users can click to hide the alert.

```tsx
import { Alert } from './Alert';

<Alert
  severity="info"
  children="This alert can be dismissed by clicking the close button."
  onClose={() => console.log('Alert dismissed')}
/>
```

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

### Circular Progress Indicator

Source: https://context7_llms

By setting variant="circular", the Progress component renders as a circular indicator. This example shows a determinate circular progress indicator.

```tsx
import { Progress } from './Progress';

<Progress variant="circular" value={75} />
```

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

### List with Icons and Secondary Text

Source: https://context7_llms

ListItems can be enhanced with leading icons (startIcon), trailing icons (endIcon), and secondary text to provide more context for each item.

```tsx
import { List, ListItem } from './List';
import { MdMail, MdChevronRight } from 'react-icons/md';

<List dividers>
  <ListItem
    interactive
    startIcon={<MdMail size={18} />}
    endIcon={<MdChevronRight size={18} />}
    secondaryText="This is a description for the item"
  >
    Inbox
  </ListItem>
</List>
```

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

### Basic Switch Component

Source: https://context7_llms

The Switch component is a toggle control that allows users to turn a setting on or off.

```tsx
import { Switch } from './Switch';

<Switch
  label="Toggle setting"
  size="md"
  defaultChecked={false}
/>
```

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

### Loading and Updating Toasts

Source: https://context7_llms

A loading toast can be shown for asynchronous operations and then updated to a success or error state upon completion. This provides clear feedback to the user.

```tsx
import { toast } from './toast.utils';

const handleSave = () => {
  const toastId = toast.loading('Saving your preferences...');
  setTimeout(() => {
    // On success
    toast.success('Preferences saved successfully!', {
      id: toastId,
    });
    // On failure
    // toast.error('Save failed.', { id: toastId });
  }, 2000);
};
```

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

### Modal Navigation Drawer for Small Screens

Source: https://context7_llms

Demonstrates a modal NavigationDrawer that appears over the content, typically used on smaller screens. It is controlled with the 'open' and 'onClose' props, showing how to manage its visibility and user interaction.

```tsx
import { useState } from 'react';
import { NavigationDrawer, NavigationItem } from './NavigationDrawer';
import { IconButton } from '../IconButton';
import { MdMenu, MdHome } from 'react-icons/md';

const ModalNavigationDrawer = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <IconButton onClick={() => setOpen(true)}>
        <MdMenu size={24} />
      </IconButton>
      <NavigationDrawer
        open={open}
        onClose={() => setOpen(false)}
        variant="modal"
      >
        <NavigationItem id="home" icon={<MdHome size={24} />} label="Home" />
      </NavigationDrawer>
    </>
  );
};
```

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

### Basic Divider Component

Source: https://context7_llms

The Divider component is used to visually separate content. This example shows a default horizontal divider, useful for structuring layouts and improving readability.

```tsx
import { Divider } from './Divider';
import { Typography } from '../Typography/Typography';

<div>
  <Typography variant="bodyLarge">Content above</Typography>
  <Divider />
  <Typography variant="bodyLarge">Content below</Typography>
</div>
```

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

### Suggestion Chip Component

Source: https://context7_llms

Suggestion chips help users by offering dynamic, contextual suggestions, such as quick replies in a chat application.

```tsx
import { Chip, ChipSet } from './';

<ChipSet>
  <Chip
    variant="suggestion"
    label="I agree"
    onClick={() => console.log('Selected: I agree')}
  />
  <Chip
    variant="suggestion"
    label="Looks good to me"
    onClick={() => console.log('Selected: Looks good to me')}
  />
</ChipSet>
```

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

### Basic TextField Component Usage

Source: https://context7_llms

The TextField component is designed for single-line text input in forms. This example illustrates the default 'outlined' variant, which provides a clear visual boundary around the input field, along with a descriptive label.

```tsx
import { TextField } from './TextField';

<TextField
  label="Label"
  placeholder="Enter text"
  variant="outlined"
/>
```

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

### Top App Bar Component

Source: https://context7_llms

This snippet shows a standard top App Bar with a headline, a leading navigation icon, and a trailing options icon. This is a common pattern for main application headers.

```tsx
import { AppBar } from './AppBar';
import { MdMenu, MdMoreVert } from 'react-icons/md';

<AppBar
  variant="top"
  headline="Page title"
  leadingContent={
    <IconButton aria-label="Navigation menu">
      <MdMenu size={24} />
    </IconButton>
  }
  trailingContent={
    <IconButton aria-label="More options">
      <MdMoreVert size={24} />
    </IconButton>
  }
/>
```

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

### Integrating YodaThemeProvider for Application Theming

Source: https://context7_llms

The `YodaThemeProvider` is the foundational provider for the UI library's theming system. It should wrap your entire application's component tree to ensure all child components have access to the theme context, enabling features like light/dark mode and dynamic color generation.

```tsx
import { YodaThemeProvider } from './ThemeProvider';

const App = () => {
  return (
    <YodaThemeProvider initialTheme="light">
      {/* Your application components */}
    </YodaThemeProvider>
  );
};
```

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

### Using the Snackbar Provider

Source: https://context7_llms

To use the Snackbar component, wrap your application or a portion of it with the SnackbarProvider. This allows any child component to trigger snackbars using the useSnackbar hook.

```tsx
import { SnackbarProvider, useSnackbar } from './';
import { Button } from '../Button';

const SnackbarDemo = () => {
  const snackbar = useSnackbar();

  return (
    <Button onClick={() => snackbar.show('This is a simple snackbar message')}>
      Show Simple Snackbar
    </Button>
  );
};

const App = () => (
  <SnackbarProvider>
    <SnackbarDemo />
  </SnackbarProvider>
);
```

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

### Using the Toast Provider

Source: https://context7_llms

To enable toast notifications, wrap your application with the ToastProvider. This allows any child component to trigger toasts using the toast utility functions.

```tsx
import { ToastProvider, toast } from './';
import { Button } from '../Button';

const ToastDemo = () => {
  return (
    <Button onClick={() => toast.success('Success!')}>
      Show Success Toast
    </Button>
  );
};

const App = () => (
  <ToastProvider>
    <ToastDemo />
  </ToastProvider>
);
```

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

### Basic DatePicker Component

Source: https://context7_llms

This snippet demonstrates the basic usage of a DatePicker component, allowing users to select a date within a specified range. It shows how to set labels, helper text, and handle date value changes.

```tsx
<DatePicker
  label="Appointment Date"
  helperText="Select a date within one year from today"
  value={date}
  onChange={setDate}
  minDate={minDate}
  maxDate={maxDate}
/>
```

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

### Basic Button Component

Source: https://context7_llms

This snippet shows the default 'filled' variant of the Button component, which is the most prominent style for primary actions.

```tsx
import { Button } from './Button';

<Button variant="filled">Filled Button</Button>
```

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

### Circular Progress with Label

Source: https://context7_llms

The showLabel prop can be used to display the current progress percentage inside the circular indicator.

```tsx
import { Progress } from './Progress';

<Progress variant="circular" value={85} showLabel={true} />
```

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

### Tabs with Icons

Source: https://context7_llms

Tabs can include icons in addition to or instead of labels. By default, the icon is displayed above the label.

```tsx
import { useState } from 'react';
import { Tabs, Tab } from './Tabs';
import { MdImage, MdVideoLibrary } from 'react-icons/md';

const WithIconsTabs = () => {
  const [value, setValue] = useState(0);

  return (
    <Tabs value={value} onChange={setValue}>
      <Tab icon={<MdImage />} label="Photos" />
      <Tab icon={<MdVideoLibrary />} label="Videos" />
    </Tabs>
  );
};
```

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

### Basic Checkbox Component

Source: https://context7_llms

This snippet shows the default usage of the Checkbox component with a label. It can be used in a controlled or uncontrolled manner.

```tsx
import { Checkbox } from './Checkbox';

<Checkbox
  label="Accept terms and conditions"
  size="md"
  defaultChecked={false}
/>
```

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

### Basic Tooltip Component

Source: https://context7_llms

The Tooltip component provides a text label that appears when a user hovers over or focuses on an element. It's useful for providing brief, contextual information.

```tsx
import { Tooltip } from './Tooltip';
import { Button } from '../Button';

<Tooltip content="Add to favorites">
  <Button>Hover me</Button>
</Tooltip>
```

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

### Generating Dynamic Themes with sourceColorHex

Source: https://context7_llms

The `YodaThemeProvider` offers the capability to generate a complete light and dark color palette automatically from a single `sourceColorHex` value. This feature simplifies dynamic theming, allowing applications to easily adapt their visual style based on a primary brand color.

```tsx
import { YodaThemeProvider } from './ThemeProvider';

const AppWithCustomTheme = () => {
  return (
```

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

### Basic Slider Component

Source: https://context7_llms

The Slider component allows users to make selections from a range of values. This is a basic, continuous slider.

```tsx
import { Slider } from './Slider';

<Slider defaultValue={[50]} />
```

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

### Triggering Different Toast Variants

Source: https://context7_llms

The toast utility provides methods for different notification types: success, error, warning, info, and default. Each variant has a corresponding icon and styling.

```tsx
import { toast } from './toast.utils';

toast.success('Item saved successfully!');
toast.error('Failed to update profile.');
toast.warning('Your session is about to expire.');
toast.info('A new version is available.');
toast.default('This is a default notification.');
```

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

### Icon Button Variants

Source: https://context7_llms

IconButtons are available in 'standard', 'filled', and 'outlined' variants to match different levels of emphasis and UI contexts.

```tsx
import { IconButton } from './IconButton';
import { MdFavoriteBorder, MdAdd, MdSettings } from 'react-icons/md';

<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
  <IconButton variant="standard">
    <MdFavoriteBorder size={24} />
  </IconButton>
  <IconButton variant="filled">
    <MdAdd size={24} />
  </IconButton>
  <IconButton variant="outlined">
    <MdSettings size={24} />
  </IconButton>
</div>
```

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

### Snackbar with an Action

Source: https://context7_llms

A Snackbar can include an action button, such as 'Undo' or 'Retry', by providing an action object with a label and an onClick handler to the snackbar.show method.

```tsx
import { useSnackbar } from './';
import { Button } from '../Button';

const Demo = () => {
  const snackbar = useSnackbar();
  return (
    <Button
      onClick={() =>
        snackbar.show({
          message: 'Unable to save changes',
          action: {
            label: 'Retry',
            onClick: () => console.log('Retry clicked'),
          },
        })
      }
    >
      With Action
    </Button>
  );
}
```

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

### Typography with Color and Alignment

Source: https://context7_llms

The color and align props can be used to customize the text color and alignment of the Typography component.

```tsx
import { Typography } from './Typography';

<Typography variant="bodyLarge" color="primary" align="center">
  Centered Primary Text
</Typography>
```

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

### Basic Alert Component Usage

Source: https://context7_llms

This snippet demonstrates the default usage of the Alert component to display a brief, important message. By default, it uses the 'info' severity and 'standard' variant.

```tsx
import { Alert } from './Alert';

<Alert>This is an informational alert — check it out!</Alert>
```

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

### Nested Menus with Submenus

Source: https://context7_llms

Illustrates how menus can be nested to create submenus. This is achieved by using the MenuSub, MenuSubTrigger, and MenuSubContent components, allowing for hierarchical menu structures that organize complex navigation.

```tsx
import { Menu, MenuTrigger, MenuContent, MenuItem, MenuSub, MenuSubTrigger, MenuSubContent } from './Menu';
import { Button } from '../Button';

<Menu>
  <MenuTrigger asChild>
    <Button variant="outlined">Fruits Menu</Button>
  </MenuTrigger>
  <MenuContent>
    <MenuItem>Apple</MenuItem>
    <MenuSub>
      <MenuSubTrigger>More Fruits</MenuSubTrigger>
      <MenuSubContent>
        <MenuItem>Cherry</MenuItem>
        <MenuItem>Grape</MenuItem>
      </MenuSubContent>
    </MenuSub>
  </MenuContent>
</Menu>
```

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

### Truncating and Clamping Text with Truncate and LineClamp Components

Source: https://context7_llms

The Truncate and LineClamp components, which extend Typography, can be used to handle text overflow by truncating with an ellipsis for single-line or multi-line text. This example demonstrates their usage within a React component.

```tsx
import { Truncate, LineClamp } from './TextTreatments';

<Truncate variant="bodyLarge">
  This is a very long single line of text that will be truncated.
</Truncate>

<LineClamp variant="bodyLarge" lines={2}>
  This is a very long multi-line text that will be clamped to two lines with an ellipsis at the end if it overflows.
</LineClamp>
```

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

### Rich Tooltip Component

Source: https://context7_llms

The RichTooltip variant can display a title, body text, and action buttons, making it suitable for more complex information or quick actions.

```tsx
import { RichTooltip } from './Tooltip';
import { Button } from '../Button';

<RichTooltip
  title="Rich Tooltip"
  content="This tooltip can display a title, body text, and optional action buttons."
  action={
    <Button variant="text">Learn More</Button>
  }
>
  <Button variant="filled">Rich Tooltip</Button>
</RichTooltip>
```

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

### Badge Component with Dot

Source: https://context7_llms

A simple Badge component displaying a dot, often used for notifications or status indicators.

```tsx
import { Badge } from './Badge';

<Badge dot />
```

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

### Basic Tabs Component

Source: https://context7_llms

The Tabs component provides a way to navigate between different views or groups of content. It consists of a Tabs container and multiple Tab components.

```tsx
import { useState } from 'react';
import { Tabs, Tab } from './Tabs';

const PrimaryTabs = () => {
  const [value, setValue] = useState(0);

  return (
    <Tabs value={value} onChange={setValue}>
      <Tab label="Photos" />
      <Tab label="Videos" />
      <Tab label="Music" />
    </Tabs>
  );
};
```

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

### Horizontal RadioGroup

Source: https://context7_llms

The orientation of the RadioGroup can be set to 'horizontal' to lay out the radio buttons in a row.

```tsx
import { RadioButton, RadioGroup } from './RadioButton';

<RadioGroup label="Horizontal Radio Group" defaultValue="option1" orientation="horizontal">
  <RadioButton value="option1" label="Option 1" />
  <RadioButton value="option2" label="Option 2" />
  <RadioButton value="option3" label="Option 3" />
</RadioGroup>
```

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

### Basic Card Component

Source: https://context7_llms

This snippet shows a basic Card component with the 'elevated' variant, which uses a shadow to create depth. Cards are used to group related content and actions.

```tsx
import { Card } from './Card';
import { Typography } from '../Typography/Typography';

<Card variant="elevated">
  <div style={{ padding: '16px' }}>
    <Typography variant="titleMedium" gutterBottom>
      Basic Card
    </Typography>
    <Typography variant="bodyMedium">
      This is a basic card with elevated style. Cards contain content and actions about a single
      subject.
    </Typography>
  </div>
</Card>
```

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

### Vertical Slider Component

Source: https://context7_llms

The Slider can be oriented vertically by setting orientation="vertical".

```tsx
import { Slider } from './Slider';

<div style={{ height: '300px' }}>
  <Slider defaultValue={[50]} orientation="vertical" />
</div>
```

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

### Permanent Navigation Drawer for Desktop Layouts

Source: https://context7_llms

Illustrates a permanent NavigationDrawer which is always visible on the screen and suitable for desktop layouts. It pushes the main content to the side, providing a persistent navigation experience without obscuring content.

```tsx
import { NavigationDrawer, NavigationItem } from './NavigationDrawer';
import { MdHome } from 'react-icons/md';

<div style={{ display: 'flex' }}>
  <NavigationDrawer open={true} variant="permanent">

```

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

### Standard Icon Button

Source: https://context7_llms

The IconButton provides a circular touch target for an icon. The 'standard' variant has a transparent background with a state layer on interaction.

```tsx
import { IconButton } from './IconButton';
import { MdFavoriteBorder } from 'react-icons/md';

<IconButton variant="standard">
  <MdFavoriteBorder size={24} />
</IconButton>
```

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

### Badge Component with Variants

Source: https://context7_llms

The Badge component supports different color variants ('error', 'warning', 'success', 'info') to convey semantic meaning.

```tsx
import { Badge } from './Badge';

<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
  <Badge variant="error">3</Badge>
  <Badge variant="warning">12</Badge>
  <Badge variant="success">New</Badge>
  <Badge variant="info">99+</Badge>
</div>
```

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

### Alert Component with Different Visual Variants

Source: https://context7_llms

This snippet demonstrates the three visual variants of the Alert component: 'standard' (subtle background), 'filled' (solid background), and 'outlined' (bordered). These variants allow for different visual emphasis.

```tsx
import { Alert } from './Alert';

<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
  <Alert variant="standard" severity="info">
    Standard variant with subtle background color
  </Alert>
  <Alert variant="filled" severity="info">
    Filled variant with solid background color
  </Alert>
  <Alert variant="outlined" severity="info">
    Outlined variant with border and transparent background
  </Alert>
</div>
```

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

### Button Component with Icon

Source: https://context7_llms

An icon can be added to a Button component using the icon prop. Its position can be controlled with the iconPosition prop ('left' or 'right').

```tsx
import { Button } from './Button';
import { MdDownload } from 'react-icons/md';

<Button icon={<MdDownload size={16} />} iconPosition="left">
  Button with Left Icon
</Button>
```

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

### DatePicker with Date Restrictions

Source: https://context7_llms

The DatePicker can be configured to restrict selectable dates to a specific range using the minDate and maxDate props.

```tsx
import { useState } from 'react';
import { DatePicker } from './DatePicker';

const WithDateRestrictionsRender = () => {
  const [date, setDate] = useState<Date | null>(null);
  const today = new Date();
  const minDate = new Date(today.getFullYear() - 1, today.getMonth(), today.getDate());
  const maxDate = new Date(today.getFullYear() + 1, today.getMonth(), today.getDate());

  return (
```

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

### Multi-Select Segmented Button

Source: https://context7_llms

By adding the multiselect prop, the SegmentedButton can be configured to allow multiple selections. The selectedIds prop should be an array of strings.

```tsx
import { useState } from 'react';
import { SegmentedButton } from './Button';

const MultiSelectSegmentedButtonExample = () => {
  const [selected, setSelected] = useState<string[]>(['option1', 'option3']);

  return (
    <SegmentedButton
      multiselect
```

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

### Form Dialog Component

Source: https://context7_llms

This snippet demonstrates how to create a dialog containing a form. The 'footer' prop is used for action buttons like 'Cancel' and 'Submit', and the form is linked to the submit button via its ID for proper submission handling.

```tsx
import { Dialog, DialogTrigger, DialogClose, DialogContent } from './Dialog';
import { Button } from '../Button/Button';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Form Dialog</Button>
  </DialogTrigger>
  <DialogContent
    title="Create New Account"
    type="form"
    footer={
      <>
        <DialogClose asChild>
          <Button variant="text">Cancel</Button>
        </DialogClose>
        <Button type="submit" form="account-form">
          Create Account
        </Button>
      </>
    }
  >
    <form id="account-form">
      {/* Form fields go here */}
    </form>
  </DialogContent>
</Dialog>
```

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

### Select Component with Option Icons

Source: https://context7_llms

The Select component can display an icon next to each option in the dropdown menu, as well as an icon for the selected value in the input field.

```tsx
import { useState } from 'react';
import { Select } from './Select';
import { MdHome, MdWork } from 'react-icons/md';

const WithOptionIconsSelect = () => {
  const [value, setValue] = useState('home');
  const iconOptionsData = [
    { value: 'home', label: 'Home', icon: <MdHome size={20} /> },
    { value: 'work', label: 'Work', icon: <MdWork size={20} /> },
  ];

  return (
    <Select
      label="Location Type"
      value={value}
      onChange={setValue}
      options={iconOptionsData}
      variant="outlined"
    />
  );
};
```

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

### Indeterminate Linear Progress

Source: https://context7_llms

When the value prop is omitted, the Progress component enters an indeterminate state, which is used when the completion time of a process is unknown.

```tsx
import { Progress } from './Progress';

<Progress variant="linear" />
```

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

### Basic Typography Component

Source: https://context7_llms

The Typography component is used to render text with consistent styling based on the theme's type scale. The variant prop determines the style.

```tsx
import { Typography } from './Typography';

<Typography variant="headlineLarge">Headline Large</Typography>
<Typography variant="bodyMedium">This is some body text.</Typography>
```

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

### Menu with Selectable Items and State Management

Source: https://context7_llms

Shows how menu items can indicate a selected state, useful for settings or preference menus. The 'selected' prop on a MenuItem will display a checkmark icon, and state is managed using React's useState hook for dynamic updates.

```tsx
import { useState } from 'react';
import { Menu, MenuTrigger, MenuContent, MenuItem } from './Menu';
import { Button } from '../Button';

const SelectedItemsExample = () => {
  const [notifications, setNotifications] = useState(true);

  return (
    <Menu>
      <MenuTrigger asChild>
        <Button variant="outlined">Preferences</Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItem
          selected={notifications}
          onSelect={() => setNotifications(!notifications)}
        >
          Enable Notifications
        </MenuItem>
      </MenuContent>
    </Menu>
  );
};
```

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

### Card Component with Header and Footer

Source: https://context7_llms

The Card component can be structured with distinct header and footer sections using the headerContent and footerContent props, which is useful for titles and action buttons.

```tsx
import { Card } from './Card';
import { Typography } from '../Typography/Typography';
import { Button } from '../Button/Button';

<Card
  variant="outlined"
  headerContent={<Typography variant="titleMedium">Card Header</Typography>}
  footerContent={
    <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
      <Button variant="text">Cancel</Button>
      <Button>Save</Button>
    </div>
  }
>
  <div style={{ padding: '16px' }}>
    <Typography variant="bodyMedium">
      This card has a header and footer.
    </Typography>
  </div>
</Card>
```

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

### Scrollable Tabs Component

Source: https://context7_llms

When there are more tabs than can fit in the available space, the scrollable prop allows the user to scroll horizontally to view all tabs.

```tsx
import { useState } from 'react';
import { Tabs, Tab } from './Tabs';

const ScrollableTabs = () => {
  const [value, setValue] = useState(0);

  return (
    <div style={{ maxWidth: '400px' }}>
      <Tabs value={value} onChange={setValue} scrollable>
        <Tab label="Tab 1" />
        <Tab label="Tab 2" />
```

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

### Extended Floating Action Button (FAB)

Source: https://context7_llms

A FAB can be extended to include a text label by setting the extended prop to true and providing a label. This is useful for making the primary action more explicit.

```tsx
import { FAB } from './FAB';
import { MdMail } from 'react-icons/md';

<FAB extended label="Compose">
  <MdMail size={24} />
</FAB>
```

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

### Icon Toggle Button

Source: https://context7_llms

The IconToggle component is a button that allows users to toggle a selection on and off, such as favoriting an item. It animates between an outlined and a filled state.

```tsx
import { IconToggle } from './IconToggle';
import { IoMdHeart } from 'react-icons/io';

<IconToggle
  icon={<IoMdHeart />}
  activeColor="#FF0000"
  defaultActive={false}
  size={40}
  strokeWidth={20}
/>
```

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

### Interactive Card Component

Source: https://context7_llms

The interactive prop adds hover and focus effects to the Card, indicating to the user that it is a clickable element, suitable for navigation or selection.

```tsx
import { Card } from './Card';
import { Typography } from '../Typography/Typography';

<Card variant="elevated" interactive>
  <div style={{ padding: '16px' }}>
    <Typography variant="titleMedium" gutterBottom>
      Interactive Card
    </Typography>
    <Typography variant="bodyMedium">
      This card is interactive and has hover effects.
    </Typography>
  </div>
</Card>
```

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

### Segmented Button Component

Source: https://context7_llms

The SegmentedButton component allows users to select one option from a set. It is created by wrapping multiple SegmentedButton.Segment components.

```tsx
import { useState } from 'react';
import { SegmentedButton } from './Button';

const BasicSegmentedButtonExample = () => {
  const [selected, setSelected] = useState<string>('option1');

  return (
    <SegmentedButton selectedIds={selected} onSelect={id => setSelected(id as string)}>
      <SegmentedButton.Segment id="option1">Option 1</SegmentedButton.Segment>
      <SegmentedButton.Segment id="option2">Option 2</SegmentedButton.Segment>
      <SegmentedButton.Segment id="option3">Option 3</SegmentedButton.Segment>
    </SegmentedButton>
  );
};
```

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

### Avatar Component with Fallback

Source: https://context7_llms

This snippet demonstrates the fallback behavior of the Avatar component. When the src URL is invalid or the image fails to load, the component displays the provided fallback text.

```tsx
import { Avatar } from './Avatar';

<Avatar
  src="https://invalid-url.example.com/broken-image.jpg"
  alt="Broken Image"
  fallback="AB"
  size={40}
/>
```

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

### Basic Navigation Rail

Source: https://context7_llms

The NavigationRail provides access to primary destinations in an app, typically on tablet and desktop screens. It displays a column of icons and optional text labels.

```tsx
import { useState } from 'react';
import { NavigationRail, NavigationRailItem } from './NavigationRail';
import { MdHome, MdSearch, MdSettings } from 'react-icons/md';

const BasicNavigationRail = () => {
  const [selected, setSelected] = useState(0);

  return (
    <NavigationRail>
      <NavigationRailItem
        icon={<MdHome size={24} />}
        label="Home"
        selected={selected === 0}
        onClick={() => setSelected(0)}
      />
      <NavigationRailItem
        icon={<MdSearch size={24} />}
        label="Search"
        selected={selected === 1}
        onClick={() => setSelected(1)}
      />
      <NavigationRailItem
        icon={<MdSettings size={24} />}
        label="Settings"
        selected={selected === 2}
        onClick={() => setSelected(2)}
      />
    </NavigationRail>
  );
};
```

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

### Badge Component with Maximum Count

Source: https://context7_llms

The max prop can be used to cap the displayed number on a Badge. Any number greater than max will be displayed as max+.

```tsx
import { Badge } from './Badge';

<Badge max={99}>150</Badge>
```

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

### Basic Badge Component

Source: https://context7_llms

This snippet shows a basic Badge component used to display a count, such as the number of notifications. By default, it uses the 'error' variant color.

```tsx
import { Badge } from './Badge';

<Badge>5</Badge>
```

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

### Filter Chip Component

Source: https://context7_llms

Filter chips are used to filter content. They can be selected or deselected, and their state is often indicated by a leading checkmark icon when selected.

```tsx
import { useState } from 'react';
import { Chip, ChipSet } from './';

const FilterChipsExample = () => {
  const [selected, setSelected] = useState(true);

  return (
    <ChipSet>
      <Chip
        variant="filter"
        label="Slides"
        selected={selected}
        onClick={() => setSelected(!selected)}
      />
    </ChipSet>
  );
};
```

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

### Avatar Component with Custom Colors

Source: https://context7_llms

The background and text colors of the fallback state in the Avatar component can be customized using the fallbackColor and textColor props.

```tsx
import { Avatar } from './Avatar';

<Avatar
  fallback="CC"
  size={48}
  fallbackColor="#4CAF50"
  textColor="#FFFFFF"
/>
```

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

### Using the useYodaTheme Hook for Theme Access

Source: https://context7_llms

The `useYodaTheme` hook provides a convenient way for any component nested within the `YodaThemeProvider` to access the current theme object. It also exposes functions, such as `toggleTheme`, allowing components to programmatically change the application's theme mode.

```tsx
import { useYodaTheme } from './useYodaTheme';
import { Button } from '../Button';

const ThemeToggler = () => {
  const { theme, toggleTheme } = useYodaTheme();

  return (
    <Button onClick={toggleTheme}>
      Switch to {theme.mode === 'light' ? 'Dark' : 'Light'} Mode
    </Button>
  );
};
```

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

### Range Slider Component

Source: https://context7_llms

By setting thumbCount={2}, the Slider can be used to select a range of values. The defaultValue or value prop should be an array with two numbers.

```tsx
import { Slider } from './Slider';

<Slider
  defaultValue={[25, 75]}
  thumbCount={2}
  min={0}
  max={100}
/>
```