itemClassName

The itemClassName prop allows you to customize the styling of individual items in the Chipster.ItemList component. This className is applied to each item container.

Type Definition

type ItemClassNameProp = string;

Basic Usage

BasicExample.tsx

import { Chipster } from '@micoblanc/chipster'
 
export default function BasicExample() {
  return (
    <Chipster defaultValue={['React', 'TypeScript']}>
      <Chipster.ItemList 
        itemClassName="!bg-blue-100 !text-blue-800 !border-blue-200"
      />
      <Chipster.Input placeholder="Add more..." />
    </Chipster>
  )
}

With Dynamic Styling

DynamicExample.tsx

export default function DynamicExample() {
  const getItemClass = (theme: 'light' | 'dark') => {
    return theme === 'dark' 
      ? '!bg-gray-800 !text-white'
      : '!bg-blue-50 !text-blue-800'
  }
 
  return (
    <Chipster>
      <Chipster.ItemList 
        itemClassName={`
          !px-4 !py-2 !rounded-full
          hover:!scale-105 transition-transform
          ${getItemClass('light')}
        `}
      />
      <Chipster.Input placeholder="Add items..." />
    </Chipster>
  )
}

With Tailwind Classes

TailwindExample.tsx

export default function TailwindExample() {
  return (
    <Chipster>
      <Chipster.ItemList 
        itemClassName={`
          !bg-gradient-to-r !from-purple-500 !to-pink-500
          !text-white
          !shadow-md
          !border-0
          !rounded-lg
          !px-4 !py-2
          hover:!shadow-lg
          hover:!opacity-90
          transition-all
          !font-medium
        `}
      />
      <Chipster.Input placeholder="Type here..." />
    </Chipster>
  )
}

Important Notes

Use the ! modifier to override default styles
Applied to each individual item
Works with both light and dark themes
Supports all valid CSS classes
Can be combined with other styling props
Maintains item functionality
Doesn't affect remove button styling
Preserves hover and focus states

Common Use Cases

Brand theming
Status indicators
Priority levels
Category colors
Custom animations
Size variations
Interactive states
Visual hierarchy

With Conditional Styling

ConditionalExample.tsx

export default function ConditionalExample() {
  const getPriorityClass = (text: string) => {
    switch(text.toLowerCase()) {
      case 'high':
        return '!bg-red-100 !text-red-800 !border-red-200'
      case 'medium':
        return '!bg-yellow-100 !text-yellow-800 !border-yellow-200'
      case 'low':
        return '!bg-green-100 !text-green-800 !border-green-200'
      default:
        return '!bg-gray-100 !text-gray-800

onInputChange iconClassName