🚀 saastro/ui (Astro)
⚛️ shadcn/ui (React)
Installation
npx saastro add toggle-groupUsage
---
import { ToggleGroup, ToggleGroupItem } from "@/components/ui-saastro/toggle-group";
---
<ToggleGroup type="single">
<ToggleGroupItem value="a">A</ToggleGroupItem>
<ToggleGroupItem value="b">B</ToggleGroupItem>
<ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>Props
ToggleGroup
| Prop | Type | Default | Description |
|---|---|---|---|
| type | "single" | "multiple" | "single" | Selection mode |
| variant | "default" | "outline" | "default" | Visual style |
| size | "default" | "sm" | "lg" | "default" | Size variant |
ToggleGroupItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | Required | Unique value for this item |
| pressed | boolean | false | Whether initially pressed |
Performance
Performance Benchmark
Bundle Size
~1.5KB vs ~175KB
99% menos
Hydration
0ms vs --
Sin hydration
Toggle Response
-- vs --
Interactúa para medir
Saastro (Vanilla JS)
shadcn (React)
Haz click en "Ejecutar Test" o interactúa con los componentes (click) para medir el rendimiento.