Components
Capsule
A pill-shaped overflow-hidden container that joins arbitrary children — tags, toggles, segments, links — into one capsule.
Installation
$npx litefy@latest add capsule
$pnpm dlx litefy@latest add capsule
$yarn dlx litefy@latest add capsule
$bun --bun litefy@latest add capsule
Usage
Capsule is a pill-shaped overflow-hidden container: whatever you put inside is joined and clipped into one capsule. It normalizes children with *:rounded-none *:px-2 *:py-1, so typical children like Tag only need their color utilities.
buildpassing
npmv1.2.3
licenseMIT
docslitefy.dev
import { Capsule, Tag } from "@/ui";
export default function CapsuleBadgeDemo() {
return (
<div className="flex w-full max-w-md flex-col items-center gap-3">
<div className="flex flex-wrap justify-center gap-3">
<Capsule>
<Tag className={"bg-neutral"}>build</Tag>
<Tag className={"bg-success"}>passing</Tag>
</Capsule>
<Capsule>
<Tag className={"bg-neutral"}>npm</Tag>
<Tag className={"bg-danger"}>v1.2.3</Tag>
</Capsule>
<Capsule>
<Tag className={"bg-neutral"}>license</Tag>
<Tag className={"bg-info"}>MIT</Tag>
</Capsule>
</div>
<Capsule>
<Tag className={"bg-neutral"}>docs</Tag>
<Tag className={"bg-warning"}>litefy.dev</Tag>
</Capsule>
</div>
);
}
Composition
Capsule is a plain container — it always renders a div, with no as prop. What goes inside is up to you: two tags form a badge, but toggle groups, segment groups or any other content work just the same. When the whole capsule should be clickable, wrap the <Capsule> in a native <a> (or button) so every child shares the same click target, instead of nesting the link on a single child:
import { Capsule, Tag } from "@/ui";
export default function CapsuleLinkDemo() {
return (
<a href="#">
<Capsule>
<Tag className="bg-neutral">docs</Tag>
<Tag className="bg-primary">litefy.dev</Tag>
</Capsule>
</a>
);
}
Notes
- The container applies
*:rounded-none *:px-2 *:py-1to every child, so typical children only need their color utilities — no per-child radius/padding resets required. - Any number of children works: the container just clips whatever is inside.
Capsule.classNameis the static base class string of the pill container, handy when styling a wrapper element or reusing the pill look elsewhere.
API Reference
Capsule
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom CSS class, merged with the base Capsule.className |
...props | React.ComponentProps<"div"> | - | Supports all native div props (except className) |
Statics
| Member | Type | Description |
|---|---|---|
Capsule.className | string | Base class string of the pill container, for reuse on native elements |