React Button Group - Rich Text Toolbar
A rich text formatting toolbar with toggle buttons for text styling and alignment controls in unified button groups
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Text formatting requires rapid toggling—grouped controls accelerate writing workflows. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's BoldIcon, ItalicIcon, UnderlineIcon, AlignLeftIcon, AlignCenterIcon, AlignRightIcon, ListIcon, and ListOrderedIcon for comprehensive rich text editing toolbars. Built on Radix UI with stateful toggle buttons using variant switching between 'default' (active) and 'outline' (inactive) with size="sm" for compact editor controls, the pattern delivers WYSIWYG formatting tools in visually grouped sets. Perfect for blog post editors with inline formatting controls, note-taking applications requiring text manipulation, email composers offering styling options, or any content creation interface where formatting should feel grouped and accessible—button groups unify related controls, toggle states communicate active formatting, icon-only buttons maximize toolbar density.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-advanced-4.json