Comparación entre la versión Astro (Saastro) y React (shadcn/ui)
🚀 saastro/ui (Astro)
⚛️ shadcn/ui (React)
Installation
Usage
---
import { Toggle } from "@/components/ui-saastro/toggle"
---
<Toggle aria-label="Toggle italic">
<ItalicIcon class="size-4" />
</Toggle>Examples
Outline
<Toggle variant="outline" aria-label="Toggle italic">
<ItalicIcon class="size-4" />
</Toggle>With Text
<Toggle aria-label="Toggle italic">
<ItalicIcon class="size-4" />
Italic
</Toggle>Small
<Toggle size="sm" aria-label="Toggle italic">
<ItalicIcon class="size-4" />
</Toggle>Large
<Toggle size="lg" aria-label="Toggle italic">
<ItalicIcon class="size-4" />
</Toggle>Disabled
<Toggle disabled aria-label="Toggle italic">
<ItalicIcon class="size-4" />
</Toggle>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "outline" | "default" | The visual style |
size | "default" | "sm" | "lg" | "default" | The size of the toggle |
pressed | boolean | false | Whether the toggle is pressed |
disabled | boolean | false | Whether the toggle is disabled |
class | string | - | Additional CSS classes |
Accessibility
- Uses
role="switch"for proper semantics - Includes
aria-pressedattribute that toggles with state - Use
aria-labelfor icon-only toggles
Performance
Performance Benchmark
Bundle Size
~1KB 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.