CoreUI PRO Next.js Admin Template

Our Admin Panel isn’t just a mix of third-party components. It’s the only Next.js dashboard built on a professional, enterprise-grade UI Components Library. This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.

Explore Documentation

Get CoreUI PRO →

React Chip Basic and outline

Chips are compact UI elements for labels, filters, and quick selections. Use the CChip component with optional variant prop.

Basic chipFrontendDesign systemDocumentation

Add variant="outline" to create a lighter, bordered appearance.

Outline chipProductMarketingAnalytics

React Chip With icons and avatars

Chips can include icons, user avatars, or avatar components to make tags easier to scan.

Team member Backlog item

Olivia Martin

Ethan CarterA Account managerQ QA owner

React Chip Variants and sizes

Use the color prop for contextual variants and the size prop for different sizes.

ProductActive productPublishedLiveReviewBlocked

Small chipDefault chipLarge chipOutline primary

React Chip Interactive examples

Chips support selection, removal, and disabled states using props like selectable, removable, and disabled.

SelectableSelectedRemovableDisabled

Team AlphaFilter: PriorityFilter: Ready

Settings

System Utilization