ReUI Button Group

Buttons 2

About

ReUI Button Group with the first 10 official ReUI examples, preserved from the MIT-licensed source registry.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ReUI Button Group to your project and fits it to your theme.

Code

How ReUI Button Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { UsersIcon, PlusIcon, ClockIcon, MoreHorizontalIcon, UserIcon, SettingsIcon, ExternalLinkIcon } from "lucide-react"
import {
  Avatar,
  AvatarFallback,
  AvatarGroup,
  AvatarImage,
} from "@/components/ui/reui-button-group-utils/avatar"
import { Button } from "@/components/ui/reui-button-group-utils/button"
import {
  ButtonGroup,
  ButtonGroupText,
} from "@/components/ui/reui-button-group"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/reui-button-group-utils/dropdown-menu"

const team = [
  { name: "Shadcn", src: "https://cdn.21st.dev/assets/mirror/51/513d06f542692036ff0bb17938f04b3efd60567ba2cae08049469d21f18e0524.jpg", fallback: "CN" },
  { name: "Max", src: "https://cdn.21st.dev/assets/mirror/21/218688eaf50a9380355622deaa0d087a808e4967bb39bf653ccef7d46193a169.png", fallback: "ML" },
  {
    name: "Evil Rabbit",
    src: "https://cdn.21st.dev/assets/mirror/ef/ef407ec862dd072b8624fad7a331df80f56694e98bc1d89b0feb0ea0185e8954.png",
    fallback: "ER",
  },
]

export default function Pattern() {
  return (
    <ButtonGroup>
      {/* Team Context */}
      <Button variant="outline">
        <UsersIcon aria-hidden="true" />
        <span>Team</span>
      </Button>

      {/* Active Members - Inspired by Avatar Patterns */}
      <ButtonGroupText className="gap-0 bg-transparent">
        <AvatarGroup>
          {team.map((member) => (
            <Avatar key={member.name} className="size-5">
              <AvatarImage src={member.src} alt={member.name} />
              <AvatarFallback>{member.fallback}</AvatarFallback>
            </Avatar>
          ))}
        </AvatarGroup>
        <div className="ml-2 flex items-center gap-1">
          <span className="size-1.5 rounded-full bg-green-500" />
          <span className="text-muted-foreground text-xs font-medium">
            3 Live
          </span>
        </div>
      </ButtonGroupText>

      {/* Collaboration Actions */}
      <Button variant="outline" size="icon">
        <PlusIcon aria-hidden="true" />
      </Button>
      <Button variant="outline" size="icon">
        <ClockIcon aria-hidden="true" />
      </Button>

      {/* Options Dropdown */}
      <DropdownMenu>
        <DropdownMenuTrigger
          render={
            <Button variant="outline" size="icon">
              <MoreHorizontalIcon aria-hidden="true" />
            </Button>
          }
        />
        <DropdownMenuContent align="end" className="w-48">
          <DropdownMenuGroup>
            <DropdownMenuLabel>Team Settings</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem>
              <UserIcon aria-hidden="true" />
              <span>Manage members</span>
            </DropdownMenuItem>
            <DropdownMenuItem>
              <SettingsIcon aria-hidden="true" />
              <span>Team preferences</span>
            </DropdownMenuItem>
          </DropdownMenuGroup>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            <ExternalLinkIcon aria-hidden="true" />
            <span>Open dashboard</span>
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </ButtonGroup>
  )
}