Tailwind CSS Chip
David UI's chip component offers a compact way to display tags, filters, or categories. Styled with Tailwind CSS, it supports icons, close actions, and custom styles.
Try our responsive chip component examples styled with Tailwind CSS that you can use for your web or mobile projects.
Basic Chip
Start your application with this minimalistic chip design featuring a dark-grey background. It's a simple yet versatile foundation for your UI.
Chip Sizes
Discover how to create chips in various sizes, from compact (px-2 py-1) to spacious (px-4 py-2). Adjusting padding values makes it easy to adapt chips for different interface needs.
Chip Variants
This example showcases four unique chip designs—filled, gradient, outlined, and ghost—highlighting their adaptability for diverse user interface scenarios. Each chip is styled with Tailwind CSS within a consistent structural framework.
Chip Colors
Customize your chips with a palette of 19 color options, including vibrant hues like blue, red, green, and amber. Explore the examples to see these colors applied to bring your designs to life.
Chip Icon
Icons improve the visual appeal of chips, adding context and improving usability. Use this example to incorporate icons for features such as user profiles, settings, or notifications.
Chip Dismissible
This example demonstrates a removable chip with a close icon, enabling users to delete it from the interface. Ideal for tags, filters, or other interactive elements where choices can be added and removed.
Chip with Avatar
Combine an avatar with a chip for a visually engaging element that pairs identity with information. Perfect for applications requiring user recognition, like social platforms or dashboards.
