Badge

A badge is a component that is used to highlight an item's status for quick recognition.

Source code

Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

npx ui-thing@latest add badge

Default

Destructive

Outline

Secondary

Avatar

An image element with a fallback for representing the user.

Breadcrumbs

Breadcrumbs are a great way to show hierarchy in a page.