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 that joins arbitrary children into one capsule; children are normalized with *:rounded-none *:px-2 *:py-1.
buildpassing
npmv1.2.3
licenseMIT
docslitefy.dev
import { Capsule, Chip } 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>
<Chip variant="primary">build</Chip>
<Chip variant="success">passing</Chip>
</Capsule>
<Capsule>
<Chip variant="primary">npm</Chip>
<Chip variant="danger">v1.2.3</Chip>
</Capsule>
<Capsule>
<Chip variant="primary">license</Chip>
<Chip variant="info">MIT</Chip>
</Capsule>
</div>
<Capsule>
<Chip variant="primary">docs</Chip>
<Chip variant="warning">litefy.dev</Chip>
</Capsule>
</div>
);
}
Composition
When the whole capsule should be clickable, wrap <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, Chip } from "@/ui";
export default function CapsuleLinkDemo() {
return (
<a href="#">
<Capsule>
<Chip className="bg-neutral text-background">docs</Chip>
<Chip className="bg-primary text-primary-foreground">litefy.dev</Chip>
</Capsule>
</a>
);
}
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 |