EN
Getting started

Folder structure

This page shows what lives in which file of the theme, and which file to open for a given task.

The theme's folders

Both the full version and the starter kit are standard Laravel 13 applications. The tree below shows the full version; the starter kit has the same layout but without the sample pages and data.

full-version/
├── app/
│   ├── Http/Controllers/     Controllers of the Blade pages
│   ├── Livewire/             Livewire pages and components
│   └── Support/              Helper classes (JsonDatabase: sample data)
├── config/acun-ui.php        Acun UI settings
├── lang/                     The application's translations (tr.json, en.json)
├── packages/acun-ui/         The Acun UI packages (below)
├── public/build/             Compiled CSS and JavaScript
├── resources/
│   ├── css/acun-ui.css       Tailwind, Acun UI and the @source lines
│   ├── js/acun-ui.js         Acun UI's JavaScript
│   ├── js/app.js             The application's own JavaScript
│   ├── menu/main.json        The admin panel's menu
│   ├── data/                 Sample data (JSON)
│   └── views/                Blade views (below)
├── routes/web.php            Admin panel routes (/admin)
├── routes/front.php          Storefront routes
├── composer.json             Registers the packages/acun-ui folder as a local repository
├── package.json              Build tools (Vite, Tailwind)
└── vite.config.js            Vite entries, fonts, PRO alias

Views

resources/views/
├── layouts/
│   ├── admin/
│   │   ├── vertical.blade.php     Panel layout with a side menu
│   │   ├── horizontal.blade.php   Panel layout with a top menu
│   │   ├── blank.blade.php        Page without the panel: sign-in, registration, errors
│   │   └── sections/              navbar, sidebar, footer: top bar, menu, page footer
│   └── front/
│       ├── theme-1.blade.php …    The storefront's three themes (theme-1, theme-2, theme-3)
│       └── sections/              classic, modern, default under navbar/ and footer/
├── admin/                         Admin panel pages
├── front/                         Storefront pages: home, products, categories, cart, checkout
├── livewire/                      Views of the Livewire components
├── components/                    The application's own Blade components (logo, sign-in screen…)
└── partials/                      Small pieces (favicon)

A panel page goes under resources/views/admin/ and uses the layout with @extends('layouts.admin.vertical'). Livewire pages use the same layout with #[Layout('layouts.admin.vertical')]. Details: Your first page.

Which file to open?

What you want to do File
Add a page to the menu resources/menu/main.json (Menu)
Create a new panel page resources/views/admin/ and routes/web.php
Change the logo, top bar, page footer resources/views/layouts/admin/sections/
Change the colors, default appearance resources/css/acun-ui.css and config/acun-ui.php (Customization)
Translate interface texts lang/tr.json, lang/en.json (Languages and translation)
Override a component's view A copy with the same name under resources/views/components/ui/

The Acun UI packages

Acun UI consists of three packages, shipped in the packages/acun-ui/ folder. composer install and npm install link these folders under vendor/acunsoft/ and node_modules/@acunsoft/. You don't edit the package files; an update replaces the folder as a whole. Look here when you want to see a component's props or source.

Look and behavior come from @acunsoft/acun-ui-core; the components' markup and server side come from acunsoft/acun-ui-free. PRO classes are in the same Acun\Ui\… namespace as the free package; your code doesn't need to tell which package a class comes from.

@acunsoft/acun-ui-core (acun-ui-core/)

The theme layer (CSS) and the core JavaScript. It doesn't depend on Laravel.

node_modules/@acunsoft/acun-ui-core/
├── css/panel.css        Theme (@theme), layout and menu: @import '@acunsoft/acun-ui-core'
├── js/index.js          Entry point: import '@acunsoft/acun-ui-core'; sets up window.AcunUI
├── js/core/             Runtime, event names, reading the settings, loading heavy components, Livewire integration
├── js/behavior/         Scroll lock, focus trapping and restoring, layer manager, Livewire fixes
├── js/components/       Alpine components of acun:drawer and acun:modal (acunDrawer, acunModal)
├── js/appearance/       Theme, primary color and menu; Alpine stores (sidebar, navbar, customizer, brand, appearance)
├── js/boot.js           The theme file: applies the appearance before the first paint
└── vite/index.js        vite.config.js helpers (woff2Only)

acunsoft/acun-ui-free (acun-ui-free/)

The free Blade components (acun:*) and their server side.

vendor/acunsoft/acun-ui-free/
├── config/acun-ui.php                   Layout, language, JavaScript URLs and DataTable defaults for PRO (publishable)
├── dist/acun-ui-boot.js, acun-ui.js     The theme file and the Vite-free shared JavaScript (@acunUiScripts)
├── lang/tr.json                         The package's Turkish translations
├── resources/icons/heroicons.php        Icon set of acun:icon
├── resources/views/components/ui/       acun:* components (with layout/ and nav/ subfolders)
├── routes/assets.php, locale.php        URL of the dist/ files (/acun-ui/{file}) and the language choice
└── src/
    ├── Http/                            AssetController (serves the dist/ files with a one-year cache), LocaleController, SetLocale
    ├── Livewire/Concerns/WithToasts.php $this->toast() shortcuts
    ├── Menu/Menu.php                    JSON menu reader (acun:menu)
    └── Support/                         Assets (@acunUiScripts), Fonts (@acunFonts), Layout (Layout::page), Toast (Toast::flash), Icon

acunsoft/acun-ui-pro (acun-ui-pro/, PRO)

PRO components, DataTable, form modal and search, with their own CSS and JavaScript.

vendor/acunsoft/acun-ui-pro/
├── dist/acun-ui-pro.js                  Vite-free PRO JavaScript (@acunUiScripts)
├── lang/tr.json                         The package's Turkish translations
├── resources/css/acun-ui-pro.css        DataTable and form modal styles
├── resources/js/index.js                Entry point: import '@acunsoft/acun-ui-pro' (Vite alias)
├── resources/js/panel/                  Form guard, chart, map, date range, lazyLibrary
├── resources/js/ui/                     Heavy components: combobox, file upload, DataTable, unsaved-changes manager
├── resources/js/form-modal.js           Form modal manager (initDirtyForms)
├── resources/views/components/ui/       PRO acun:* components (with the same names)
├── resources/views/components/data-table/  DataTable views
├── routes/assets.php, datatable.php     URL of acun-ui-pro.js; DataTable download and print routes
└── src/
    ├── DataTable/                       DataTable, Column, Filter, Action, BulkAction, export…
    ├── Form/                            InteractsWithFormModal, FormMode, FormActionState
    ├── Livewire/Concerns/WithListing.php
    ├── Search/                          Search: Normalizer, SearchField, drivers, searchColumn() migration macro
    └── Support/ComboboxOptions.php

Learn more

Acun UIDesigned for people.