Segment Group

1import { SegmentGroup, SegmentGroupItem, SegmentGroupItemText, SegmentGroupIndicator } from "@/components/ui/segment-group";
2
3<SegmentGroup />

1"use client";
2
3import {
4  SegmentGroup as ArkSegmentGroup,
5  useSegmentGroupContext,
6} from "@ark-ui/react/segment-group";
7import type React from "react";
8import { cn } from "@/lib/utils";
9
10export const useSegmentGroup = useSegmentGroupContext;
11
12type SegmentGroupVariant = "default" | "underline";
13
14interface SegmentGroupProps
15  extends React.ComponentProps<typeof ArkSegmentGroup.Root> {
16  /**
17   * The visual variant of the segment group.
18   *
19   * @default "default"
20   */
21  variant?: SegmentGroupVariant;
22}
23
24export const SegmentGroup = (props: SegmentGroupProps) => {
25  const {
26    orientation = "horizontal",
27    variant = "default",
28    className,