mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Ivan Vasilov
02cf09212e
This PR removes all `paths` in `tsconfig.json` for all apps and packages. They were added previosly because some of the components had a `_Shadcn` suffix because of an ongoing migration. How that the migration is done, the paths can be removed. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized shared UI component, utility, and icon imports across design-system examples and application screens. * Simplified shared component access and project configuration. * Added shared access to anchor-link helpers and animation styles. * **Compatibility** * Updated component exports and imports without changing existing behavior. * No changes to user-facing workflows, screens, or functionality. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
41 lines
1.2 KiB
Plaintext
41 lines
1.2 KiB
Plaintext
---
|
|
title: Alert
|
|
description: Displays a low-level callout primitive for user attention.
|
|
component: true
|
|
source:
|
|
radix: true
|
|
shadcn: true
|
|
---
|
|
|
|
Alert is the low-level shadcn primitive that forms the foundation for [Admonition](../fragments/admonition). Use Admonition for product callouts unless you need custom composition that the Admonition API does not support.
|
|
|
|
Examples where Alert may be appropriate include bespoke icons, custom internal layouts, or wrapper components that need direct access to `alertVariants`.
|
|
|
|
Use [Collapsible Alert](../fragments/collapsible-alert) when a callout also needs expandable detail. Use [Collapsible](./collapsible) only for generic disclosure behaviour that is not itself an alert.
|
|
|
|
<ComponentPreview name="alert-demo" peekCode wide />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Alert, AlertDescription, AlertTitle } from 'ui'
|
|
```
|
|
|
|
```tsx
|
|
<Alert>
|
|
<Terminal className="h-4 w-4" />
|
|
<AlertTitle>Heads up!</AlertTitle>
|
|
<AlertDescription>
|
|
You can add components and dependencies to your app using the cli.
|
|
</AlertDescription>
|
|
</Alert>
|
|
```
|
|
|
|
### Variants
|
|
|
|
Use `alertVariants` when building shared wrappers around the primitive.
|
|
|
|
```tsx
|
|
import { alertVariants } from 'ui'
|
|
```
|