Pill

A flexible badge component designed for a variety of use cases.

Powered by

Lucide

HB@haydenbleasel

Passed

Approval Status#nopends-uiActiveErrorUp 10%Down 5%No change17 users

HBSCLR

Loved by millions

Installation

npx nopends-ui@latest add pill

Features

Customizable badge-like component with rounded corners and consistent padding
Support for avatars with fallback options
Built-in status indicators with variants (success, error, warning, info) and pulse animation
Delta indicators for showing changes (increase/decrease)
Icon support with consistent styling
Avatar groups with overlapping effect
Ghost button integration
Themeable variants

Examples

Avatar

A simple pill with an avatar and text.

HB@haydenbleasel

Status

A pill with a status indicator and text.

Passed

Approval Status

Button

A pill with a button for dismissal.

#nopends-ui

Indicator

Pills with different indicator states.

ActiveError

Delta

Pills showing different delta states.

Up 10%Down 5%No change

Icon

A pill with an icon and text.

17 users

Avatar Group

A pill with multiple avatars grouped together.

HBSCLR

Loved by millions

Marquee

Marquees are a great way to show a list of items in a horizontal scrolling motion.

QR Code

QR Code is a component that generates a QR code from a string.