glasscn
Glass Toggle Group

A segmented control with a sliding glass puck indicator. Supports icons, text, or any React content.

MonthlyQuarterlyYearly
Contacts
Calls
Chats
Profile
import { useState } from "react"
import {
  AlignCenterIcon,
  AlignLeftIcon,

Installation

$ npx shadcn add @glasscn/glass-toggle-group

Variants

default
MonthlyQuarterlyYearly
Contacts
Calls
Chats
Profile

API

Prop
Type
Default
Description
GlassToggleGroupvalue
string-
The controlled value of the selected item.
GlassToggleGroupdefaultValue
string-
The default value for uncontrolled usage.
GlassToggleGrouponValueChange
(value: string) => void-
Callback fired when the selected value changes.
GlassToggleGroupItemvalue
string-
The unique value for this item.
GlassToggleGroupItemchildren
React.ReactNode-
The content to display (icon, text, or any React element).