Comparación entre la versión Astro (Saastro) y React (shadcn/ui)
🚀 saastro/ui (Astro)
Heads up!
You can add components to your app using the cli.
Error
Your session has expired. Please log in again.
⚛️ shadcn/ui (React)
Installation
Usage
---
import { Alert, AlertTitle, AlertDescription } from "@/components/ui-saastro/alert"
---
<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>Examples
Default
<Alert>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="4 17 10 11 4 5" />
<line x1="12" x2="20" y1="19" y2="19" />
</svg>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>Destructive
<Alert variant="destructive">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10" />
<line x1="12" x2="12" y1="8" y2="12" />
<line x1="12" x2="12.01" y1="16" y2="16" />
</svg>
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Your session has expired. Please log in again.
</AlertDescription>
</Alert>Props
Alert
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "default" | The visual style of the alert |
class | string | - | Additional CSS classes |
AlertTitle
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes |
AlertDescription
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes |
Accessibility
- Uses
role="alert"for screen reader announcement - Supports icons with proper sizing and positioning
- Color contrast meets WCAG guidelines