Components
Loading preview...
A liquid glass radio is a sleek, modern radio component with a fluid, glass-like interface.
npx shadcn@latest add https://21st.dev/r/xubohuah/liquid-radio"use client";
import React, { useState} from 'react'
import { GlassFilter } from "@/components/ui/liquid-radio";
import {RadioGroup,RadioGroupItem} from '@/components/ui/radio-group'
export default function DemoOne() {
const [environment, setEnvironment] = useState('online')
return (
<div className="inline-flex h-9 rounded-lg bg-input/50 p-0.5">
<RadioGroup
value={environment}
onValueChange={setEnvironment}
className="group relative inline-grid grid-cols-[1fr_1fr] items-center gap-0 text-sm font-medium after:absolute after:inset-y-0 after:w-1/2 after:rounded-md after:bg-background/80 after:shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(0,0,0,0.9),inset_-3px_-3px_0.5px_-3px_rgba(0,0,0,0.85),inset_1px_1px_1px_-0.5px_rgba(0,0,0,0.6),inset_-1px_-1px_1px_-0.5px_rgba(0,0,0,0.6),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)] after:transition-transform after:duration-300 after:[transition-timing-function:cubic-bezier(0.16,1,0.3,1)] has-[:focus-visible]:after:outline has-[:focus-visible]:after:outline-2 has-[:focus-visible]:after:outline-ring/70 data-[state=offline]:after:translate-x-0 data-[state=online]:after:translate-x-full dark:after:shadow-[0_0_8px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3.5px_rgba(255,255,255,0.09),inset_-3px_-3px_0.5px_-3.5px_rgba(255,255,255,0.85),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.6),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.6),inset_0_0_6px_6px_rgba(255,255,255,0.12),inset_0_0_2px_2px_rgba(255,255,255,0.06),0_0_12px_rgba(0,0,0,0.15)]"
data-state={environment}
>
<div
className="absolute top-0 left-0 isolate -z-10 h-full w-full overflow-hidden rounded-md"
style={{ filter: 'url("#radio-glass")' }}
/>
<label className="relative z-10 inline-flex h-full min-w-8 cursor-pointer select-none items-center justify-center whitespace-nowrap px-4 transition-colors text-muted-foreground/70 group-data-[state=online]:text-muted-foreground/70 group-data-[state=offline]:text-foreground">
Test
<RadioGroupItem id="env-offline" value="offline" className="sr-only" />
</label>
<label className="relative z-10 inline-flex h-full min-w-8 cursor-pointer select-none items-center justify-center whitespace-nowrap px-4 transition-colors text-muted-foreground/70 group-data-[state=offline]:text-muted-foreground/70 group-data-[state=online]:text-foreground">
Prod
<RadioGroupItem id="env-online" value="online" className="sr-only" />
</label>
<GlassFilter />
</RadioGroup>
</div>
);
}