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
Card
Displays a card with header, content, and footer.
Create project
Deploy your new project in one-click.
Component Code
<april:card class="md:w-[350px]"> <slot:title class="mt-0">Create project</slot:title> <slot:description>Deploy your new project in one-click.</slot:description> <slot:content> <form> <div class="grid w-full items-center gap-4"> <div class="flex flex-col space-y-1.5"> <april:label for="name">Name</april:label> <april:input id="name" label="Name" placeholder="Name of your project" /> </div> <div class="flex flex-col space-y-1.5"> <april:label for="library">Library</april:label> <april:select id="library" label="Library"> <option>April UI</option> <option>Filament PHP</option> <option>Mary UI</option> <option>Pines UI</option> </april:select> </div> </div> </form> </slot:content> <slot:footer class="flex justify-between"> <april:button variant="outline">Cancel</april:button> <april:button>Deploy</april:button> </slot:footer></april:card>
Component Code
<april:card class="md:w-[350px]"> <slot:title class="mt-0">Create project</slot:title> <slot:description>Deploy your new project in one-click.</slot:description> <slot:content> <form> <div class="grid w-full items-center gap-4"> <div class="flex flex-col space-y-1.5"> <april:label for="name">Name</april:label> <april:input id="name" label="Name" placeholder="Name of your project" /> </div> <div class="flex flex-col space-y-1.5"> <april:label for="library">Library</april:label> <april:select id="library" label="Library"> <option>April UI</option> <option>Filament PHP</option> <option>Mary UI</option> <option>Pines UI</option> </april:select> </div> </div> </form> </slot:content> <slot:footer class="flex justify-between"> <april:button variant="outline">Cancel</april:button> <april:button>Deploy</april:button> </slot:footer></april:card>
Publishing Views
Use the following command to publish this view:
php artisan april:publish card
php artisan april:publish card
php artisan april:publish --all
php artisan april:publish --all