import { Pills } from "@/components/email/pills";
import { defaultTheme } from "@/components/email/theme-default";
export function PillsDemo() {
return (
<Pills
pills={[
{ label: "Shipped", status: "success" },
{ label: "Needs review", status: "warning" },
{ label: "Blocked", status: "danger" },
]}
theme={{ ...defaultTheme, containerWidth: "640px" }}
/>
);
}Installation
$ pnpm dlx shadcn@latest add @emailcn/react-email/pills
Usage
import { Pills } from "@/components/email/pills";<Pills />Examples
Mixed statuses
import { Pills } from "@/components/email/pills";
export function PillsMixedStatusesDemo() {
return (
<Pills
pills={[
{ label: "Active", status: "success" },
{ label: "Pending", status: "warning" },
{ label: "Failed", status: "danger" },
]}
/>
);
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
theme | EmailTheme | defaultTheme | Renderer theme configuration. |
pills | Array<{ label: string; status?: "brand" | "danger" | "default" | "error" | "info" | "success" | "warning" }> | Built-in pills | Configures the component's pills. |