About
A set of two-state buttons that can be toggled on or off..
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Toggle Group to your project and fits it to your theme.
Code
How Toggle Group is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { useState } from 'react';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group-1';
export default function TabsDemo() {
const [value, setValue] = useState('1W');
return (
<ToggleGroup
type="single"
value={value}
onValueChange={(newValue) => {
if (newValue) setValue(newValue);
}}
>
<ToggleGroupItem value="1D">1D</ToggleGroupItem>
<ToggleGroupItem value="1W">1W</ToggleGroupItem>
<ToggleGroupItem value="1M">1M</ToggleGroupItem>
<ToggleGroupItem value="6M">6M</ToggleGroupItem>
<ToggleGroupItem value="1Y">1Y</ToggleGroupItem>
</ToggleGroup>
);
}
















