CoreUI for React v5.10.0 - Chip Components Release

We are excited to announce the release of CoreUI for React v5.10.0. This update introduces two powerful new components: the Chip component for displaying compact, interactive elements and the Chip Input component for enhanced multi-value user input. These components expand the CoreUI React component library, providing developers with modern UI patterns for tags, filters, and dynamic data entry.

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.

Angular

Bootstrap

React.js

Vue.js

How to Update

To update your project to CoreUI for React v5.10.0, follow these steps:

1. Open your project’s package.json.
2. Locate the @coreui/react entry under dependencies and update the version number to 5.10.0.
3. Find the @coreui/coreui entry under dependencies and update the version number to ^5.6.0 or later.
4. Save your changes to the package.json file.
5. In your project’s root directory, run the update command appropriate for your package manager:
   • For npm users, execute npm install.
   • For yarn users, execute yarn install.
   • For pnpm users, execute pnpm install.

What’s New

Features

This release introduces two significant new components to the CoreUI React library:

• Chip Component: The new Chip component enables you to display compact elements representing input, attributes, or actions in your React applications. Chips are perfect for showing tags, contact information, selected filters, or user attributes in a visually appealing and space-efficient manner. The component supports customization through props, including colors, sizes, dismissible functionality, and avatar integration.

• Chip Input Component: Building on the Chip component, the Chip Input provides an enhanced input experience for entering multiple values as chips. This component is ideal for scenarios like tag input fields, email recipient lists, keyword entry, or any use case requiring multiple discrete values. Users can add values by typing and pressing Enter or comma, and remove them with a simple click or keyboard interaction.

Both components are built with React best practices, offering full TypeScript support, customizable styling, and comprehensive event handling.

Component Features and Use Cases

Chip Component Applications

The Chip component offers versatile functionality:

• Tag Management: Display product tags, categories, or content labels
• User Attributes: Show user roles, permissions, or profile characteristics
• Filter Indicators: Represent active filters in search interfaces or data tables
• Contact Display: Show contact information with optional avatar images
• Status Badges: Indicate item status with color-coded visual feedback
• Dismissible Elements: Enable users to remove selected items or filters
• Interactive Lists: Create clickable chip elements for navigation or selection

Chip Input Component Benefits

The Chip Input component enhances data entry:

• Multi-Value Entry: Allow users to enter multiple values efficiently in a single field
• Visual Feedback: Provide immediate visual confirmation of entered values as chips
• Easy Editing: Enable users to add or remove values with intuitive interactions
• Keyboard Support: Full keyboard navigation with Enter and Backspace key support
• Validation Integration: Compatible with form validation libraries like React Hook Form and Formik
• Customizable Separators: Configure custom separators (comma, space, Enter) for value entry
• Accessibility: Built with ARIA attributes for screen reader support

Developer Experience

Both components are designed with developer productivity in mind:

• TypeScript Support: Full TypeScript definitions with type-safe props and event handlers
• React Best Practices: Built using React hooks and functional components
• Flexible Styling: Customize appearance using CSS classes, inline styles, or styled-components
• Event Callbacks: Comprehensive event handlers for add, remove, and click interactions
• Controlled & Uncontrolled: Support for both controlled and uncontrolled component patterns
• Documentation: Complete documentation with live examples and TypeScript code snippets
• Performance Optimized: Efficient rendering with React.memo and optimized event handling

Integration Examples

Basic Chip Usage

import { CChip } from '@coreui/react'

function TagList() {
  return (
    <div>
      <CChip color="primary">React</CChip>
      <CChip color="success">TypeScript</CChip>
      <CChip color="info">CoreUI</CChip>
    </div>
  )
}

Chip Input for Tags

import { CChipInput } from '@coreui/react'

function TagInput() {
  const [tags, setTags] = useState(['react', 'ui'])

  return (
    <CChipInput
      value={tags}
      onChange={(newTags) => setTags(newTags)}
      placeholder="Add tags..."
    />
  )
}

Getting Started

To start using the new Chip and Chip Input components in your React project:

1. Update to CoreUI for React v5.10.0 using the instructions above
2. Visit the Chip component documentation for implementation examples
3. Explore the Chip Input component documentation for advanced input scenarios
4. Check out the interactive examples and code playgrounds

Performance and Compatibility

CoreUI for React v5.10.0 maintains full compatibility with:

• React: v18.0.0 and newer
• TypeScript: v4.5.0 and newer
• Modern Browsers: Chrome, Firefox, Safari, Edge (latest versions)
• Mobile Browsers: iOS Safari, Chrome Mobile

The new components are optimized for performance:

• Efficient re-rendering using React.memo
• Optimized event handlers to prevent unnecessary updates
• Minimal bundle size impact
• Support for large datasets with virtualization-ready architecture

Migration Notes

This is a feature release with full backward compatibility. No breaking changes were introduced. The new components are additive and don’t affect existing CoreUI React components.

Why Update?

Updating to CoreUI for React v5.10.0 provides:

• Modern UI Patterns: Access to contemporary chip-based interaction patterns
• Enhanced UX: Improved multi-value input experience for users
• Developer Tools: TypeScript-first components with excellent IDE support
• Consistency: Components that match the design language of your CoreUI application
• Future-Ready: Built with the latest React patterns and best practices

For a comprehensive overview of all changes, enhancements, and updates introduced in this release, please refer to the full changelog on GitHub.