Comparación entre la versión Astro (Saastro) y React (shadcn/ui)
🚀 saastro/ui (Astro)
⚛️ shadcn/ui (React)
Installation
Usage
---
import { Tooltip, TooltipTrigger, TooltipContent } from "@/components/ui-saastro/tooltip"
---
<Tooltip>
<TooltipTrigger>Hover</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>Examples
Positions
<Tooltip>
<TooltipTrigger>Top</TooltipTrigger>
<TooltipContent side="top">Tooltip on top</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>Bottom</TooltipTrigger>
<TooltipContent side="bottom">Tooltip on bottom</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>Left</TooltipTrigger>
<TooltipContent side="left">Tooltip on left</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger>Right</TooltipTrigger>
<TooltipContent side="right">Tooltip on right</TooltipContent>
</Tooltip>Props
TooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "right" | "bottom" | "left" | "top" | The preferred side of the trigger to render against |
class | string | - | Additional CSS classes |
Accessibility
- Uses
role="tooltip"for proper semantics - Shows on hover and focus
- Hides on mouse leave and blur
Performance
Performance Benchmark
Bundle Size
~1KB vs ~180KB
99% menos
Hydration
0ms vs --
Sin hydration
Hover Response
-- vs --
Interactúa para medir
Saastro (Vanilla JS)
shadcn (React)
Haz click en "Ejecutar Test" o interactúa con los componentes (hover) para medir el rendimiento.