# LaralCN-UI > A shadcn-style, copy-and-own component system for Laravel and Blade. There is no runtime component library: `safi/laralcn-ui` is a CLI that copies plain `.blade.php` files into your own `resources/views/components/ui/` directory, where you own and edit them. Pure Blade + Tailwind v4, Alpine.js only where interactivity needs it. ## Install ```bash composer require --dev safi/laralcn-ui php artisan ui:init # injects the theme tokens, creates the components dir php artisan ui:add button # copies one component (and its dependencies) ``` ## Conventions - Every component is an anonymous Blade component under `resources/views/components/ui/`, used as ``. Multi-file components are namespaced directories: ``. - Variants and sizes are always the props `variant` and `size`, resolved with an inline `match()` in the file itself. No `cva`, no shared helper. - Classes you pass through `class="..."` win over the component's own classes: each component funnels base + variant + your `class` through `TailwindMerge::merge(...)`. - The only external symbol a component file uses is `\TailwindMerge\Laravel\Facades\TailwindMerge`. Each file is standalone, so copy-pasting one from this site works with no other setup. - Colors come from theme tokens (`bg-primary`, `text-muted-foreground`, `--radius`), never hardcoded values. Tailwind v4 CSS-first only, there is no `tailwind.config.js`. ## Guides - [Getting started](https://laralcn-ui.abdulkadersafi.com/getting-started): install the CLI, add your first component. - [Theming](https://laralcn-ui.abdulkadersafi.com/theming.md): the CSS variables every component reads, light and dark. - [Plain Blade](https://laralcn-ui.abdulkadersafi.com/plain-blade): using the components without the CLI. ## Components - [accordion](https://laralcn-ui.abdulkadersafi.com/components/accordion.md): Collapsible disclosure list (single or multiple open). - [alert](https://laralcn-ui.abdulkadersafi.com/components/alert.md): Callout for short, important messages. - [alert-dialog](https://laralcn-ui.abdulkadersafi.com/components/alert-dialog.md): Modal that interrupts the user and waits for a deliberate response. - [aspect-ratio](https://laralcn-ui.abdulkadersafi.com/components/aspect-ratio.md): Holds its children to a fixed width-to-height ratio. - [avatar](https://laralcn-ui.abdulkadersafi.com/components/avatar.md): User image with text fallback. - [badge](https://laralcn-ui.abdulkadersafi.com/components/badge.md): Small status / label pill with variants. - [breadcrumb](https://laralcn-ui.abdulkadersafi.com/components/breadcrumb.md): Shows the path to the current resource as a hierarchy of links. - [button](https://laralcn-ui.abdulkadersafi.com/components/button.md): Clickable button with variant and size options. - [card](https://laralcn-ui.abdulkadersafi.com/components/card.md): Container with header, content, and footer slots. - [carousel](https://laralcn-ui.abdulkadersafi.com/components/carousel.md): Horizontally scrolling slides with snap points and arrow controls. - [checkbox](https://laralcn-ui.abdulkadersafi.com/components/checkbox.md): Native checkbox styled to the theme. - [collapsible](https://laralcn-ui.abdulkadersafi.com/components/collapsible.md): An interactive panel that expands and collapses its content. - [dialog](https://laralcn-ui.abdulkadersafi.com/components/dialog.md): Modal dialog with focus trap, backdrop, and Esc-to-close. - [dropdown-menu](https://laralcn-ui.abdulkadersafi.com/components/dropdown-menu.md): Click-triggered menu with outside-click and Esc to close. - [hover-card](https://laralcn-ui.abdulkadersafi.com/components/hover-card.md): Preview card shown when a trigger is hovered or focused. - [input](https://laralcn-ui.abdulkadersafi.com/components/input.md): Form text input. - [label](https://laralcn-ui.abdulkadersafi.com/components/label.md): Accessible form label. - [pagination](https://laralcn-ui.abdulkadersafi.com/components/pagination.md): Page navigation with previous, next, numbered links and an ellipsis. - [progress](https://laralcn-ui.abdulkadersafi.com/components/progress.md): Progress bar showing completion of a task. - [radio](https://laralcn-ui.abdulkadersafi.com/components/radio.md): Native radio input styled to the theme. - [scroll-area](https://laralcn-ui.abdulkadersafi.com/components/scroll-area.md): Scrollable region with a styled, themed scrollbar. - [select](https://laralcn-ui.abdulkadersafi.com/components/select.md): Native select styled to the theme. - [separator](https://laralcn-ui.abdulkadersafi.com/components/separator.md): Visual or semantic divider. - [sheet](https://laralcn-ui.abdulkadersafi.com/components/sheet.md): Panel that slides in from an edge of the screen. - [sidebar](https://laralcn-ui.abdulkadersafi.com/components/sidebar.md): Composable, collapsible application sidebar with mobile off-canvas, icon mode, and keyboard toggle. - [skeleton](https://laralcn-ui.abdulkadersafi.com/components/skeleton.md): Placeholder shown while content loads. - [slider](https://laralcn-ui.abdulkadersafi.com/components/slider.md): Range slider built on a native input, submits with the form. - [switch](https://laralcn-ui.abdulkadersafi.com/components/switch.md): Toggle switch built on a native checkbox, submits with the form. - [table](https://laralcn-ui.abdulkadersafi.com/components/table.md): Responsive data table wrapper. - [tabs](https://laralcn-ui.abdulkadersafi.com/components/tabs.md): Tabbed interface; panels supplied via named slots. - [textarea](https://laralcn-ui.abdulkadersafi.com/components/textarea.md): Multi-line text input. - [toast](https://laralcn-ui.abdulkadersafi.com/components/toast.md): Toast region; dispatch a `toast` window event to show one. - [toggle](https://laralcn-ui.abdulkadersafi.com/components/toggle.md): Two-state button built on a native checkbox, submits with the form. - [toggle-group](https://laralcn-ui.abdulkadersafi.com/components/toggle-group.md): A joined set of toggles, single or multiple selection. - [tooltip](https://laralcn-ui.abdulkadersafi.com/components/tooltip.md): Hover/focus tooltip with side positioning. ## Blocks Full sections assembled from the components above, installed with `php artisan ui:add-block `. - [footer-01](https://laralcn-ui.abdulkadersafi.com/blocks/footer-01.md): Newsletter footer: signup form beside two link columns and a social 'Follow Us' list, with a legal bar underneath. - [footer-02](https://laralcn-ui.abdulkadersafi.com/blocks/footer-02.md): Wide sitemap footer: newsletter row on top, logo beside five link columns, then a legal bar with social icons. - [footer-03](https://laralcn-ui.abdulkadersafi.com/blocks/footer-03.md): Boxed footer: logo, three link columns and a subscribe form inside a bordered card, with the legal bar outside it. - [footer-04](https://laralcn-ui.abdulkadersafi.com/blocks/footer-04.md): Call-to-action footer: headline, blurb and two buttons on the left, two link columns and social icons on the right, inside a bordered card. - [footer-05](https://laralcn-ui.abdulkadersafi.com/blocks/footer-05.md): Large sitemap footer: headline with two buttons, six link columns, and a logo row with an overlapping avatar stack. - [footer-06](https://laralcn-ui.abdulkadersafi.com/blocks/footer-06.md): Contact footer: address, phone and email beside two link columns, closing on an oversized company wordmark. - [footer-07](https://laralcn-ui.abdulkadersafi.com/blocks/footer-07.md): Newsletter footer with an oversized company wordmark: signup form, two link columns and a social list above the brand statement. - [footer-08](https://laralcn-ui.abdulkadersafi.com/blocks/footer-08.md): Minimal footer: logo with a single row of links, a subscribe form, and an oversized company wordmark above the legal bar. - [navbar-01](https://laralcn-ui.abdulkadersafi.com/blocks/navbar-01.md): Classic top navbar with centered links, a dropdown, and dual call-to-action buttons. Collapses into a slide-in sheet on mobile. - [navbar-02](https://laralcn-ui.abdulkadersafi.com/blocks/navbar-02.md): Minimal top navbar with centered links, a dropdown, and a single primary action. Collapses into a slide-in sheet on mobile. - [navbar-03](https://laralcn-ui.abdulkadersafi.com/blocks/navbar-03.md): Navbar with a full-width mega menu: two grouped link columns plus a featured-articles panel. Mobile menu uses an expandable sheet. - [navbar-04](https://laralcn-ui.abdulkadersafi.com/blocks/navbar-04.md): Navbar with a mega menu laid out as a two-column grid of icon, title, and description items. Mobile menu uses an expandable sheet. - [navbar-05](https://laralcn-ui.abdulkadersafi.com/blocks/navbar-05.md): Compact navbar with a two-group mega menu and a footer call-to-action row inside the panel. Mobile menu uses an expandable sheet. - [navbar-06](https://laralcn-ui.abdulkadersafi.com/blocks/navbar-06.md): Floating pill navbar that detaches from the top edge, with centered links, a dropdown, and dual actions. Collapses into a sheet on mobile. - [sidebar-01](https://laralcn-ui.abdulkadersafi.com/blocks/sidebar-01.md): Collapsible sidebar shell with workspace switcher, nav groups, and user footer. Ctrl/Cmd-B toggles it. ## Optional - [llms-full.txt](https://laralcn-ui.abdulkadersafi.com/llms-full.txt): every page above concatenated into one file, source included.