Item adornment

Tools

Coloured organic shapes for list items, with deterministic automatic selection and custom icon or no-icon options.

React · copy into your project · light and dark themes

Try it

Variant

Size

Project notes

Choose both, either, or neither. The text and action stay available.

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/item-adornment.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes checkbox, typography. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/checkbox.json https://luv-jeri.github.io/cojeev-ui/r/item-adornment.json https://luv-jeri.github.io/cojeev-ui/r/typography.json

Using item adornment

Menu and select items use adornment="auto" by default. Stable item identity keeps the same shape and colour across renders.
Pass adornment={false} or "none" to hide it, {shape,color} to choose a shape and tone, or a React element for your own icon.
Use ItemAdornment directly in your own lists. Meaningful state must also have a text or semantic label.
Within an adornment object, set showIcon or showBackground independently. Both false hides both; custom React icons and adornment={false} still work.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

ItemAdornmentItemProps

Prop	Type	Required
`adornment`	`ItemAdornmentValue`	No
`adornmentId` Keeps the visual identity stable when a label changes or is translated.	`string`	No

ItemAdornmentProps

Prop	Type	Required
`identity`	`string`	Yes
`value`	`ItemAdornmentValue`	No
`size`	`"sm" \| "default" \| "lg"`	No

Accessibility

Decorative adornments are hidden from assistive technology.
Text labels remain the accessible item names; selection does not depend on colour alone.

States and appearance

restselectedhovereddisabled

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.