tailwindMisc

Chip

Chip represents entities using icons, labels and images.

What are you interested in?

You can select multiple answers.

Music

🎬

Movies

✈️

Travel

🍔

Food

Sports

🎮

Gaming

📚

Reading

Photography

💪

Fitness

💻

Technology

Art

🌿

Nature

🛍️

Shopping

👨‍🍳

Cooking

🐶

Pets

Cars

👕

Fashion

🔬

Science

preview

Installation#

npx shadcn@latest add https://v11.primereact.org/r/chip.json

Usage#

import { Chip, ChipLabel, ChipStart, ChipEnd, ChipRemove } from '@/components/ui/chip';

<Chip>
    <ChipStart />
    <ChipLabel>Label</ChipLabel>
    <ChipEnd>
        <ChipRemove />
    </ChipEnd>
</Chip>

Examples#

Basic#

Displays compact information with an optional remove action.

GitHub

basic-demo

import { Github } from '@primeicons/react';
import { Chip, ChipLabel, ChipStart } from '@/components/ui/chip';

export default function BasicDemo() {
    return (
        <div className="flex items-center justify-center">
            <Chip>
                <ChipStart>
                    <Github />
                </ChipStart>
                <ChipLabel>GitHub</ChipLabel>
            </Chip>
        </div>
    );
}

Variant#

GitHub

variant-demo

import { Github, MinusCircle } from '@primeicons/react';
import { Chip, ChipEnd, ChipLabel, ChipRemove, ChipStart } from '@/components/ui/chip';

export default function VariantDemo() {
    return (
        <div className="flex items-center justify-center flex-wrap gap-2">
            <Chip>
                <ChipStart>
                    <Github />
                </ChipStart>
                <ChipLabel>GitHub</ChipLabel>
                <ChipEnd>
                    <ChipRemove>
                        <MinusCircle />
                    </ChipRemove>
                </ChipEnd>
            </Chip>
            <Chip variant="outlined">
                <ChipStart>
                    <Github />
                </ChipStart>
                <ChipLabel>GitHub</ChipLabel>
                <ChipEnd>
                    <ChipRemove>
                        <MinusCircle />
                    </ChipRemove>
                </ChipEnd>
            </Chip>
            <Chip variant="text">
                <ChipStart>
                    <Github />
                </ChipStart>
                <ChipLabel>GitHub</ChipLabel>
                <ChipEnd>
                    <ChipRemove>
                        <MinusCircle />
                    </ChipRemove>
                </ChipEnd>
            </Chip>
        </div>
    );
}

Start & End Elements#

Apple

Facebook

Google

Microsoft

GitHub

start-end-demo

import { Apple, Facebook, Github, Google, Microsoft, MinusCircle } from '@primeicons/react';
import { Chip, ChipEnd, ChipLabel, ChipRemove, ChipStart } from '@/components/ui/chip';

export default function StartEndDemo() {
    return (
        <div className="flex items-center justify-center flex-wrap gap-2">
            <Chip>
                <ChipStart>
                    <Apple />
                </ChipStart>
                <ChipLabel>Apple</ChipLabel>
            </Chip>
            <Chip>
                <ChipStart>
                    <Facebook />
                </ChipStart>
                <ChipLabel>Facebook</ChipLabel>
            </Chip>
            <Chip>
                <ChipStart>
                    <Google />
                </ChipStart>
                <ChipLabel>Google</ChipLabel>
            </Chip>
            <Chip>
                <ChipStart>
                    <Microsoft />
                </ChipStart>
                <ChipLabel>Microsoft</ChipLabel>
            </Chip>
            <Chip>
                <ChipStart>
                    <Github />
                </ChipStart>
                <ChipLabel>GitHub</ChipLabel>
                <ChipEnd>
                    <ChipRemove>
                        <MinusCircle />
                    </ChipRemove>
                </ChipEnd>
            </Chip>
        </div>
    );
}

With Avatar#

Amy Elsner

Asiya Javayant

Onyama Limba

Xuxue Feng

with-avatar-demo

import { TimesCircle } from '@primeicons/react';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Chip, ChipEnd, ChipLabel, ChipRemove, ChipStart } from '@/components/ui/chip';

export default function WithAvatarDemo() {
    return (
        <div className="flex items-center justify-center flex-wrap gap-2">
            <Chip>
                <ChipStart>
                    <Avatar className="size-full" shape="circle">
                        <AvatarImage src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
                        <AvatarFallback className="text-xs">AE</AvatarFallback>
                    </Avatar>
                </ChipStart>
                <ChipLabel>Amy Elsner</ChipLabel>
            </Chip>
            <Chip>
                <ChipStart>
                    <Avatar className="size-full" shape="circle">
                        <AvatarImage src="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
                        <AvatarFallback className="text-xs">AJ</AvatarFallback>
                    </Avatar>
                </ChipStart>
                <ChipLabel>Asiya Javayant</ChipLabel>
            </Chip>
            <Chip>
                <ChipLabel>Onyama Limba</ChipLabel>
                <ChipEnd>
                    <Avatar className="size-full" shape="circle">
                        <AvatarImage src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
                        <AvatarFallback className="text-xs">OL</AvatarFallback>
                    </Avatar>
                </ChipEnd>
            </Chip>
            <Chip>
                <ChipStart>
                    <Avatar className="size-full" shape="circle">
                        <AvatarImage src="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" />
                        <AvatarFallback className="text-xs">XF</AvatarFallback>
                    </Avatar>
                </ChipStart>
                <ChipLabel>Xuxue Feng</ChipLabel>
                <ChipEnd>
                    <ChipRemove>
                        <TimesCircle />
                    </ChipRemove>
                </ChipEnd>
            </Chip>
        </div>
    );
}

Template#

Chip also allows displaying custom content inside itself.

Apple

Facebook

Google

Microsoft

GitHub

template-demo

import { Apple, Facebook, Github, Google, Microsoft, MinusCircle } from '@primeicons/react';
import { Chip, ChipEnd, ChipLabel, ChipRemove, ChipStart } from '@/components/ui/chip';

export default function TemplateDemo() {
    return (
        <div className="flex items-center justify-center flex-wrap gap-2">
            <Chip className="bg-neutral-900 dark:bg-neutral-50 **:text-neutral-50 dark:**:text-neutral-900">
                <ChipStart>
                    <Apple />
                </ChipStart>
                <ChipLabel>Apple</ChipLabel>
            </Chip>
            <Chip className="bg-blue-50 dark:bg-blue-950 **:text-blue-700 dark:**:text-blue-300">
                <ChipStart>
                    <Facebook />
                </ChipStart>
                <ChipLabel>Facebook</ChipLabel>
            </Chip>
            <Chip className="bg-red-50 dark:bg-red-950 **:text-red-700 dark:**:text-red-300">
                <ChipStart>
                    <Google />
                </ChipStart>
                <ChipLabel>Google</ChipLabel>
            </Chip>
            <Chip className="bg-green-50 dark:bg-green-950 **:text-green-700 dark:**:text-green-300">
                <ChipStart>
                    <Microsoft />
                </ChipStart>
                <ChipLabel>Microsoft</ChipLabel>
            </Chip>
            <Chip className="bg-purple-50 dark:bg-purple-950 **:text-purple-700 dark:**:text-purple-300">
                <ChipStart>
                    <Github />
                </ChipStart>
                <ChipLabel>GitHub</ChipLabel>
                <ChipEnd>
                    <ChipRemove>
                        <MinusCircle />
                    </ChipRemove>
                </ChipEnd>
            </Chip>
        </div>
    );
}

API#

Sub-Components#

See Primitive API for ChipRoot, ChipStart, ChipLabel, ChipEnd, and ChipRemove component documentation.

Hooks#

See Headless API for useChip hook documentation.

Accessibility#

See Chip Primitive for WAI-ARIA compliance details and keyboard support.