Components
Loading preview...
Small informational badges for displaying labels, statuses, and categories.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-chipimport * as React from "react";
import { Chip } from "@/components/ui/heroui-chip";
const initialChips = [
{ color: "default", label: "Default" },
{ color: "accent", label: "Accent" },
{ color: "success", label: "Success" },
] as const;
export default function ChipCloseableDemo() {
const [items, setItems] = React.useState<Array<(typeof initialChips)[number]>>([...initialChips]);
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex flex-wrap items-center justify-center gap-3">
{items.map((item) => (
<Chip
color={item.color}
key={item.label}
onClose={() => setItems((current) => current.filter((chip) => chip.label !== item.label))}
>
{item.label}
</Chip>
))}
</div>
</div>
);
}
export { ChipCloseableDemo };