Core Examples

Accessible React components with Base UI and Yumma CSS.

Base

Standard implementation with default configuration.

---

Checkboxes

Uses Checkbox items for multi-select within the list.

---

Disabled

Prevents interaction with reduced visual emphasis.

---

Grouped

Organizes related options under a shared heading.

---

Nested

Supports sub-levels of content within a parent item.

---

Radios

Uses Radio items for single-select within the list.

---

Icon Examples

Icon-only buttons and decorative configurations.

Icon Only

Displays an Icon without accompanying text labels.

---

Leading

Positions the Icon at the start of the content.

---

Trailing

Positions the Icon at the end of the content.

---

Shape Examples

Shapes from sharp to fully rounded.

Square

Applies sharp corners with no border-radius.

---

Squircle

Applies a smooth continuous curve between adjacent corners.

---

More Examples

Additional variants and interactive states.

Account

Shows a user account menu with profile actions.

---

Account Status

Shows an online Status indicator next to the user.

---

Shortcuts

Displays keyboard Shortcut hints across multiple items.

---

Static

Renders without motion wrappers or interactive animations.