Preview Card

Preview content in a card layout.

Core Examples

Accessible React components with Base UI and Yumma CSS.

Base

Standard implementation with default configuration.

Assigned to John for review.


Shape Examples

Shapes from sharp to fully rounded.

Square

Applies sharp corners with no br-(value).

Assigned to Alex for review.


Squircle

Applies a smooth continuous curve between adjacent corners.

Assigned to Maya for review.


More Examples

Additional variants and interactive states.

Avatar Status

Shows an Avatar with a status indicator.


Compact

Reduced spacing for a denser layout.

View task #dashboard-redesign details.


Multiple

Allows the selection of more than one item.

Mentioned John or Jane in a comment.


Project

Shows a project picker with recent projects.

View Acme Website project details.


Team

Shows a team picker with member Avatar items.

Mentioned John in a comment.


Static

Renders without motion wrappers or interactive animations.

Assigned to John for review.