Toggle Group

npx shadcn@latest add https://ui.saasflare.io/r/toggle-group.json

pnpm add @saasflare/ui

"use client"import { ToggleGroup, ToggleGroupItem } from "@saasflare/ui"/** A single-selection toggle group for text alignment. */export function Demo() {    return (        <ToggleGroup type="single" defaultValue="center">            <ToggleGroupItem value="left">Left</ToggleGroupItem>            <ToggleGroupItem value="center">Center</ToggleGroupItem>            <ToggleGroupItem value="right">Right</ToggleGroupItem>        </ToggleGroup>    )}

"use client"import { useState } from "react"import { ToggleGroup, ToggleGroupItem } from "@saasflare/ui"/** A multi-selection toggle group, controlled, for text formatting. */export function Demo() {    const [value, setValue] = useState<string[]>(["bold"])    return (        <ToggleGroup            type="multiple"            variant="outline"            value={value}            onValueChange={setValue}        >            <ToggleGroupItem value="bold">Bold</ToggleGroupItem>            <ToggleGroupItem value="italic">Italic</ToggleGroupItem>            <ToggleGroupItem value="underline">Underline</ToggleGroupItem>        </ToggleGroup>    )}