Creative Tim UICreative Tim UI

Shadcn Chip

PreviousNext

A compact element that represents an input, attribute, or action, typically used for tags, filters, and selections in user interfaces.

Creative Tim UI
import { Chip } from "@/components/ui/chip"

export function ChipDemo() {
  return <Chip>Creative Tim UI</Chip>
}

Installation

pnpm dlx @creative-tim/ui@latest add chip

Usage

import { Chip } from "@/components/ui/chip"
<Chip>Tag</Chip>

Examples

Chip Colors

Chip components with different color schemes (primary, secondary, info, success, warning, error) to visually distinguish between different types of tags and categories.

PrimarySecondaryInfoSuccessWarningError
import { Chip } from "@/components/ui/chip"

export function ChipColors() {
  return (
    <div className="flex items-center gap-2">
      <Chip>Primary</Chip>
      <Chip variant="secondary">Secondary</Chip>
      <Chip className="border-blue-500 bg-blue-500 text-white">Info</Chip>
      <Chip className="border-green-500 bg-green-500 text-white">Success</Chip>
      <Chip className="border-yellow-500 bg-yellow-500 text-white">
        Warning
      </Chip>
      <Chip variant="destructive">Error</Chip>
    </div>
  )
}

Chip Variants

Chip components with different visual styles including ghost, outline, solid, and gradient variants, allowing you to choose the appearance that best fits your design system.

GhostOutlineSolidGradient
import { Chip } from "@/components/ui/chip"

export function ChipVariants() {
  return (
    <div className="flex items-center gap-2">
      <Chip variant="ghost">Ghost</Chip>
      <Chip variant="outline">Outline</Chip>
      <Chip variant="solid">Solid</Chip>
      <Chip className="from-primary to-primary/80 text-primary-foreground bg-gradient-to-r">
        Gradient
      </Chip>
    </div>
  )
}

Chip Sizes

Chip components in different sizes (small, medium, large) to accommodate various design contexts and spacing requirements.

SmallMediumLarge
import { Chip } from "@/components/ui/chip"

export function ChipSizes() {
  return (
    <div className="flex items-end gap-2">
      <Chip size="sm">Small</Chip>
      <Chip size="md">Medium</Chip>
      <Chip size="lg">Large</Chip>
    </div>
  )
}

Chip Icon

Chip components that include icons alongside text labels, enhancing visual recognition and making it easier for users to quickly identify chip categories.

GhostOutlineSolidGradient
import { User } from "lucide-react"

import { Chip } from "@/components/ui/chip"

export function ChipIcon() {
  return (
    <div className="flex items-center gap-2">
      <Chip variant="ghost">
        <User className="h-4 w-4" />
        Ghost
      </Chip>
      <Chip variant="outline">
        <User className="h-4 w-4" />
        Outline
      </Chip>
      <Chip variant="solid">
        <User className="h-4 w-4" />
        Solid
      </Chip>
      <Chip className="from-primary to-primary/80 text-primary-foreground bg-gradient-to-r">
        <User className="h-4 w-4" />
        Gradient
      </Chip>
    </div>
  )
}

Chip Dismissible

A chip component with a close button that allows users to remove the tag, providing control over selected filters or tags in dynamic interfaces.

Creative Tim UI
"use client"

import { useState } from "react"
import { User, X } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Chip } from "@/components/ui/chip"

export function ChipDismissible() {
  const [isOpen, setIsOpen] = useState(true)

  if (!isOpen) return null

  return (
    <Chip className="pr-1">
      <User className="h-4 w-4" />
      Creative Tim UI
      <Button
        variant="ghost"
        size="icon"
        className="ml-1 h-5 w-5 rounded-full"
        onClick={() => setIsOpen(false)}
      >
        <X className="h-3 w-3" />
        <span className="sr-only">Dismiss</span>
      </Button>
    </Chip>
  )
}

Chip Rounded

Chip components with rounded corners instead of fully rounded (pill) shape, providing a slightly different visual style while maintaining the chip functionality.

GhostOutlineSolidGradient
import { Chip } from "@/components/ui/chip"

export function ChipRounded() {
  return (
    <div className="flex items-center gap-2">
      <Chip variant="ghost" className="rounded-md">
        Ghost
      </Chip>
      <Chip variant="outline" className="rounded-md">
        Outline
      </Chip>
      <Chip variant="solid" className="rounded-md">
        Solid
      </Chip>
      <Chip className="from-primary to-primary/80 text-primary-foreground rounded-md bg-gradient-to-r">
        Gradient
      </Chip>
    </div>
  )
}

Chip With Avatar

A chip component that includes an avatar image, perfect for displaying user tags, team members, or any context where visual identification is important.

Alex Andrew
import { Avatar, AvatarImage } from "@/components/ui/avatar"
import { Chip } from "@/components/ui/chip"

export function ChipWithAvatar() {
  return (
    <Chip>
      <Avatar className="size-5">
        <AvatarImage
          src="https://images.unsplash.com/photo-1750223642533-1b74b17edae8?auto=format&fit=crop&q=80&w=400&h=400"
          alt="profile-picture"
        />
      </Avatar>
      Alex Andrew
    </Chip>
  )
}

Props

The chip component is built using class-variance-authority and accepts the following props:

Chip

PropTypeDefaultDescription
variant"default" | "secondary" | "destructive" | "outline" | "ghost" | "solid""default"The visual style variant of the chip
size"sm" | "md" | "lg""md"The size of the chip
classNamestring-Additional CSS classes to apply to the chip
childrenReactNode-The content to display inside the chip
asChildbooleanfalseWhen true, merges props with the child component

Best Practices

  • Use chips to represent tags, filters, or selections
  • Choose appropriate colors to match the category or status
  • Keep chip text concise and descriptive
  • Use icons to enhance visual recognition when appropriate
  • Provide dismissible chips for removable tags or filters
  • Maintain consistent sizing within the same interface
  • Use avatars in chips when displaying user-related information
  • Consider using rounded variants for a softer appearance
  • Ensure sufficient contrast for accessibility
  • Use chips in groups for related tags or filters

The chip component provides a flexible and accessible way to display tags, labels, and compact information. It's ideal for filters, tags, user selections, category displays, and any interface where compact labeled elements are needed.