Components
Loading preview...
@edwinvakayil
npx shadcn@latest add https://21st.dev/r/edwinvakayil/toggle-group"use client";
import { useState } from "react";
import {
ToggleGroup,
type ToggleGroupItem,
} from "@/components/ui/toggle-group";
const items: ToggleGroupItem[] = [
{ value: "bold", ariaLabel: "Bold", label: <span className="font-semibold leading-none">B</span> },
{ value: "italic", ariaLabel: "Italic", label: <span className="font-medium italic leading-none">I</span> },
{
value: "underline",
ariaLabel: "Underline",
label: <span className="leading-none underline decoration-1 underline-offset-2">U</span>,
},
];
export function ToggleGroupPreview() {
const [value, setValue] = useState<string[]>([]);
return (
<ToggleGroup
aria-label="Text formatting"
items={items}
onValueChange={setValue}
value={value}
/>
);
}
export default ToggleGroupPreview