Group

A component for visually grouping a series of controls.

import { EllipsisIcon, FilesIcon, FilmIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Group, GroupItem, GroupSeparator } from "@/components/ui/group"

export default function GroupDemo() {
  return (
    <Group>
      <GroupItem render={<Button variant="outline" />}>
        <FilesIcon />
        Files
      </GroupItem>
      <GroupSeparator />
      <GroupItem render={<Button variant="outline" />}>
        <FilmIcon />
        Media
      </GroupItem>
      <GroupSeparator />
      <GroupItem
        render={<Button variant="outline" size="icon" aria-label="Menu" />}
      >
        <EllipsisIcon />
      </GroupItem>
    </Group>
  )
}

Installation

npx love-ui@latest add group

Usage

import { Button } from "@/components/ui/button"
import { Group, GroupItem, GroupSeparator } from "@/components/ui/group"

<Group>
  <GroupItem render={<Button />}>Button</GroupItem>
  <GroupSeparator />
  <GroupItem render={<Button />}>Button</GroupItem>
</Group>

Examples

With Input

import { CopyIcon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Group, GroupItem, GroupSeparator } from "@/components/ui/group"
import { Input } from "@/components/ui/input"

export default function GroupWithInput() {
  return (
    <Group>
      <GroupItem
        render={<Input type="text" defaultValue="https://loveui.dev" />}
      />
      <GroupSeparator />
      <GroupItem
        render={<Button variant="outline" size="icon" aria-label="Copy" />}
      >
        <CopyIcon />
      </GroupItem>
    </Group>
  )
}

Frame Input