Core Examples
Accessible React components with Base UI and Yumma CSS.
Base
Standard implementation with default configuration.
Disabled
Prevents interaction with reduced visual emphasis.
Panel
Displays content in a separate Panel area.
Task Statuses
Track progress across To Do, In Progress, Review, and Done stages with clear status transitions and blockers highlighted.
Vertical
Stacks children vertically using fd-c.
Manage your workspace name, description, and default preferences for new projects.
Size Examples
Sizes from compact to large.
Small
Compact size for constrained spaces.
Medium
Standard default size.
Large
Expanded size for emphasis or easier targeting.
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.
Rounded
Softens corners with a medium border-radius.
Square
Applies sharp corners with no border-radius.
Squircle
Applies a smooth continuous curve between adjacent corners.
More Examples
Additional variants and interactive states.
Static
Renders without motion wrappers or interactive animations.
Underline
Applies an underline indicator for the active tab.