Components / Data display
StatusPill
Compact status label with tone and surface variants.
Preview
On track
1import { StatusPill } from "@/components/ui/status-pill"2
3export function StatusPillDemo() {4 return <StatusPill tone="success" label="On track" />5}warning
The warning style of this component.
On track
1import { StatusPill } from "@/components/ui/status-pill"2
3export function StatusPillDemo() {4 return <StatusPill tone="warning" label="On track" />5}danger
The danger style of this component.
On track
1import { StatusPill } from "@/components/ui/status-pill"2
3export function StatusPillDemo() {4 return <StatusPill tone="danger" label="On track" />5}info
The info style of this component.
On track
1import { StatusPill } from "@/components/ui/status-pill"2
3export function StatusPillDemo() {4 return <StatusPill tone="info" label="On track" />5}neutral
The neutral style of this component.
On track
1import { StatusPill } from "@/components/ui/status-pill"2
3export function StatusPillDemo() {4 return <StatusPill tone="neutral" label="On track" />5}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/status-pillUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.