Components
Loading preview...
The SegmentedButtonGroup component is a clean and flexible button group built entirely with shadcn UI. It visually splits a single button into multiple segments, allowing users to toggle between options like “Day / Week / Month” or priority levels. Each segment acts as an individual button, with the active segment highlighted while others remain outlined, creating a clear and intuitive selection interface. The component dynamically supports any number of segments, maintains rounded corners on the first and last buttons for a seamless appearance, and provides callbacks for handling user selection. Its simple yet elegant design makes it ideal for dashboards, filters, and interactive toggle controls in modern web applications.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/segmented-button-group"use client"
import SegmentedButtonGroup from "@/components/ui/segmented-button-group"
import { useState } from "react"
export default function SegmentedButtonGroupDemo() {
const [period, setPeriod] = useState("Day")
return (
<div className="p-6 flex flex-col gap-4">
<SegmentedButtonGroup
options={["Day", "Week", "Month"]}
selected={period}
onChange={(value) => setPeriod(value)}
/>
<p>Selected Period: {period}</p>
<SegmentedButtonGroup
options={["Low", "Medium", "High", "Critical"]}
onChange={(value) => console.log("Priority selected:", value)}
/>
</div>
)
}