Color
Two toolbar buttons, one for text color and one for background color. Each opens a popover with a color area, a hue slider and a hex field.
Installation
This pattern is built from files in @intentui/editor. Install the editor, then copy the code above into a component of your own.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/editor
What's included
| Piece | Why it is here |
|---|---|
RichTextExtension | Lexical's rich text behavior. Every pattern needs it. |
InitialStateExtension | Applies the seeded content immediately, so the server and the client render the same. Leave it out if your editor starts empty. See Seeding initial content. |
FormatStateExtension | Reports the color at the selection, so the swatch under each icon matches it. Remove it and the buttons throw, because they read from it. |
ColorToolbarPlugin | Both color buttons. It takes no props. |
Toolbar | The container that holds toolbar plugins. See Toolbar. |
Behavior
- The color is applied while the user drags or types, not when the popover closes.
- Colors are stored as inline hex styles,
colorandbackground-color. - When the selection has no explicit color, the swatch falls back to
#000000for text and#fffffffor background. Nothing is applied until the user changes the value. - An eye dropper button appears next to the hex field in browsers that support the
EyeDropperAPI.
Styling
The pickers are built from the Intent UI color components (color-area, color-slider, color-field, color-swatch, color-picker) in components/ui/. The popover follows your overlay and border tokens. Edit color-toolbar-plugin.tsx to change the icons or the fallback colors.
Related patterns
- Text format includes a highlight format that uses a theme color.
- Font for font family and size.
- Clear to remove colors from the selection.