DOCSEARCHbyAlgolia
Submit Docs

Buridan UI

repository·main·Indexed 42 days ago

https://github.com/lineindent/ui

A collection of composable and themeable UI components designed for the Reflex framework. It includes a CLI for initializing projects, building custom design systems via a theme builder, and adding components. Features include specialized chart tools like `chart_tooltip` and `chart_tooltip_content` for customizing rx.recharts.area_chart implementations.

Tokens
133K
Snippets
457
Records
634
Agent score
51%

What's inside Buridan UI

  1. Overview of buridan/ui

    main
    buridan/ui is a set of composable, themeable UI components designed specifically for the Reflex web framework. It is heavily influenced by the shadcn/ui model, providing developers with full control over themes, styles, and component implementation. Because the library is open source, you can customize, extend, or override any component to fit your specific design and functionality requirements.

  6. What is buridan/ui?

    main

    buridan/ui is a set of composable, themeable components designed specifically for the Reflex web framework. It is heavily influenced by the shadcn/ui model, aiming to provide developers with full control over themes, styles, and component implementation rather than providing a rigid, black-box library.

    Key characteristics include:

    • Open Source: The entire codebase is available for full transparency and customization.
    • Python-First: Designed to allow building modern UIs using only Python, reducing context switching between Python and JavaScript/CSS.
    • Base UI Integration: It wraps the Base UI component library, meaning it shares similar APIs and component anatomies.

  7. Use Bar Charts for categorical data visualization

    main

    Bar charts in this library are used to compare values across different categories. They support several advanced configurations:

    • Vertical and Horizontal layouts: Switch orientation for better readability of long labels.
    • Multiple Series: Compare different datasets side-by-side.
    • Stacking: Combine related values into a single bar for cumulative insights.
    • Legends: Use built-in or custom legends to identify data series.
    • Dynamic Updates: Support data-driven interactivity and real-time updates.

    Note: All chart examples are wrapped in the Card component. Ensure you have the Card component installed in your project before implementing these charts.

  8. How Context Menu components are composed

    main

    A Context Menu is built by composing a root trigger with an overlay surface. The hierarchy follows a specific structure to manage the trigger, the portal (for rendering outside the local DOM tree), the positioner (to handle placement), and the popup content.

    Key structural elements include:

    • context_menu.root: The top-level provider.
    • context_menu.trigger: The element that listens for the right-click event.
    • context_menu.portal: Renders the menu in a portal.
    • context_menu.positioner: Manages the menu's position relative to the trigger.
    • context_menu.popup: The container for the actual menu items.
    • context_menu.sub: Used for nesting secondary menus (submenus).
    context_menu.root
├── context_menu.trigger
└── context_menu.portal
    └── context_menu.positioner
        └── context_menu.popup
            ├── context_menu.group
            │   ├── context_menu.group_label
            │   ├── context_menu.item
            │   └── context_menu.item
            ├── context_menu.separator
            ├── context_menu.group
            │   ├── context_menu.group_label
            │   ├── context_menu.checkbox_item
            │   │   └── context_menu.checkbox_item_indicator
            │   └── context_menu.checkbox_item
            │       └── context_menu.checkbox_item_indicator
            ├── context_menu.separator
            ├── context_menu.group
            │   ├── context_menu.group_label
            │   └── context_menu.radio_group
            │       ├── context_menu.radio_item
            │       │   └── context_menu.radio_item_indicator
            │       └── context_menu.radio_item
            │           └── context_menu.radio_item_indicator
            └── context_menu.sub
                ├── context_menu.sub_trigger
                └── context_menu.positioner
                    └── context_menu.popup
                        └── context_menu.group
                            ├── context_menu.item
                            └── context_menu.item

  10. Customize Toggle Group appearance (Variant, Size, Spacing, Orientation)

    main

    You can modify the visual layout and style of the Toggle Group using the following patterns:

    Variants

    • variant="default": Standard transparent background.
    • variant="outline": Adds a border and hover effects.

    Sizes

    • size="default": Standard size.
    • size="sm": Small size with reduced height and text.
    • size="lg": Large size.

    Spacing

    Use the spacing prop (integer) to adjust the gap between items. The actual gap is calculated as spacing * 0.25rem.

    Orientation

    • orientation="horizontal": Items are laid out in a row.
    • orientation="vertical": Items are laid out in a column.
    # Example: Vertical, small, outline variant with custom spacing
toggle_group.root(
    toggle_group.item("Top", value="top"),
    toggle_group.item("Bottom", value="bottom"),
    size="sm",
    variant="outline",
    orientation="vertical",
    spacing=1,
    default_value=["top"],
)

  11. Use the Kbd component to display keyboard input

    main

    The Kbd component is used to visually represent textual user input from a keyboard (e.g., key combinations like 'Ctrl + C'). It is composed of two primary parts: kbd.root for individual keys and kbd.group for grouping multiple keys together.

    # Grouping keys
kbd.group(
    kbd.root("Ctrl"),
    kbd.root("B")
)

  12. Control Collapsible state manually

    main

    To manage the open/closed state of a Collapsible component using your own application state (Controlled State), use the open and on_open_change props on collapsible.root.

    1. Define a boolean state variable in your rx.State.
    2. Pass that variable to the open prop.
    3. Pass a state method to the on_open_change prop to update the state when the user interacts with the trigger.
    import reflex as rx
from components.ui.collapsible import collapsible

class ControlledCollapsibleState(rx.State):
    is_open: bool = False

    def toggle_open(self, open_state: bool):
        self.is_open = open_state

def controlled_example() -> rx.Component:
    return collapsible.root(
        collapsible.trigger("Toggle Me"),
        collapsible.panel("Content"),
        open=ControlledCollapsibleState.is_open,
        on_open_change=ControlledCollapsibleState.toggle_open,
    )