Styling Guide for Chipster

Chipster is designed to be highly customizable through className props and theme support. This guide explains the available styling options.

Component-Based Styling

Each Chipster component accepts className props for custom styling. To override default styles, use Tailwind's ! modifier:

<Chipster className="container-class">
  <Chipster.ItemList 
    className="items-class"
    itemClassName="!bg-blue-100 !px-3 !py-1 !rounded-full" // Use ! to override defaults
    removeButtonClassName="!ml-2 !text-blue-500 hover:!text-blue-700"
  />
  <Chipster.Input 
    className="input-class"
  />
  <Chipster.Suggestions 
    className="suggestions-class"
  />
</Chipster>

Theme Support

Chipster provides built-in light and dark themes. Custom styles will override theme styles when using the ! modifier:

<Chipster theme="dark">
  <Chipster.ItemList 
    itemClassName="!bg-blue-900 !text-white" // Overrides dark theme styles
  />
</Chipster>

Styling Examples

Basic Example with Custom Styles

<Chipster>
  <Chipster.ItemList 
    className="flex flex-wrap gap-2"
    itemClassName="!bg-blue-100 !text-blue-900 !px-3 !py-1 !rounded-full"
    removeButtonClassName="!ml-2 !text-blue-500"
    iconClassName="!mr-2"
  />
</Chipster>

Example with Custom Remove Icon

<Chipster>
  <Chipster.ItemList 
    itemClassName="!bg-gray-100 !px-4"
    removeButtonClassName="!bg-red-500 !text-white"
    removeIcon={<XMarkIcon className="h-4 w-4" />}
  />
</Chipster>

Style Override Priority

Default styles (lowest priority)
Theme styles (medium priority)
Custom styles with ! modifier (highest priority)

Best Practices

Use the ! modifier to ensure your custom styles take precedence
Apply consistent styling across components
Consider theme compatibility when styling
Use Tailwind's utility classes for quick styling
Group related style overrides together

onSelect About Chipster