Getting Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Attachment
- Avatar
- Badge
- Banner
- Breadcrumb
- Bubble
- Button
- Button Group
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Command
- Collapsible
- Combobox
- Context Menu
- Data Table
- Date Picker
- Dialog
- Dropdown Menu
- Editor
- Input
- Input Group
- Label
- Loading Spinner
- Native Select
- Popover
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Steps
- Switch
- Tabs
- Textarea
- Tooltip
Patterns
Alert
Displays a callout for user attention.
Heads up!
You can add components to your app using the cli.
Component Code
<april:alert> <slot:icon> <x-lucide-terminal class="h-4 w-4" /> </slot:icon> <slot:title>Heads up!</slot:title> <slot:description> You can add components to your app using the cli. </slot:description></april:alert>
Component Code
<april:alert> <slot:icon> <x-lucide-terminal class="h-4 w-4" /> </slot:icon> <slot:title>Heads up!</slot:title> <slot:description> You can add components to your app using the cli. </slot:description></april:alert>
Destructive
Heads up!
You can add components to your app using the cli.
Component Code
<april:alert variant="destructive"> <slot:icon> <x-lucide-terminal class="h-4 w-4" /> </slot:icon> <slot:title>Heads up!</slot:title> <slot:description> You can add components to your app using the cli. </slot:description></april:alert>
Component Code
<april:alert variant="destructive"> <slot:icon> <x-lucide-terminal class="h-4 w-4" /> </slot:icon> <slot:title>Heads up!</slot:title> <slot:description> You can add components to your app using the cli. </slot:description></april:alert>
Dismissable alert
The
alert component supports being dismissed (ie the alert can be hidden when the close button is pressed).
Heads up!
You can add components to your app using the cli.
Component Code
<april:alert dismissable> <slot:icon> <x-lucide-terminal class="h-4 w-4" /> </slot:icon> <slot:title>Heads up!</slot:title> <slot:description> You can add components to your app using the cli. </slot:description></april:alert>
Component Code
<april:alert dismissable> <slot:icon> <x-lucide-terminal class="h-4 w-4" /> </slot:icon> <slot:title>Heads up!</slot:title> <slot:description> You can add components to your app using the cli. </slot:description></april:alert>
Dismiss On Timeout
Additionally, an alert can be dismissed after a timeout
Heads up!
You can add components to your app using the cli.
Component Code
<april:alert dismissOnTimeout timeout="5000"> <slot:icon> <x-lucide-terminal class="h-4 w-4" /> </slot:icon> <slot:title>Heads up!</slot:title> <slot:description> You can add components to your app using the cli. </slot:description></april:alert>
Component Code
<april:alert dismissOnTimeout timeout="5000"> <slot:icon> <x-lucide-terminal class="h-4 w-4" /> </slot:icon> <slot:title>Heads up!</slot:title> <slot:description> You can add components to your app using the cli. </slot:description></april:alert>
You could also decide to start the timeout on intersect
Heads up!
You can add components to your app using the cli.
Component Code
<april:alert dismissOnTimeout startTimeoutOnIntersect timeout="5000"> <slot:icon> <x-lucide-terminal class="h-4 w-4" /> </slot:icon> <slot:title>Heads up!</slot:title> <slot:description> You can add components to your app using the cli. </slot:description></april:alert>
Component Code
<april:alert dismissOnTimeout startTimeoutOnIntersect timeout="5000"> <slot:icon> <x-lucide-terminal class="h-4 w-4" /> </slot:icon> <slot:title>Heads up!</slot:title> <slot:description> You can add components to your app using the cli. </slot:description></april:alert>
Publishing Views
Use the following command to publish this view:
php artisan april:publish alert
php artisan april:publish alert
php artisan april:publish --all
php artisan april:publish --all