### Default Kbd Example

Source: https://github.com/buridan-ui/ui/blob/main/docs/components/kbd.md

A basic example showing a single styled keyboard key.

```html
<kbd>A</kbd>
```

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

### Preview Card Manual Installation

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/preview-card.md

This snippet shows the manual setup for the Preview Card component, defining static methods for positioner, popup, arrow, and class names, along with the main call method.

```python
positioner = staticmethod(PreviewCardPositioner.create)
popup = staticmethod(PreviewCardPopup.create)
arrow = staticmethod(PreviewCardArrow.create)
class_names = ClassNames
__call__ = staticmethod(HighLevelPreviewCard.create)


preview_card = PreviewCard()
```

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

### Dialog Component Setup

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/dialog.md

Manual installation setup for the Dialog component. This includes defining static methods for title, description, and close actions, along with class names and the high-level dialog creation method.

```python
title = staticmethod(DialogTitle.create)
description = staticmethod(DialogDescription.create)
close = staticmethod(DialogClose.create)
class_names = ClassNames
__call__ = staticmethod(HighLevelDialog.create)


dialog = Dialog()
```

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

### Manual Installation of Collapsible

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/collapsible.md

This snippet shows the manual installation setup for the Collapsible component. It defines class names and the creation method.

```python
class_names = ClassNames
__call__ = staticmethod(HighLevelCollapsible.create)


collapsible = Collapsible()
```

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

### Manual Installation of Select Component

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/select.md

Illustrates the manual installation process for the Select component, showing how to create and assemble its various parts.

```python
SelectIcon.create(
                        select_arrow(class_name="size-4 text-secondary-9")
                    ),
                    variant="outline",
                    size=size,
                    type="button",
                    class_name=ClassNames.TRIGGER,
                    disabled=props.get("disabled", False),
                ),
            ),
            SelectPortal.create(
                SelectPositioner.create(
                    SelectPopup.create(
                        items_children,
                        class_name=cn(
                            ClassNames.POPUP,
                            "",
                            # f"rounded-[calc(var(--radius-ui-{size})+0.25rem)]",
                        ),
                    ),
                    **positioner_props,
                ),
                **portal_props,
            ),
            *children,
            **props,
        )

```

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

### Install Reflex Framework

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/getting-started/installation.md

Install the Reflex framework, which is used to build Buridan UI components. This command installs the latest version.

```bash
pip install reflex
```

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

### Set up virtual environment and install dependencies

Source: https://github.com/buridan-ui/ui/blob/main/CONTRIBUTING.md

Creates a virtual environment using uv, activates it, and installs project dependencies. This is a crucial step for local development.

```bash
uv venv
source .venv/bin/activate  # On Windows: .venv\Scripts\activate
uv pip install -e .
```

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

### Basic Accordion Example

Source: https://github.com/buridan-ui/ui/blob/main/docs/components/accordion.md

Demonstrates a basic accordion setup where only one item can be open at a time. The first item is open by default.

```python
accordion_example
```

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

### Basic Switch Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/switch.md

This example demonstrates how to render a basic switch component that is initially checked.

```python
def switch_example():
    """A basic switch example."""
    return switch(default_checked=True)
```

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

### Create component examples for documentation

Source: https://github.com/buridan-ui/ui/blob/main/CONTRIBUTING.md

Provides example functions for showcasing a component's variations in documentation. Each function should represent a distinct usage or style.

```python
import reflex as rx
from .my_component import my_component

def my_component_demo():
    return my_component()

def my_component_with_style():
    return my_component(style={"border": "1px solid red"})
```

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

### Install Theme Switcher Component

Source: https://github.com/buridan-ui/ui/blob/main/docs/components/theme_switcher.md

Copy this code into your app directory to install the theme switcher component.

```bash
theme_switcher
buridan add component theme_switcher
```

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

### General Drawer Usage Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/drawer.md

A high-level example demonstrating the basic structure and content of a drawer component.

```python
def drawer_example():
    """A high-level drawer example."""
    return drawer(
        trigger=button("Open Drawer", variant="outline"),
        title="Drawer Title",
        description="This is a description of the drawer.",
        content=rx.box(
            rx.text("This is the content of the drawer."),
            class_name="p-4",
        ),
    )
```

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

### Basic Theme Switcher Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/theme-switcher.md

Demonstrates a basic usage of the theme switcher component.

```python
def theme_switcher_example():
    """A basic theme switcher example."""
    return theme_switcher()
```

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

### Basic Tooltip Example

Source: https://github.com/buridan-ui/ui/blob/main/docs/components/tooltip.md

A fundamental example showcasing the high-level API for the Tooltip component.

```python
# tooltip_example
```

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

### Install Buridan UI CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/getting-started/cli.md

Install the Buridan UI CLI using pip. This command should be run in your terminal.

```bash
pip install buridan-ui
```

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

### Install Select Component via CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/select.md

Use this command to add the Select component to your project.

```bash
buridan add component select
```

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

### Basic Skeleton Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/skeleton.md

A basic example demonstrating the usage of the skeleton component with specified height, width, and rounded corners.

```python
def skeleton_example():
    """A basic skeleton example."""
    return skeleton_component(class_name="h-8 w-32 rounded-md")

```

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

### Basic Link Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/link.md

Demonstrates the creation of a simple link with text and a href attribute.

```python
def link_example():
    """A basic link example."""
    return link("This is a link", href="#")
```

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

### Basic Navigation Menu Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/navigation-menu.md

Demonstrates the creation of a basic navigation menu with nested items and links.

```python
def navigation_menu_example():
    """A basic navigation menu example."""
    return navigation_menu.root(
        navigation_menu.list(
            navigation_menu.item(
                navigation_menu.trigger("File"),
                navigation_menu.content(
                    navigation_menu.link("New File", href="#"),
                    navigation_menu.link("Open File", href="#"),
                    navigation_menu.link("Save File", href="#"),
                ),
            ),
            navigation_menu.item(
                navigation_menu.trigger("Edit"),
                navigation_menu.content(
                    navigation_menu.link("Undo", href="#"),
                    navigation_menu.link("Redo", href="#"),
                    navigation_menu.link("Cut", href="#"),
                    navigation_menu.link("Copy", href="#"),
                    navigation_menu.link("Paste", href="#"),
                ),
            ),
            navigation_menu.item(
                navigation_menu.link("View", href="#"),
            ),
        ),
    )
```

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

### Manual Installation of Tooltip Component

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/tooltip.md

This Python code snippet shows the necessary imports and type definitions for manually installing the Tooltip component.

```python
"""Tooltip component from base-ui components."""

from typing import Literal

from reflex.components.component import Component, ComponentNamespace
from reflex.event import EventHandler, passthrough_event_spec
from reflex.utils.imports import ImportVar
from reflex.vars.base import Var

from ..base_ui import PACKAGE_NAME, BaseUIComponent
from ...icons.others import arrow_svg

LiteralSide = Literal["top", "right", "bottom", "left", "inline-end", "inline-start"]
LiteralAlign = Literal["start", "center", "end"]
LiteralPositionMethod = Literal["absolute", "fixed"]
LiteralTrackCursorAxis = Literal["none", "bottom", "x", "y"]

```

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

### Install Kbd Component via CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/kbd.md

Use the CLI command to add the Kbd component to your project.

```bash
buridan add component kbd
```

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

### Install Popover Component

Source: https://github.com/buridan-ui/ui/blob/main/docs/components/popover.md

Copy this code to install the Popover component into your app directory. This can be done via CLI or manually.

```bash
Popover
buridan add component popover
```

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

### Link with Icon Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/link.md

Demonstrates how to display a link with an accompanying icon by setting the show_icon prop to True.

```python
def link_with_icon():
    """Link example with an icon."""
    return link("Link with icon", href="#", show_icon=True)
```

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

### Install React Spinner via CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/wrapped-components/react-spinner.md

Use the Buridan CLI to add the react-spinner component to your project.

```bash
buridan add wrapped-react react_spinner
```

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

### Basic Tooltip Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/getting-started/charting.md

A basic example demonstrating a tooltip component triggered by a button. This snippet shows a simple tooltip with static content.

```python
def tooltip_example():
    """A basic tooltip example."""
    return tooltip(
        trigger=button("Hover Me"),
        content="This is a tooltip!",
    )
```

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

### Toggle Pattern Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/getting-started/client-state-var.md

Implement a toggle pattern using `ClientStateVar`. This example shows how to toggle a boolean state variable using buttons to control visibility.

```python
def toggle_pattern_example():
    is_visible = ClientStateVar.create("visibility", False)

    return rx.fragment(
        # Toggle with current value
        rx.button("Toggle", on_click=is_visible.set_value(~is_visible.value)),
        # Or use a more explicit approach
        rx.button("Show", on_click=is_visible.set_value(True)),
        rx.button("Hide", on_click=is_visible.set_value(False)),
    )
```

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

### Manual Installation of Textarea Component

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/textarea.md

This Python code provides the manual installation steps for the custom Textarea component, including its class definitions and creation method.

```python
"""Custom Textarea component."""

from reflex.components.component import Component
from reflex.components.el import Textarea as TextareaComponent

from ..component import CoreComponent


class ClassNames:
    """Class names for textarea components."""

    ROOT = "focus:shadow-[0px_0px_0px_2px_var(--primary-4)] focus:border-primary-7 focus:hover:border-primary-7 bg-secondary-1 border border-secondary-a4 hover:border-secondary-a6 transition-[color,box-shadow] disabled:border-secondary-4 disabled:bg-secondary-3 disabled:text-secondary-8 disabled:cursor-not-allowed cursor-text min-h-24 rounded-ui-md text-secondary-12 placeholder:text-secondary-9 text-sm disabled:placeholder:text-secondary-8 w-full outline-none max-h-[15rem] resize-none overflow-y-auto px-3 py-2.5 font-medium"


class Textarea(TextareaComponent, CoreComponent):
    """Root component for Textarea."""

    @classmethod
    def create(cls, *children, **props) -> Component:
        """Create the textarea component."""
        props.setdefault(
            "custom_attrs",
            {
                "autoComplete": "off",
                "autoCapitalize": "none",
                "autoCorrect": "off",
                "spellCheck": "false",
            },
        )
        props["data-slot"] = "textarea"
        cls.set_class_name(ClassNames.ROOT, props)
        return super().create(*children, **props)


textarea = Textarea.create

```

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

### Install Menu Component via CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/menu.md

Use this command to add the menu component to your project.

```bash
buridan add component menu
```

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

### Skeleton Example for Card Loading State

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/skeleton.md

This example simulates a loading card state using multiple skeleton components for different elements like profile picture and text.

```python
def skeleton_card_example():
    """A skeleton example simulating a loading card."""
    return rx.box(
        rx.flex(
            skeleton_component(class_name="h-12 w-12 rounded-full"),
            rx.flex(
                skeleton_component(class_name="h-4 w-[250px] rounded-md"),
                skeleton_component(class_name="h-4 w-[200px] rounded-md"),
                direction="column",
                spacing="2",
            ),
            spacing="4",
        ),
        class_name="flex items-center space-x-4 rounded-md border p-4 w-96",
    )

```

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

### Link Sizes Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/link.md

Showcases the link component with various size options, from extra-small to extra-large.

```python
def link_sizes():
    """Link examples with different sizes."""
    return rx.box(
        link("X-Small Link", href="#", size="xs"),
        link("Small Link", href="#", size="sm"),
        link("Medium Link", href="#", size="md"),
        link("Large Link", href="#", size="lg"),
        link("X-Large Link", href="#", size="xl"),
        class_name="flex flex-col items-start gap-4",
    )
```

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

### Install React Typed Component

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/wrapped-components/react-typed.md

Use the CLI command to add the wrapped react component to your project.

```bash
buridan add wrapped-react react_typed
```

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

### Install Link Component via CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/link.md

Use the CLI command to add the link component to your project.

```bash
buridan add component link
```

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

### Install Accordion Component via CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/accordion.md

Use the Buridan CLI to add the Accordion component to your project.

```bash
buridan add component accordion
```

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

### Initialize and Navigate to Reflex Project

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/getting-started/installation.md

Create a new Reflex web application and navigate to its root directory, where the `rxconfig.py` file is located. This is necessary before running Buridan CLI commands.

```bash
reflex init my_app_name
cd my_app_name
```

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

### Run the development server

Source: https://github.com/buridan-ui/ui/blob/main/CONTRIBUTING.md

Starts the Reflex development server to preview changes locally. Access the application at http://localhost:3000.

```bash
reflex run
```

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

### Install uv package manager

Source: https://github.com/buridan-ui/ui/blob/main/CONTRIBUTING.md

Installs the uv package manager, a fast Python package installer. Ensure Python 3.10+ is installed.

```bash
pip install uv
```

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

### Install Preview Card Component via CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/preview-card.md

Use this command to add the preview card component to your project.

```bash
buridan add component preview_card
```

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

### Disabled Toggle Group Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/toggle-group.md

A disabled toggle group example.

```APIDOC
## Disabled Toggle Group

### Description
A disabled toggle group example.

### Code
```python
def toggle_group_disabled():
    """A disabled toggle group example."""
    return toggle_group(
        toggle(rx.icon("bold"), value="bold"),
        toggle(rx.icon("italic"), value="italic"),
        toggle(rx.icon("underline"), value="underline"),
        disabled=True,
    )
```
```

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

### Basic Preview Card Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/preview-card.md

Demonstrates a basic usage of the preview_card component with a link trigger and rich content.

```python
def preview_card_example():
    """A basic preview card example."""
    return preview_card(
        trigger=link("@reflexdev", href="https://github.com/reflex-dev"),
        content=rx.box(
            rx.avatar(fallback="R", size="3"),
            rx.box(
                rx.text("Reflex", weight="bold"),
                rx.text("@reflexdev"),
            ),
            rx.text("Components, animations. Open source."),
            rx.box(
                rx.image(src="/github_readme.webp", width="100%"),
            ),
            spacing="2",
        ),
    )
```

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

### Fuse.js Data Structure Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/javascript-integrations/fuse-js.md

Example JSON structure for the data to be searched by Fuse.js.

```json
[
  {
    "title": "Battle for Natural",
    "author": {
      "firstName": "Emily",
      "lastName": "Cain"
    }
  }
]
```

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

### Multiple Selection Toggle Group Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/toggle-group.md

A toggle group example allowing multiple selections.

```APIDOC
## Multiple Selection Toggle Group

### Description
A toggle group example allowing multiple selections.

### Code
```python
def toggle_group_multiple():
    """A toggle group example allowing multiple selections."""
    return toggle_group(
        toggle(rx.icon("align-left"), value="left"),
        toggle(rx.icon("align-center"), value="center"),
        toggle(rx.icon("align-right"), value="right"),
        toggle_multiple=True,
        default_value=["left", "right"],
    )
```
```

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

### Initialize a New Reflex Project

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/getting-started/dashboard.md

Use the Reflex CLI to create a new project with a blank template. This sets up the basic project structure.

```bash
reflex init --name app
```

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

### General Toggle Group Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/toggle-group.md

A basic toggle group example demonstrating single selection.

```APIDOC
## General Toggle Group

### Description
A basic toggle group example.

### Code
```python
def toggle_group_example():
    """A basic toggle group example."""
    return toggle_group(
        toggle(rx.icon("bold"), value="bold"),
        toggle(rx.icon("italic"), value="italic"),
        toggle(rx.icon("underline"), value="underline"),
        default_value=["bold"],
    )
```
```

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

### Default Kbd Component Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/kbd.md

Demonstrates the default usage of the Kbd component, showing styled keyboard keys and shortcuts with modifier keys.

```python
def kbd_demo():
    """
    Example matching the shadcn KbdDemo component.
    Shows keyboard shortcuts with modifier keys.
    """
    return rx.box(
        # Mac modifier keys
        kbd_group(
            kbd("⌘"),
            kbd("⇧"),
            kbd("⌥"),
            kbd("⌃"),
        ),
        # Keyboard shortcut combination
        kbd_group(
            kbd("Ctrl"),
            rx.el.span("+"),
            kbd("B"),
        ),
        class_name="flex flex-col items-center gap-4 p-8",
    )
```

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

### Low-Level Tooltip Group Example

Source: https://github.com/buridan-ui/ui/blob/main/docs/components/tooltip.md

Example of constructing a group of icon tooltips utilizing the low-level API.

```python
# tooltip_group_example
```

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

### URL Input Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/input-group.md

Shows how to use `input_with_addons` to create a URL input field with a 'https://' prefix and '.com' suffix.

```python
def input_url():
    return rx.el.div(
        input_with_addons(
            placeholder="example.com",
            prefix="https://",
            suffix=".com",
        ),
        class_name="w-full max-w-sm mx-auto py-6",
    )
```

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

### Basic Select Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/select.md

Demonstrates a simple select component with a list of items and a placeholder. Use this for standard dropdown selections.

```python
def select_example():
    """A basic select example."""
    return select(
        items=["Apple", "Banana", "Orange", "Grape"],
        placeholder="Select a fruit",
        class_name="w-48",
    )
```

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

### Install pre-commit hooks

Source: https://github.com/buridan-ui/ui/blob/main/CONTRIBUTING.md

Installs pre-commit hooks to automatically format code before commits. This ensures code style consistency across the project.

```bash
pre-commit install
```

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

### Manual Installation of Skeleton Component

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/skeleton.md

This Python code defines the skeleton component for manual installation. It includes class names and a function to create the component.

```python
"""Custom skeleton component."""

from reflex.components.component import Component
from reflex.components.el import Div
from reflex.vars.base import Var

from ...utils.twmerge import cn


class ClassNames:
    """Class names for skeleton component."""

    ROOT = "animate-pulse bg-secondary-6"


def skeleton_component(
    class_name: str | Var[str] = "",
) -> Component:
    """Skeleton component."""
    return Div.create(class_name=cn(ClassNames.ROOT, class_name))


skeleton = skeleton_component

```

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

### Install Navigation Menu via CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/navigation-menu.md

Use the Buridan CLI to add the navigation_menu component to your app directory.

```bash
buridan add component navigation_menu
```

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

### Install Input Component via CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/input.md

Use this command to add the input component to your project using the Buridan CLI.

```bash
buridan add component input
```

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

### Linear Line Chart Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/charts/line-chart.md

A line chart that displays data using straight line segments between points. It utilizes the same helper functions as the basic example.

```python
def linechart_v2():
    data = [
        {"month": "Jan", "desktop": 186},
        {"month": "Feb", "desktop": 305},
        {"month": "Mar", "desktop": 237},
        {"month": "Apr", "desktop": 73},
        {"month": "May", "desktop": 209},
        {"month": "Jun", "desktop": 214},
    ]

    return rx.box(
        info(
            "Line Chart - Linear",
            "3",
            "Showing total visitors for the last 6 months",
            "start",
        ),
        rx.recharts.line_chart(
            get_tooltip(),
            get_cartesian_grid(),
            rx.recharts.line(
                data_key="desktop",
                stroke="var(--chart-1)",
                stroke_width=2,
                type_="linear",
                dot=False,
            ),
            get_x_axis("month"),
            data=data,
            width="100%",
            height=250,
        ),
        info("Trending up by 5.2% this month", "2", "January - June 2024", "start"),
        class_name="w-full flex flex-col gap-y-4 p-1 [&_.recharts-tooltip-item-separator]:w-full",
    )
```

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

### Icon-Only Button Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/button.md

Demonstrates icon-only buttons with varying sizes, suitable for compact UI elements where space is limited. Includes an example with a mail icon.

```python
def button_icon_examples():
    return (
        button(rx.icon("mail", class_name="size-4"), variant="outline", size="icon-sm"),
    )
```

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

### Button Component Examples by Size

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/button.md

Demonstrates the usage of the Button component with different predefined sizes, including small, default, and large.

```python
def button_size_examples():
    return rx.el.div(
        button("Small", size="sm"),
        button("Default", size="default"),
        button("Large", size="lg"),
        class_name="flex items-center gap-3",
    )
```

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

### Badge Component Examples

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/badge.md

Demonstrates various ways to use the Badge component with different variants and content, including text and icons.

```python
def badge_demo():
    return rx.box(
        rx.box(
            badge("Badge"),
            badge("Secondary", variant="secondary"),
            badge("Destructive", variant="destructive"),
            badge("Outline", variant="outline"),
            class_name="flex w-full flex-wrap gap-2",
        ),
        rx.box(
            badge(
                rx.icon(tag="badge-check"),
                "Verified",
                variant="secondary",
                class_name="bg-blue-500 text-white dark:bg-blue-600",
            ),
            badge(
                "8",
                class_name="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums",
            ),
            badge(
                "99",
                variant="destructive",
                class_name="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums",
            ),
            badge(
                "20+",
                variant="outline",
                class_name="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums",
            ),
            class_name="flex w-full flex-wrap gap-2",
        ),
        class_name="flex flex-col items-center gap-2 p-8",
    )
```

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

### Manual Installation of Button Component

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/button.md

This Python code provides the manual installation of the Button component, including its class definition, variants, sizes, and helper methods for validation.

```python
from typing import Literal

from reflex.components.core.cond import cond
from reflex.components.el import Button as BaseButton
from reflex.vars.base import Var

from ..component import CoreComponent
from ...icons.others import spinner

LiteralButtonVariant = Literal[
    "primary", "destructive", "outline", "secondary", "ghost", "link", "dark"
]
LiteralButtonSize = Literal[
    "xs", "sm", "md", "lg", "xl", "icon-xs", "icon-sm", "icon-md", "icon-lg", "icon-xl"
]

DEFAULT_CLASS_NAME = (
    "inline-flex items-center justify-center gap-2 whitespace-nowrap "
    "rounded-md text-sm font-medium transition-all "
    "disabled:pointer-events-none disabled:opacity-50 outline-none "
    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 "
    "[&_svg]:shrink-0 shrink-0"
)

BUTTON_VARIANTS = {
    "variant": {
        "default": "bg-primary text-primary-foreground hover:bg-primary/90",
        "destructive": (
            "bg-[var(--destructive)] text-white hover:bg-[var(--destructive)]/90 "
            "focus-visible:ring-[var(--destructive)]/20 "
            "dark:focus-visible:ring-[var(--destructive)]/40 "
            "dark:bg-[var(--destructive)]/60"
        ),
        "outline": (
            "border border-input bg-background shadow-xs "
            "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] "
            "dark:bg-[var(--input)]/30 dark:border-input "
            "dark:hover:bg-[var(--input)]/50"
        ),
        "secondary": ("bg-secondary text-secondary-foreground hover:bg-secondary/80"),
        "ghost": (
            "hover:bg-accent hover:text-accent-foreground "
            "dark:hover:bg-[var(--accent)]/50"
        ),
        "link": "text-primary underline-offset-4 hover:underline",
    },
    "size": {
        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
        "icon": "size-9",
        "icon-sm": "size-8",
        "icon-lg": "size-10",
    },
}


class Button(BaseButton, CoreComponent):
    """A custom button component."""

    # Button variant. Defaults to "primary".
    variant: Var[LiteralButtonVariant]

    # Button size. Defaults to "md".
    size: Var[LiteralButtonSize]

    # The loading state of the button
    loading: Var[bool]

    @classmethod
    def create(cls, *children, **props) -> BaseButton:
        """Create the button component."""
        variant = props.pop("variant", "default")
        cls.validate_variant(variant)

        size = props.pop("size", "default")
        cls.validate_size(size)

        loading = props.pop("loading", False)
        disabled = props.pop("disabled", False)

        button_classes = f"{DEFAULT_CLASS_NAME} {BUTTON_VARIANTS['variant'][variant]} {BUTTON_VARIANTS['size'][size]}"

        cls.set_class_name(button_classes, props)

        children_list = list(children)

        if isinstance(loading, Var):
            props["disabled"] = cond(loading, True, disabled)
            children_list.insert(0, cond(loading, spinner()))
        else:
            props["disabled"] = True if loading else disabled
            children_list.insert(0, spinner()) if loading else None

        return super().create(*children_list, **props)

    @staticmethod
    def validate_variant(variant: LiteralButtonVariant):
        """Validate the button variant."""
        if variant not in BUTTON_VARIANTS["variant"]:
            available_variants = ", ".join(BUTTON_VARIANTS["variant"].keys())
            message = (
                f"Invalid variant: {variant}. Available variants: {available_variants}"
            )
            raise ValueError(message)

    @staticmethod
    def validate_size(size: LiteralButtonSize):
        """Validate the button size."""
        if size not in BUTTON_VARIANTS["size"]:
            available_sizes = ", ".join(BUTTON_VARIANTS["size"].keys())
            message = f"Invalid size: {size}. Available sizes: {available_sizes}"
            raise ValueError(message)

    def _exclude_props(self) -> list[str]:
        return [
            *super()._exclude_props(),
            "size",
            "variant",
            "loading",
        ]


button = Button.create
```

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

### Install Tooltip via CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/tooltip.md

Use this command to add the Tooltip component to your app directory using the CLI.

```bash
buridan add component tooltip
```

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

### Doughnut Chart Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/charts/doughnut-chart.md

A customizable doughnut chart with flexible styling and data visualization options. This example demonstrates how to create a basic doughnut chart with custom colors and a legend.

```python
import reflex as rx

tooltip = {
    "is_animation_active": False,
    "separator": "",
    "cursor": False,
    "item_style": {
        "color": "currentColor",
        "display": "flex",
        "paddingBottom": "0px",
        "justifyContent": "space-between",
        "textTransform": "capitalize",
    },
    "label_style": {
        "color": rx.color("slate", 10),
        "fontWeight": "500",
    },
    "content_style": {
        "background": rx.color_mode_cond("oklch(0.97 0.00 0)", "oklch(0.14 0.00 286)"),
        "borderColor": rx.color("slate", 5),
        "borderRadius": "5px",
        "fontFamily": "IBM Plex Mono,ui-monospace,monospace",
        "fontSize": "0.875rem",
        "lineHeight": "1.25rem",
        "fontWeight": "500",
        "letterSpacing": "-0.01rem",
        "minWidth": "8rem",
        "width": "175px",
        "padding": "0.375rem 0.625rem ",
        "position": "relative",
    },
}

def info(title: str, size: str, subtitle: str, align: str):
    return rx.vstack(
        rx.heading(title, size=size, weight="bold"),
        rx.text(subtitle, size="1", color=rx.color("slate", 11), weight="medium"),
        spacing="1",
        align=align,
    )

def get_tooltip():
    """Standard tooltip for all charts."""
    return rx.recharts.graphing_tooltip(**tooltip)

def get_cartesian_grid():
    """Standard cartesian grid for charts."""
    return rx.recharts.cartesian_grid(
        horizontal=True, vertical=False, class_name="opacity-25"
    )

def get_x_axis(data_key: str):
    """Standard X axis configuration."""
    return rx.recharts.x_axis(
        data_key=data_key,
        axis_line=False,
        tick_size=10,
        tick_line=False,
        custom_attrs={"fontSize": "12px"},
        interval="preserveStartEnd",
    )

def doughnutchart_v1():
    data = [
        {"browser": "chrome", "visitors": 275},
        {"browser": "safari", "visitors": 200},
        {"browser": "firefox", "visitors": 187},
        {"browser": "edge", "visitors": 173},
        {"browser": "other", "visitors": 90},
    ]

    return rx.el.div(
        rx.recharts.pie_chart(
            rx.recharts.pie(
                rx.foreach(
                    ["red", "blue", "green", "amber", "purple"],
                    lambda color, index: rx.recharts.cell(
                        fill="var(--chart-2)", class_name=f"theme-{color}"
                    ),
                ),
                data=data,
                data_key="visitors",
                name_key="browser",
                stroke="0",
                inner_radius=90,
                custom_attrs={"paddingAngle": 3, "cornerRadius": 5},
            ),
            width="100%",
            height=350,
            class_name="w-[100%] [&_.recharts-tooltip-item-separator]:w-full",
        ),
        rx.hstack(
            rx.foreach(
                [
                    ["Chrome", "red"],
                    ["Safari", "blue"],
                    ["Firefox", "green"],
                    ["Edge", "amber"],
                    ["Other", "purple"],
                ],
                lambda key: rx.hstack(
                    rx.box(class_name="w-3 h-3 rounded-sm", bg=rx.color(key[1])),
                    rx.text(
                        key[0],
                        class_name="text-sm font-semibold",
                        color=rx.color("slate", 11),
                    ),
                    align="center",
                    spacing="2",
                ),
            ),
            class_name="py-4 px-4 flex w-full justify-center flex-wrap",
        ),
        class_name="flex flex-col size-full relative",
    )

```

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

### Install Context Menu Component via CLI

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/context-menu.md

Use this command to add the context menu component to your app directory.

```bash
buridan add component context_menu
```

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

### Scroll Area Manual Installation Properties

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/scroll-area.md

Configuration options for manual installation of the Scroll Area component. The `keep_mounted` variable controls whether the HTML element remains in the DOM when not scrollable.

```python
# Whether to keep the HTML element in the DOM when the viewport isn't scrollable
keep_mounted: Var[bool] = Var.create(False)

# Props for different component parts
_scrollbar_props = {"orientation", "keep_mounted"}
```

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

### Tabs Example with Icons

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/tabs.md

Shows how to integrate icons within the tabs for a more visually enhanced interface. Suitable when icons can improve clarity or aesthetics.

```python
def tabs_with_icons():
    """Tabs example with icons."""
    return tabs.root(
        tabs.list(
            tabs.tab(rx.icon("user"), "Account", value="account"),
            tabs.tab(rx.icon("lock"), "Password", value="password"),
        ),
        tabs.panel(
            rx.text("Account settings with icons."),
            value="account",
        ),
        tabs.panel(
            rx.text("Password settings with icons."),
            value="password",
        ),
        default_value="account",
        class_name="w-96",
    )
```

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

### Switch with Label Example

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/switch.md

This example shows how to associate a label with a switch component for improved accessibility and user experience. The label's 'html_for' attribute should match the switch's 'id'.

```python
def switch_with_label():
    """A switch example with a label."""
    return rx.flex(
        switch(default_checked=False, id="airplane-mode"),
        rx.el.label("Airplane Mode", html_for="airplane-mode"),
        spacing="2",
    )
```

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

### Structure Main Content Section with Components

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/getting-started/dashboard.md

This example demonstrates how to structure the main content area of a dashboard. It includes a placeholder for the content header and examples of where to place other components like charts and tables within a scrollable area.

```python
def main_content_section_example():
    # Assuming content_header, my_chart_component, my_table_component are defined elsewhere
    def content_header():
        return rx.box("Content Header")

    def my_chart_component():
        return rx.box("My Chart Component")

    def my_table_component():
        return rx.box("My Table Component")

    return rx.scroll_area(
        content_header(),
        my_chart_component(),
        my_table_component(),
        # ...
    )
```

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

### Chart State Management Example

Source: https://github.com/buridan-ui/ui/blob/main/docs/getting_started/charting.md

Demonstrates how to manage state for charts in a full-stack data application. This approach is useful for handling dynamic data.

```python
from reflex import State

class ChartingStateExample(State):
    """State for charting examples."""
    chart_data: list[dict] = [
        {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
        {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
        {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
        {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
        {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
        {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    ]
```

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

### Check Reflex Version

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/getting-started/installation.md

Ensure that the latest version of the Reflex framework is installed on your system.

```bash
reflex --version
```

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

### Reflex App Setup with Quill Resources

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/javascript-integrations/quill-js.md

Configures the Reflex application by adding the necessary Quill stylesheet, custom fonts, library script, and initialization script to the head components.

```python
app = rx.App(
    head_components=[
        quill_stylesheet(),
        quill_custom_font(),
        quill_lib(),
        quill_init(),
    ],
)
```

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

### Low Level Context Menu Demo

Source: https://github.com/buridan-ui/ui/blob/main/assets/docs/components/context-menu.md

Demonstrates the low-level construction of a context menu with radio items. This allows for fine-grained control over menu appearance and behavior.

```python
                            ),
                            context_menu.radio_item(
                                context_menu.radio_item_indicator(
                                    rx.icon(
                                        tag="circle", class_name="size-2 fill-current"
                                    ),
                                ),
                                "Colm Tuite",
                                value="colm",
                            ),
                        ),
                        value="pedro",
                    ),
                    class_name="w-52",
                ),
            ),
        ),
    )
```
```