CoreUI for React.js

The CChip component is used to create compact, interactive UI elements for labels, tags, filters, and selections. It supports icons, avatars, removal controls, and keyboard navigation. Unlike badges, chips have a fixed size and more defined visual styles for indicating state.

Key Features

• Static Sizing: Chips do not scale with their parent by default.
• Interactivity: Chips can be selectable, removable, active, or disabled.
• Accessibility: Focusable chips (selectable or removable) automatically gain focus and support keyboard navigation.
• Visual Extensions: Supports leading icons and avatars.

import { CChip } from '@coreui/react';

// Basic usage
<CChip>Basic Chip</CChip>

The CChip component is used to build compact, interactive UI elements such as labels, tags, filters, and selections. Unlike badges, chips have a fixed size and specific visual styles for indicating state and selection.

Key Features

• Icons & Avatars: Supports leading icons and avatars.
• Interactivity: Can be selectable, removable, active, or disabled.
• Accessibility: Automatically gains focus when selectable or removable. Supports keyboard navigation (Enter/Space for selection, Backspace/Delete for removal).
• Grouping: For coordinated selection (like filter groups with check icons), wrap chips in a CChipSet.

import { CChip } from '@coreui/react'

// Basic usage
<CChip>Basic Chip</CChip>

The CChipInput component allows users to enter multiple values as chips within a single field. It is ideal for tag inputs, multi-value selectors (like email recipients), or category selectors.

Key Features:

• Users create chips by typing a value and pressing Enter or a separator.
• Supports removable and selectable chips.
• The input field grows inline as content is added.
• Form Integration: When a name prop is provided, the component includes a hidden input to support standard HTML form submissions.

import { CChipInput } from '@coreui/react' // Note: Import path based on standard CoreUI patterns

// Basic usage pattern
<CChipInput 
  value={values} 
  onChange={(newValues) => setValues(newValues)} 
  name="tags" 
/>

The @coreui/docs-mcp server implements the Model Context Protocol (MCP), allowing AI coding assistants to access official CoreUI documentation directly. This ensures the assistant uses current, live documentation (including component props, events, slots, and cross-framework links) instead of relying on potentially stale training data.

Key features:

• Component documentation: Access to pages, props, events, and slots.
• Live content: Fetches data on demand from coreui.io.
• Cross-framework links: Provides documentation URLs for Angular, Bootstrap, React, and Vue.
• Local execution: Runs via npx over stdio, requiring no global installation.

CoreUI includes grid breakpoints as CSS variables. However, per the CSS specification, CSS variables cannot be used inside media queries.

While you can use these breakpoint variables in standard CSS properties or within JavaScript, you cannot use them to define the breakpoint threshold in a @media rule. For responsive logic in CSS, you must still use standard media query syntax.

The CSidebar component is designed to work with several specialized sub-components:

• <CSidebarHeader>: An optional header section at the top of the sidebar.
• <CSidebarBrand>: Used for displaying company, product, or project branding.
• <CSidebarNav>: Provides full-height, lightweight navigation, supporting nested groups.
• <CSidebarFooter>: An optional footer section at the bottom of the sidebar.
• <CSidebarToggler>: A component used to toggle the sidebar's visibility state.

The CCarousel component is a responsive slideshow used to cycle through images, text, or custom HTML content. It supports navigation controls, slide indicators, captions, and various transition effects. It is also compatible with the Page Visibility API, meaning transitions pause when the browser tab is inactive.

import { CCarousel, CCarouselControl, CCarouselIndicator, CCarouselItem, CCarouselCaption } from '@coreui/react'

// Basic usage pattern involves wrapping CCarouselItem components
<CCarousel>
  <CCarouselItem>
    <img src="..." alt="..." />
  </CCarouselItem>
</CCarousel>

You can customize how the offcanvas interacts with the rest of the page using the scroll and backdrop props:

• Scrollable body: Use the scroll prop to allow the main page content to be scrollable while the offcanvas is open.
• Static backdrop: Set backdrop="static" to prevent the offcanvas from closing when a user clicks on the backdrop (overlay).

// Scrollable body with a static backdrop
<Offcanvas 
  show={true} 
  scroll={true} 
  backdrop="static"
>
  {/* ... content ... */}
</Offcanvas>