Core components.
The core component set that carries product teams' shared expectations for behavior, appearance and accessibility.
Colors
The Acun UI palette. Components use Tailwind's color names (brand, gray, zinc, emerald…); the @theme block in panel.css sets their values. Each color's light and dark shades are derived from a single base value with color-mix, so changing a color takes a single line.
<div class="space-y-3">
@foreach (['brand' => 'Primary', 'emerald' => 'Success', 'sky' => 'Info', 'amber' => 'Warning', 'red' => 'Danger'] as $color => $name)
<div class="grid grid-cols-[6rem_1fr] items-center gap-3">
<span class="text-xs font-medium text-gray-500 dark:text-zinc-400">{{ $name }}</span>
<div class="grid grid-cols-11 overflow-hidden rounded-sm">
@foreach ([50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as $shade)
<span class="h-9" style="background: var(--color-{{ $color }}-{{ $shade }})" title="{{ $color }}-{{ $shade }}"></span>
@endforeach
</div>
</div>
@endforeach
</div>Typography
Text is set in Public Sans, and code and numeric labels in DM Mono (both under the SIL Open Font License). Component body text is 14px (text-sm); heading tags automatically get the ink color and a slight negative letter spacing.
<div class="space-y-4">
<p class="text-4xl font-bold tracking-tight">Monthly sales · 4xl / 40px</p>
<p class="text-3xl font-bold tracking-tight">Monthly sales · 3xl / 32px</p>
<h1 class="text-2xl font-semibold">Page title · 2xl / 26px</h1>
<h2 class="text-xl font-semibold">Section title · xl / 21px</h2>
<h3 class="text-lg font-semibold">Subsection · lg / 18px</h3>
<h4 class="text-base font-semibold">Card title (large) · base / 16px</h4>
<h5 class="text-sm font-semibold">Card title · sm / 14px</h5>
<h6 class="text-xs font-semibold tracking-wide text-gray-500 uppercase dark:text-zinc-400">Section label · xs / 12px</h6>
</div>Icons
Heroicons v2 (MIT): 324 icons in outline and solid styles. The drawings are embedded in the package; no icon font, CDN or extra package is needed, and only the icons you use end up on the page.
<div class="flex flex-wrap items-center gap-5">
<acun:icon name="home" />
<acun:icon name="map-pin" />
<acun:icon name="truck" />
<acun:icon name="users" />
<acun:icon name="document-text" />
</div>Vertical layout
A panel layout with a left-hand menu. It includes a sidebar that collapses on desktop, a drawer that opens from the left on mobile, and a floating top bar that carries the page title, search, actions, the theme toggle and the user menu. As the application's main layout, it renders the entire HTML document.
<acun:layout.sidebar
:title="$title ?? null"
brand-name="Acun Panel"
brand-tagline="Store Management"
:home-url="route('dashboard')"
>
<acun:slot:head>
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</acun:slot:head>
<acun:slot:logo><img src="/logo.svg" alt="" class="size-7"></acun:slot:logo>
<acun:slot:nav>
<acun:menu menu="main" />
</acun:slot:nav>
{{ $slot }}
</acun:layout.sidebar>Horizontal layout
A panel layout with a top menu. On wide screens the menu sits horizontally in the top bar; below lg it moves into a drawer that opens from the left. It is an alternative to the vertical layout for applications with a short menu.
<acun:layout.horizontal :title="$title ?? null" brand-name="Acun Panel" :home-url="route('dashboard')">
<acun:slot:head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</acun:slot:head>
<acun:slot:nav>
<acun:nav.horizontal-item :href="route('dashboard')" title="Home" :active="request()->routeIs('dashboard')" />
<acun:nav.horizontal-group title="Customers" :active="request()->routeIs('customers.*')">
<acun:nav.sub-item compact :href="route('customers.index')" title="Customer List" />
<acun:nav.sub-item compact :href="route('customer-groups.index')" title="Customer Groups" />
</acun:nav.horizontal-group>
</acun:slot:nav>
{{ $slot }}
</acun:layout.horizontal>Auth layout
The layout for login, registration, password reset and two-factor authentication pages. It comes in two variants: an illustration on the left with the form on the right (cover), or a single centered card (basic).
<acun:layout.auth title="Log in">
<acun:slot:head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</acun:slot:head>
<acun:slot:logo><img src="/logo.svg" alt="Acun Panel" class="h-8 w-auto"></acun:slot:logo>
<acun:auth-header title="Welcome" description="Log in to your account to continue." />
<acun:auth-session-status class="mt-4" :status="session('status')" />
<form wire:submit="login" class="mt-6 space-y-4">
<acun:input wire:model="email" type="email" variant="floating" label="Email" />
<acun:input wire:model="password" type="password" variant="floating" label="Password" viewable />
<acun:checkbox wire:model="remember" label="Remember me" />
<acun:button type="submit" class="w-full">Log In</acun:button>
</form>
</acun:layout.auth>Message layout
A full-page message layout for 404, 403, 500, maintenance and coming-soon pages: a large code, a heading, a description, buttons and an optional illustration. On a page that has its own document, use `acun:message-panel` for the same screen.
{{-- resources/views/errors/404.blade.php --}}
<acun:layout.message code="404" heading="Page not found" description="The page you are looking for may have been moved or deleted.">
<acun:slot:head>@vite(['resources/css/app.css', 'resources/js/app.js'])</acun:slot:head>
<acun:slot:action>
<acun:button :href="url('/')">Back to home</acun:button>
<acun:button :href="url()->previous()" variant="white">Go back</acun:button>
</acun:slot:action>
</acun:layout.message>Head
The <head> content: meta tags, the page title, the appearance settings (as data) and a small script (acun-ui-boot.js) that applies the theme and menu state before the first paint. The Alpine stores (appearance, brand, sidebar, navbar, customizer) come from the Acun UI JavaScript: import '@acunsoft/acun-ui-core' or @acunUiScripts. The ready-made layouts add it themselves; you only need it when writing your own layout.
<!DOCTYPE html>
<html lang="en">
<head>
<acun:layout.head :title="$title ?? null">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</acun:layout.head>
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>Breadcrumb
A breadcrumb that shows where the page sits in the application. A root link with a home icon is added at the start automatically; the last item is rendered as plain text as the current page.
<acun:breadcrumb home-url="#" :items="[
['label' => 'Customers', 'url' => '#'],
['label' => 'Customer List', 'url' => '#'],
['label' => 'Edit'],
]" />Theme toggle
An icon button that switches between the light and dark themes. The preference is stored in the browser and, if the layout has a preference-url, also saved to the account. Since the icon is chosen with CSS, it looks right as soon as the page first opens.
Basic card
Groups content on a white surface, together with a header, an actions area and a footer. It is the basic container for summaries, lists and forms in dashboards, and it can be collapsed and closed.
<acun:card title="Kadıköy warehouse" subtitle="IST-04 · 148 orders">
<p class="text-sm text-gray-600 dark:text-zinc-400">112 orders shipped this month; 36 orders are waiting.</p>
</acun:card>Stat cards
Highlights a single number with its label, an icon and its change from the previous period. Used side by side in dashboard summaries.
Chart cards
ApexCharts charts placed inside a card. acun:card and acun:chart are used together for monthly comparisons, ratios and trends.
<acun:card title="Monthly orders" subtitle="Last 6 months">
<acun:chart :height="260" :options="[
'chart' => ['type' => 'bar'],
'series' => [['name' => 'Orders', 'data' => [2810, 2944, 3012, 2890, 3240, 3106]], ['name' => 'Returns', 'data' => [240, 198, 221, 260, 190, 214]]],
'xaxis' => ['categories' => ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']],
'colors' => ['primary', '#e5e7eb'],
'plotOptions' => ['bar' => ['borderRadius' => 4, 'columnWidth' => '45%']],
'dataLabels' => ['enabled' => false],
'legend' => ['position' => 'top', 'horizontalAlign' => 'left'],
]" />
</acun:card>Cards with actions
The actions area in the card header: a dropdown, buttons, collapsing and closing. While the content refreshes, the card is locked with acun:loading-overlay.
<acun:card title="Product summary" subtitle="September 2026">
<acun:slot:actions>
<acun:dropdown align="end">
<acun:slot:trigger>
<button type="button" class="flex size-7 cursor-pointer items-center justify-center rounded-sm text-gray-400 hover:bg-gray-100 dark:hover:bg-zinc-800" aria-label="Actions"><acun:icon name="ellipsis-vertical" size="4" /></button>
</acun:slot:trigger>
<acun:dropdown.item>Refresh</acun:dropdown.item>
<acun:dropdown.item>Export to Excel</acun:dropdown.item>
<acun:dropdown.item href="#">Open products</acun:dropdown.item>
</acun:dropdown>
</acun:slot:actions>
<p class="text-sm text-gray-600 dark:text-zinc-400">38 published products, 4 draft products.</p>
</acun:card>Card and tabs
Using two components together to show different aspects of a record in a single card with tabs. All the options of each component are described on its own page (Basic card, Tabs).
<acun:card title="Customer summary">
<acun:slot:actions><acun:button variant="ghost" size="sm">Edit</acun:button></acun:slot:actions>
<acun:tabs :tabs="['info' => 'Info', 'orders' => 'Orders', 'documents' => 'Documents']">
<acun:tab-panel value="info"><p class="text-sm text-gray-600 dark:text-zinc-400">Premium member · Istanbul</p></acun:tab-panel>
<acun:tab-panel value="orders"><acun:progress :value="75" label="Annual target" /></acun:tab-panel>
<acun:tab-panel value="documents"><acun:empty-state title="No documents" /></acun:tab-panel>
</acun:tabs>
</acun:card>Accordion
Sections that open and close when their header is clicked. Suitable for FAQs and for grouping long content; by default only one section stays open at a time.
<acun:accordion open="shipping">
<acun:accordion.item name="shipping" title="When does my order ship?">
Orders placed before 15:00 ship the same day; the tracking number is sent by email.
</acun:accordion.item>
<acun:accordion.item name="returns" title="How do I return a product?">
Create a return request from My account > Orders; the return shipping code is valid for 14 days.
</acun:accordion.item>
<acun:accordion.item name="import" title="Can products be imported from Excel?">
Yes, you can download the template from the Imports menu, fill it in and upload it.
</acun:accordion.item>
</acun:accordion>Alert
An in-page notification box that sits right above the related content. Use it for the result of an action, a situation that needs attention or a persistent error; for feedback that lasts a few seconds, Toast is a better fit.
<div class="space-y-3">
<acun:alert>The October campaign schedule has been published.</acun:alert>
<acun:alert variant="success">Product details updated.</acun:alert>
<acun:alert variant="warning">Deleted records are also listed.</acun:alert>
<acun:alert variant="danger">Nothing was deleted because the customer has 3 open orders.</acun:alert>
</div>Badge
A small, rounded label for showing a status, a category or a count. Used in table cells, card headers and inside buttons.
<div class="flex flex-wrap items-center gap-2">
<acun:badge>Draft</acun:badge>
<acun:badge variant="success">Active</acun:badge>
<acun:badge variant="warning">Pending</acun:badge>
<acun:badge variant="danger">Inactive</acun:badge>
<acun:badge variant="info">Notified</acun:badge>
<acun:badge variant="primary">New</acun:badge>
<acun:badge variant="dark">Archived</acun:badge>
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
<acun:badge solid>Draft</acun:badge>
<acun:badge variant="success" solid>Active</acun:badge>
<acun:badge variant="warning" solid>Pending</acun:badge>
<acun:badge variant="danger" solid>Inactive</acun:badge>
<acun:badge variant="info" solid>Notified</acun:badge>
<acun:badge variant="primary" solid>New</acun:badge>
<acun:badge variant="dark" solid>Archived</acun:badge>
</div>Button
A button that starts an action. With href it renders a link, otherwise a button element; it has solid, outline and soft color variants, a colored shadow, three sizes, an icon-only form and a loading state.
<div class="flex flex-wrap gap-2">
<acun:button>Save</acun:button>
<acun:button variant="success">Confirm</acun:button>
<acun:button variant="danger">Delete</acun:button>
<acun:button variant="warning">Hold</acun:button>
<acun:button variant="info">Info</acun:button>
<acun:button variant="secondary">Archive</acun:button>
<acun:button variant="dark">Draft</acun:button>
<acun:button variant="light">Preview</acun:button>
<acun:button variant="white">Cancel</acun:button>
<acun:button variant="ghost">Clear selection</acun:button>
<acun:button variant="link">View all</acun:button>
</div>Button group
Shows related buttons as an attached, single-piece group. It suits period selection or icon toolbars.
<acun:button-group aria-label="Period">
<acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Day</acun:button>
<acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Week</acun:button>
<acun:button variant="white" class="!rounded-none first:!rounded-l last:!rounded-r -ml-px first:ml-0 relative hover:z-10 focus-visible:z-10">Month</acun:button>
</acun:button-group>Carousel
A slideshow you move through with arrows, dots or the keyboard. Used for announcements and image galleries; it can advance on its own if you want.
<acun:carousel label="Announcements">
<div class="flex h-56 flex-col justify-end bg-gradient-to-br from-brand-600 to-brand-800 p-8 text-white">
<p class="text-xs font-semibold tracking-wider uppercase opacity-80">October sale</p>
<p class="mt-1 text-xl font-semibold">Starts October 7</p>
</div>
<div class="flex h-56 flex-col justify-end bg-gradient-to-br from-emerald-600 to-emerald-800 p-8 text-white">
<p class="text-xs font-semibold tracking-wider uppercase opacity-80">Mobile app</p>
<p class="mt-1 text-xl font-semibold">Version 2.4 is out</p>
</div>
<div class="flex h-56 flex-col justify-end bg-gradient-to-br from-amber-500 to-amber-700 p-8 text-white">
<p class="text-xs font-semibold tracking-wider uppercase opacity-80">Reminder</p>
<p class="mt-1 text-xl font-semibold">September reports due by October 3</p>
</div>
</acun:carousel>Collapse
Opens and closes the area below a link when the link is clicked. Used to hide details, extra options or long descriptions at first glance.
<acun:collapse label="Import details">
<p class="text-sm text-gray-600 dark:text-zinc-400">1,248 rows were read: 1,201 products were added, 39 products were updated, and 8 rows were skipped because of an invalid barcode.</p>
</acun:collapse>Dropdown
A list of actions that opens below a button when it is clicked. It groups actions that do not need to take up space on the screen all the time, such as export options or row actions.
<acun:dropdown align="start">
<acun:slot:trigger>
<acun:button variant="white">Export</acun:button>
</acun:slot:trigger>
<acun:dropdown.item>Excel (.xlsx)</acun:dropdown.item>
<acun:dropdown.item>PDF</acun:dropdown.item>
<acun:dropdown.item>CSV</acun:dropdown.item>
</acun:dropdown>List group
A bordered list with rows separated by lines. Rows can be plain text, links, active or disabled, and can be enriched with icons and badges.
<acun:list-group>
<acun:list-group.item>Istanbul Main Warehouse</acun:list-group.item>
<acun:list-group.item>Ankara Warehouse</acun:list-group.item>
<acun:list-group.item>Izmir Warehouse</acun:list-group.item>
</acun:list-group>Modal
A window that opens on top of the page and dims what is behind it. Use it for short forms, detail views and situations where the user needs to focus on one task; only one modal stays open at a time.
<acun:modal.trigger name="catalog-customer"><acun:button>Open the customer summary</acun:button></acun:modal.trigger>
<acun:modal name="catalog-customer" title="Customer summary">
<dl class="space-y-3 text-sm">
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Customer</dt><dd>Ayşe Yılmaz</dd></div>
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Membership</dt><dd>Premium</dd></div>
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Last order</dt><dd>September 12, 2026</dd></div>
</dl>
</acun:modal>Confirmation dialog
A narrow window that asks the user one last time before an action that cannot be undone, such as deleting. It is built on acun:modal; opening, closing and focus behave the same way.
<acun:modal.trigger name="catalog-product-delete"><acun:button variant="outline-danger">Delete the product</acun:button></acun:modal.trigger>
<acun:confirmation-dialog
name="catalog-product-delete"
title="Delete the product"
description="Are you sure you want to delete the 'Wireless headphones' product? This cannot be undone."
confirm-text="Delete"
/>Drawer
A panel that slides in from the side of the screen. Use it for content viewed without leaving the page, such as record details, a short form or the filters of a list page.
<acun:drawer.trigger name="catalog-details"><acun:button variant="white">Open the customer summary</acun:button></acun:drawer.trigger>
<acun:drawer name="catalog-details" title="Customer summary">
<dl class="space-y-3 text-sm">
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Membership</dt><dd>Premium</dd></div>
<div class="flex justify-between"><dt class="text-gray-500 dark:text-zinc-400">Orders</dt><dd>5</dd></div>
</dl>
<acun:slot:footer>
<acun:drawer.close><acun:button variant="white">Close</acun:button></acun:drawer.close>
<acun:button>Edit</acun:button>
</acun:slot:footer>
</acun:drawer>Pagination
A ready-made view for the Laravel paginator: a "Showing 1 to 6 of 48 results" summary on the left, previous/next and page numbers on the right. In Livewire components it works without reloading the page; without Livewire it uses regular links.
Progress
Shows how much of a task is complete with a horizontal bar. The value can come fixed from the server or be bound to an Alpine expression that changes in the browser.
<div class="space-y-1.5">
<div class="flex justify-between text-sm">
<span class="font-medium text-gray-900 dark:text-zinc-100">Sales target</span>
<span class="tabular-nums">68%</span>
</div>
<acun:progress :value="68" label="Sales target" />
</div>Spinner
Shows a loading state while an operation runs. On buttons, use the loading prop of acun:button, and to lock an area, use acun:loading-overlay; the spinner is for everywhere else.
<div class="flex flex-wrap items-center gap-6">
<acun:spinner size="sm" />
<acun:spinner />
<acun:spinner size="lg" />
</div>Tabs
Splits content into tabs shown in the same area. It has two looks, underlined and pills; switching tabs does not reload the page.
<acun:tabs :tabs="['general' => 'General', 'orders' => 'Orders', 'history' => 'History']">
<acun:tab-panel value="general"><p class="text-sm text-gray-600 dark:text-zinc-400">Premium member · Kadıköy, Istanbul</p></acun:tab-panel>
<acun:tab-panel value="orders"><p class="text-sm text-gray-600 dark:text-zinc-400">Last order: September 12, 2026</p></acun:tab-panel>
<acun:tab-panel value="history"><p class="text-sm text-gray-600 dark:text-zinc-400">9 orders and 1 return in 2026.</p></acun:tab-panel>
</acun:tabs>Toast
A short notification that appears at the bottom right of the screen for a few seconds and disappears on its own. It reports the result of an action such as saving, deleting or importing without disturbing the page; it comes installed in all the ready-made layouts.
<div class="flex flex-wrap gap-2" x-data>
<acun:button variant="success" x-on:click="$dispatch('toast', { type: 'success', message: 'Product saved.' })">Success</acun:button>
<acun:button variant="danger" x-on:click="$dispatch('toast', { type: 'error', message: 'The record could not be deleted.' })">Error</acun:button>
<acun:button variant="warning" x-on:click="$dispatch('toast', { type: 'warning', message: '2 records were skipped due to permissions.' })">Warning</acun:button>
<acun:button variant="white" x-on:click="$dispatch('toast', { message: 'The import was queued.' })">Info</acun:button>
</div>Tooltip
A short explanation that appears when an element is hovered with the mouse or focused with the keyboard. Use it to show what an icon button does or the full text of a shortened value.
<div class="py-6">
<acun:tooltip text="The customer's order history">
<acun:button variant="white" size="sm">History</acun:button>
</acun:tooltip>
</div>Popover
An info bubble, with an optional title, that opens when the trigger is clicked. Suitable for explanations a few sentences long; for one-line hints, use acun:tooltip.
<acun:popover title="Return policy">
<acun:slot:trigger><acun:button variant="white" size="sm">Why can't it be returned?</acun:button></acun:slot:trigger>
Products can be returned within 14 days of delivery. This order was delivered on September 12.
</acun:popover>Page header
Shows the breadcrumb, the title, a short description, and the action buttons on the right together at the very top of the page. It gives list, form, and detail pages the same top layout.
<acun:page-header title="Orders" description="Shipping status of the 148 orders from the Kadıköy warehouse." />Description list
Lists the details of a record as label and value pairs, one below the other. Suits read-only summaries such as order, license, or customer details.
<acun:description-list :items="[
'Customer name' => 'Ayşe Yılmaz',
'Customer no.' => 'CUS-10482',
'Membership' => 'Premium',
'Orders' => '5',
'Address' => 'No. 14, Moda St., Kadıköy / Istanbul',
]" />Avatar
Represents a person or a record with a small, round image. Without a photo, initials are generated from the name; colors, a status dot and an overlapping group view are supported.
<div class="flex flex-wrap items-center gap-4">
<acun:avatar name="Ayşe Yılmaz" size="xs" />
<acun:avatar name="Ayşe Yılmaz" size="sm" />
<acun:avatar name="Ayşe Yılmaz" />
<acun:avatar name="Ayşe Yılmaz" size="lg" />
<acun:avatar name="Ayşe Yılmaz" size="xl" />
</div>Loading overlay
Covers an area with a semi-transparent layer while an operation runs and blocks clicks on it. It is bound to a Livewire action or an Alpine expression.
<div class="relative rounded-sm border border-gray-200 p-6 dark:border-zinc-700" x-data="{ locked: false }">
<p class="text-sm text-gray-600 dark:text-zinc-400">This area is locked while the report is being prepared.</p>
<acun:button class="mt-4" size="sm" x-on:click="locked = true; setTimeout(() => locked = false, 2000)">Prepare report</acun:button>
<acun:loading-overlay show="locked" label="Preparing" />
</div>Drag and drop
Lets users reorder items by dragging and dropping them. It uses the Alpine Sort plugin that ships with Livewire 4; if a handler is given, the new order is sent to the server.
<acun:sortable>
<acun:sortable.item key="1">Electronics</acun:sortable.item>
<acun:sortable.item key="2">Home and living</acun:sortable.item>
<acun:sortable.item key="3">Clothing</acun:sortable.item>
<acun:sortable.item key="4">Beauty</acun:sortable.item>
</acun:sortable>Media player
Plays video and audio files with a single control bar that matches the theme, instead of the built-in controls that differ from browser to browser: play/pause, seek bar, time, volume, speed, and full screen. If JavaScript does not run, the browser's own controls appear and the file can still be played.
<acun:media-player
src="../assets/media/sample-video.mp4"
poster="../assets/media/sample-poster.jpg"
title="Intro video"
/>Scroll area
Scrolls long or wide content inside a bounded box. The scrollbar is drawn thin and adapts to the light/dark theme; no separate JavaScript library is needed. Optionally, the edges that still have hidden content behind them fade out softly.
<acun:scroll-area max-height="15rem" label="Recently sold products" class="rounded-sm border border-gray-200 dark:border-zinc-700">
<ul class="divide-y divide-gray-100 dark:divide-zinc-800">
@foreach (['Wireless headphones', 'Mechanical keyboard', 'USB-C charger', '27-inch monitor', 'Ergonomic chair', 'Laptop stand', 'Webcam', 'External SSD 1 TB', 'Bluetooth speaker', 'Smartwatch'] as $product)
<li class="flex items-center justify-between gap-4 px-4 py-2.5 text-sm">
<span class="text-gray-900 dark:text-zinc-100">{{ $product }}</span>
<span class="text-xs text-gray-500 dark:text-zinc-400">September {{ 20 - $loop->index }}</span>
</li>
@endforeach
</ul>
</acun:scroll-area>Star rating
Lets users give a rating with stars, or shows an existing rating. It is used with name in a plain form, with wire:model in Livewire and with x-model in Alpine; in read-only mode it only displays the rating.
Divider
Separates content blocks with a horizontal line. Text placed inside it is shown in the middle, at the start or at the end of the line.
<p class="text-sm text-gray-600 dark:text-zinc-400">The customer details were updated.</p>
<acun:divider class="my-4" />
<p class="text-sm text-gray-600 dark:text-zinc-400">Next invoice: October 14, 2026.</p>Timeline
Shows the history of a record in chronological order along a vertical line. Suited to order history, support ticket workflows or activity logs.
<acun:timeline>
<acun:timeline.item title="Delivered" time="12.09.2026 14:32">Package handed to the recipient at the door.</acun:timeline.item>
<acun:timeline.item title="Shipped" time="11.09.2026 09:00">Package left the Kadıköy warehouse.</acun:timeline.item>
<acun:timeline.item title="Order placed" time="10.09.2026 16:47" />
</acun:timeline>Tour
Walks the user through the important parts of the page step by step. At each step one element is highlighted, the rest of the screen dims, and a small popover opens next to the element with a title, a description, a step counter, and Back / Next step buttons. It suits introducing the panel on first sign-in or showing off a new feature.
<acun:tour name="order-tour" :steps="[
['target' => '#order-search', 'title' => 'Order search', 'text' => 'Find orders by number, customer name, or phone number.'],
['target' => '#order-add', 'title' => 'New order', 'text' => 'Record an order that came in by phone here.'],
['target' => '#order-summary', 'title' => 'Monthly summary', 'text' => 'Follow the shipments and pending returns for this month here.', 'placement' => 'top'],
]">
<acun:button variant="white" x-on:click="start()">Start the tour</acun:button>
</acun:tour>
<div class="mt-6 space-y-4">
<div class="flex flex-wrap items-center gap-3">
<div id="order-search" class="w-64"><acun:input name="search" placeholder="Search orders…" /></div>
<acun:button id="order-add">New order</acun:button>
</div>
<div id="order-summary" class="grid grid-cols-2 gap-3">
<acun:stat-card label="Shipped this month" value="148" />
<acun:stat-card label="Pending returns" value="23" />
</div>
</div>Tree view
Shows nested data such as category › subcategory › product group as collapsible branches. The whole structure is passed as a single items array.
<acun:tree :items="[
['label' => 'Electronics', 'children' => [
['label' => 'Computers', 'children' => [['label' => 'Laptops'], ['label' => 'Desktops']]],
['label' => 'Phones', 'children' => [['label' => 'Smartphones']]],
]],
['label' => 'Clothing', 'children' => [['label' => 'Women']]],
]" />Miscellaneous
Small helper components: acun:copy-button copies a text to the clipboard with one click, and acun:kbd shows keyboard keys and shortcuts within text, styled as keys.
<div class="flex flex-wrap items-center gap-3">
<span class="font-mono text-sm text-gray-900 dark:text-zinc-100">ORD-2026-004817</span>
<acun:copy-button text="ORD-2026-004817" size="sm" />
<acun:copy-button text="ORD-2026-004817" variant="soft" size="sm" label="Copy order number" />
</div>Skeleton
A gray, softly pulsing placeholder that stands in for content while it loads. By imitating the shape of the real content, it keeps the page from jumping once loading finishes.
<div class="flex items-center gap-4">
<acun:skeleton class="h-16 w-24" />
<acun:skeleton variant="circle" class="size-12" />
<div class="flex-1 space-y-2">
<acun:skeleton variant="text" />
<acun:skeleton variant="text" class="w-2/3" />
</div>
</div>Empty state
A box shown in place of the table when a list is empty or a search returns no results. It tells users why they see nothing and, where possible, suggests the next step.
<acun:empty-state title="No orders yet" description="There are no orders recorded for this store this month." />Pill action
An action button with a colored round badge and a label. It is used on mobile screens to offer a few quick actions side by side, at equal width.
<div class="flex flex-wrap">
<acun:pill-action label="Approve" variant="success"><acun:icon name="check" size="3.5" /></acun:pill-action>
<acun:pill-action label="Hold" variant="warning"><acun:icon name="exclamation-triangle" size="3.5" /></acun:pill-action>
<acun:pill-action label="Address"><acun:icon name="map-pin" size="3.5" /></acun:pill-action>
<acun:pill-action label="Cancel" variant="danger"><acun:icon name="x-mark" size="3.5" /></acun:pill-action>
</div>Text input
A labeled text input. The field name and id are derived from the wire:model value, and validation errors from $errors are shown automatically; it offers a floating label and a show/hide password option.
<div class="space-y-4">
<acun:input wire:model="product_name" label="Product name" placeholder="E.g. Wireless headphones" />
<acun:input name="custom_code" label="Custom code" value="SKU-01" />
</div>Input group
Puts a fixed add-on to the left or right of a text field: a country code, currency, unit, domain name or icon. The label, hint and validation error work the same as in acun:input.
<div class="space-y-4">
<acun:input-group name="phone" label="Phone" prefix="+90" placeholder="5xx xxx xx xx" />
<acun:input-group name="price" label="Product price" suffix="₺" placeholder="0.00" inputmode="decimal" />
<acun:input-group name="site" label="Website" prefix="https://" suffix=".com" />
</div>Search form
A search box: a magnifying glass icon, a clear button that appears as you type, a keyboard shortcut and an optional attached Search button. Used as a GET form that reloads the page or as a live search with Livewire.
Option cards
Turns a radio button or checkbox into a clickable card with a title, a description and an icon. Suited to a small number of options that need explaining.
<div class="grid gap-3 md:grid-cols-3">
<acun:option-card name="billing_period" value="monthly" title="Monthly" description="Renews every month" />
<acun:option-card name="billing_period" value="yearly" title="Yearly" description="Two months free" checked />
<acun:option-card name="billing_period" value="lifetime" title="Lifetime" description="One-time payment" />
</div>File upload
Single and multiple file upload: a drag-and-drop zone, a file list with previews, per-file progress, cancel and retry, saved files for edit forms, sorting, and avatar and compact looks. It works both in a Livewire component and in a classic form without Livewire.
<acun:file-upload model="id_document" label="Identity document" accept=".pdf,image/*" hint="Front of the ID card · PDF or image" />Date picker
Shows the browser's own date and time picker in the panel style. Because it is built on acun:input, the label, hint and error display are the same. To pick a date range, the flatpickr-based uiDateRangePicker is used.
<acun:date-picker name="delivery_date" label="Delivery date" value="2026-10-07" hint="The day emailed to the customer." />Select
A labeled select box. The options come from the options array or from the slot; label, hint and error behavior are the same as acun:input.
<acun:select wire:model="status" label="Status" :options="['1' => 'Active', '0' => 'Inactive']" placeholder="Select…" />Combobox
A searchable select for long lists: single or multiple selection, removable chips, options with descriptions and groups, search through a Livewire method or a JSON URL, and adding values that are not in the list. Search ignores letter case and Turkish letters; the component is fully usable with a keyboard and screen readers.
<acun:combobox name="branch_id" label="Branch" value="2" :options="[
1 => 'Kadıköy Branch', 2 => 'Beşiktaş Branch', 3 => 'Üsküdar Branch',
4 => 'Çankaya Branch', 5 => 'Karşıyaka Branch', 6 => 'Nilüfer Branch', 7 => 'Ataşehir Branch',
8 => 'Şişli Branch', 9 => 'Çamlıca Branch', 10 => 'Iğdır Branch',
]" />Tag input
acun:tag-input provides free-form or list-based tag entry. Suggestions are matched case-insensitively, following Turkish letter rules. To let users pick one or more values from a long list, use acun:combobox on the Combobox page.
Slider
A slider for picking a value from a numeric range. When a label is given, the selected value is shown live, with its unit, to the right of the label.
Switch
A switch that turns a setting on and off with a single click. Under the hood it is a checkbox with role="switch"; used for on/off settings that take effect immediately.
<acun:switch name="sw_notifications" label="Order notifications" checked />
<acun:switch name="sw_newsletter">Email newsletter</acun:switch>Checkbox and radio
A checkbox (acun:checkbox) and a radio button (acun:radio) in the brand color. The label is drawn inside the component; since the id is derived from the field name and value, the label is always linked to the box.
<div class="flex flex-col gap-3">
<acun:checkbox name="email_notification" label="Email notification" checked />
<acun:checkbox name="sms_notification" label="SMS notification" />
</div>Textarea
A multi-line text field. It is for long entries such as notes, addresses and descriptions; label, hint, floating label and error behavior are the same as acun:input.
<acun:textarea wire:model="note" label="Note" rows="3" placeholder="Note for the warehouse team" />Verification code
Shows a separate box for each digit of a one-time code sent by SMS or email. The boxes accept digits only; a pasted code is spread across the boxes automatically.
Form validation
Form fields show Laravel validation errors from $errors on their own: if there is an error for the field name, the border turns red and the message appears below the field. No extra code is needed.
<form class="grid gap-4 md:grid-cols-2">
<acun:input wire:model="name" label="Customer name" required />
<acun:input-group wire:model="phone" label="Phone" prefix="+90" value="532 11" />
<acun:select wire:model="group" label="Customer group" :options="['1' => 'Individual']" placeholder="Select…" />
<acun:input-group wire:model="creditLimit" label="Credit limit" suffix="₺" value="0" />
<div class="md:col-span-2"><acun:button type="submit">Save</acun:button></div>
</form>Form wizard
Splits a long form into steps. The steps are listed at the top; completed steps are shown with a check mark and can be clicked to go back, while later steps can only be reached with the buttons.
<acun:stepper :steps="['project' => 'Project', 'team' => 'Team', 'confirm' => 'Confirmation']">
<acun:stepper.step name="project" class="grid gap-4 md:grid-cols-2">
<acun:input name="t_name" label="Project name" />
<acun:select name="t_plan" label="Plan" :options="['1' => 'Starter', '2' => 'Professional']" />
</acun:stepper.step>
<acun:stepper.step name="team" class="grid gap-4 md:grid-cols-2">
<acun:input name="t_people" label="Number of people" type="number" />
<acun:input name="t_phone" label="Phone" />
</acun:stepper.step>
<acun:stepper.step name="confirm">
<acun:alert variant="success">The details are ready. Press Save to create the project.</acun:alert>
</acun:stepper.step>
<div class="mt-6 flex justify-between">
<acun:button variant="white" x-on:click="previous()" x-bind:disabled="isFirst">Back</acun:button>
<acun:button x-show="! isLast" x-on:click="next()">Next</acun:button>
<acun:button x-show="isLast" x-cloak variant="success" x-on:click="$dispatch('toast', { type: 'success', message: 'Project saved.' })">Save</acun:button>
</div>
</acun:stepper>Vertical form
The standard form layout, with labels above the fields. There is no separate component; the fields are arranged with Tailwind spacing and grid classes.
<form class="space-y-4">
<acun:input name="contact_name" label="Full name" />
<acun:input name="contact_email" type="email" label="Email" />
<acun:select name="contact_subject" label="Subject" :options="['order' => 'Order', 'billing' => 'Billing', 'other' => 'Other']" placeholder="Select…" />
<acun:textarea name="contact_message" label="Message" rows="3" />
<acun:button type="submit" class="w-full">Send</acun:button>
</form>Horizontal form
A layout with labels on the left and fields on the right. On settings and detail screens it makes the labels easy to scan in a single column; on small screens the labels still drop above the fields.
<acun:card title="Product details">
<form class="space-y-4">
<div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
<label for="product_name" class="text-sm font-medium text-gray-700 dark:text-zinc-300">Product name</label>
<acun:input name="product_name" value="Wireless headphones" />
</div>
<div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
<label for="product_sku" class="text-sm font-medium text-gray-700 dark:text-zinc-300">SKU</label>
<acun:input name="product_sku" value="WHP-02" />
</div>
<div class="grid items-center gap-2 sm:grid-cols-[10rem_1fr]">
<label for="product_category" class="text-sm font-medium text-gray-700 dark:text-zinc-300">Category</label>
<acun:select name="product_category" :options="['1' => 'Electronics', '2' => 'Accessories']" />
</div>
<div class="grid gap-2 sm:grid-cols-[10rem_1fr]">
<span></span>
<div class="flex gap-2"><acun:button type="submit">Save</acun:button><acun:button variant="white">Cancel</acun:button></div>
</div>
</form>
</acun:card>Sticky actions
In long forms, the bar with the Save and Cancel buttons stays visible while the page scrolls. It is built with Tailwind's sticky classes; no separate component is needed.
<div class="max-h-96 overflow-y-auto rounded-sm bg-white shadow-sm dark:bg-zinc-900">
<div class="sticky top-0 z-10 flex items-center justify-between border-b border-gray-200 bg-white/90 px-5 py-3 backdrop-blur dark:border-zinc-800 dark:bg-zinc-900/90">
<h3 class="text-sm font-semibold text-gray-900 dark:text-zinc-100">General settings</h3>
<div class="flex gap-2"><acun:button size="sm" variant="white">Cancel</acun:button><acun:button size="sm">Save</acun:button></div>
</div>
<div class="grid gap-4 p-5 md:grid-cols-2">
@foreach (['Company name', 'Short name', 'Province', 'District', 'Phone', 'Email', 'Website', 'Tax number', 'Contact person', 'Contact phone'] as $i => $label)
<acun:input name="field{{ $i }}" :label="$label" />
@endforeach
</div>
</div>Form guard
A form with unsaved-changes protection. With dirty-check on, leaving the page after fields have changed asks for confirmation: the browser's own warning when leaving through the browser, and the acun:form-guard-dialog dialog on wire:navigate transitions.
<acun:form dirty-check class="space-y-4"
x-data="{ changed: false }"
x-on:input="setTimeout(() => changed = AcunUI.pro.formGuard.dirty)"
x-on:change="setTimeout(() => changed = AcunUI.pro.formGuard.dirty)">
<acun:input name="customer_name" label="Customer name" value="Ayşe Yılmaz" />
<acun:checkbox name="active" label="Active customer" checked />
<p class="text-sm text-gray-500 dark:text-zinc-400" x-text="changed ? 'There are unsaved changes' : 'No changes'"></p>
</acun:form>Table
A card-style, horizontally scrollable container and ready-made table styles for data tables. You write your own table tag; the ui-table class gives the look of headers, cells, rows and the totals row.
<acun:table>
<table class="ui-table">
<thead>
<tr><th>Customer</th><th>City</th><th>Last order</th></tr>
</thead>
<tbody>
<tr><td>Ayşe Yılmaz</td><td>Istanbul</td><td>Sep 12, 2026</td></tr>
<tr><td>Mehmet Kaya</td><td>Ankara</td><td>Sep 10, 2026</td></tr>
<tr><td>Zeynep Arslan</td><td>Izmir</td><td>Sep 8, 2026</td></tr>
</tbody>
</table>
</acun:table>DataTable engine
A ready-made Livewire table whose columns, filters and actions are defined in a PHP class. Search, filters, sorting, selection and pagination run on the server; only the visible page is sent to the browser. Detailed guide: DataTable.
use Acun\Ui\DataTable\DataTable;
final class OrdersTable extends DataTable
{
public string $title = 'Orders';
protected function query(): Builder
{
return Order::query()->visibleTo(auth()->user())->select(['id', 'number', 'customer_name', 'is_paid']);
}
protected function columns(): array
{
return [
Column::make('Order no.', 'number')->searchable()->sortable(),
Column::make('Customer', 'customer_name')->searchable(SearchMode::Contains)->sortable(),
Column::make('Paid', 'is_paid')->boolean(),
];
}
protected function authorizeTable(): void
{
$this->authorize('viewAny', Order::class);
}
}Listing page
A complete list page of the panel: toolbar, filter button, bulk selection bar, sortable table and pagination. The look comes from Acun UI components, the behavior (search, sorting, selection, pagination) from the WithListing trait.
<div class="space-y-4">
<acun:list-toolbar>
<acun:search name="list_search" placeholder="Product name or SKU" />
<acun:slot:actions>
<acun:filter-button drawer="catalog-listing-filters" :count="2" />
<acun:button>New Product</acun:button>
</acun:slot:actions>
</acun:list-toolbar>
<acun:selection-bar :count="2" clear-action="clearSelection">
<acun:button variant="white" size="sm">Activate</acun:button>
<acun:button variant="danger" size="sm">Delete</acun:button>
</acun:selection-bar>
<acun:table>
<table class="ui-table">
<thead>
<tr>
<th class="w-10"><acun:checkbox id="list-all" aria-label="Select all" /></th>
<acun:sortable-th field="name" sort-field="name" sort-direction="asc">Product Name</acun:sortable-th>
<acun:sortable-th field="sku" sort-field="name" sort-direction="asc">SKU</acun:sortable-th>
<th class="text-center">Stock</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr><td><acun:checkbox id="list-1" checked /></td><td class="font-medium text-gray-900 dark:text-zinc-100">Wireless headphones</td><td>WH-01</td><td class="text-center tabular-nums">312</td><td><acun:badge variant="success">Active</acun:badge></td></tr>
<tr><td><acun:checkbox id="list-2" checked /></td><td class="font-medium text-gray-900 dark:text-zinc-100">Mechanical keyboard</td><td>MK-04</td><td class="text-center tabular-nums">148</td><td><acun:badge variant="success">Active</acun:badge></td></tr>
<tr><td><acun:checkbox id="list-3" /></td><td class="font-medium text-gray-900 dark:text-zinc-100">USB-C charger</td><td>UC-02</td><td class="text-center tabular-nums">96</td><td><acun:badge variant="danger">Inactive</acun:badge></td></tr>
</tbody>
</table>
</acun:table>
{{ $examplePaginator->links('acun-ui::components.ui.pagination') }}
</div>
<acun:drawer name="catalog-listing-filters" docked title="Filters" compact>
<acun:select name="list_status" :options="['' => 'All Statuses', '1' => 'Active', '0' => 'Inactive']" />
</acun:drawer>Charts
A chart drawn with ApexCharts. The options array is the PHP equivalent of the ApexCharts configuration; in the dark theme the axis, grid and tooltip colors adapt automatically, and the chart is repainted when the theme changes.
<acun:chart :options="[
'chart' => ['type' => 'area'],
'series' => [['name' => 'Orders', 'data' => [2810, 2944, 3012, 2890, 3240, 3106]]],
'xaxis' => ['categories' => ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']],
'colors' => ['primary'],
'stroke' => ['curve' => 'smooth', 'width' => 3],
'fill' => ['type' => 'gradient', 'gradient' => ['opacityFrom' => 0.4, 'opacityTo' => 0.05]],
'dataLabels' => ['enabled' => false],
]" />Map
A map built with Leaflet and OpenStreetMap. It can show a list of markers and write the clicked location to a Livewire property.