Components

Status Pill

A colored dot and label on a rounded tint, with shortcuts for the default groups: not started, in progress, done.

Not startedIn progressDone

Usage

Use it to:

show a workflow status in tables, boards and lists

Don’t use it to:

short system labels like “New” (use Badge)
categories (use Tag)

Installation

Install the package (React 19):

terminal

npm install @krackedui/motion

terminal

pnpm add @krackedui/motion

terminal

yarn add @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx

import '@krackedui/motion/styles.css';

Use it anywhere inside your app's `<Theme>` (see Installation):

/src/StatusPillExample.tsx

import { StatusPill } from '@krackedui/motion';

export function StatusDemo() {
  return (
    <>
      <StatusPill color="not-started">Not started</StatusPill>
      <StatusPill color="in-progress">In progress</StatusPill>
      <StatusPill color="done">Done</StatusPill>
    </>
  );
}