Skip to content
UI Brok

Loading…

No results

Blade, Tailwind, Alpine & Livewire-ready

Own your Laravel UI code.

A single Artisan command writes real, readable Blade and CSS into your project — accessible components and blocks you own and edit freely, not a black-box package dependency, with diff-aware updates when you want them.

Get started Browse components
composer require jml/brok && php artisan ui:install
Components
346
Blocks
131
Pages
24

431 block variants and 65 page variants — open core is MIT.

You own the code

ui:add writes real Blade + CSS tokens into your repo. No runtime dependency on Brok — edit, restructure and ship on your terms.

Updates stay diff-aware

Owning the source doesn't mean freezing it. ui:diff and ui:update 3-way merge upstream fixes into your edits.

Accessible & themeable

WCAG-minded defaults, semantic design tokens, RTL-ready. Re-skin everything by editing tokens — never the markup.

Deciding between copy-in ownership and a runtime package kit? Read the honest comparison.

Builder Try it

Compose blocks into a page in the browser, preview live, and copy the install commands.

Theme Generator Try it

Re-skin every token live, audit WCAG contrast, and export the CSS to drop into your app.

Start with the essentials

A curated core of the primitives every app needs — so you start here, not cold in front of all 346.

Browse all 346 components →

Button

Trigger an action or event, with variants, sizes and states.

Input

Text input with sizes plus invalid and disabled states.

Native Select

Native select control with a custom, RTL-safe chevron.

Card

Content container with header, content and footer parts.

Dialog

Modal dialog with focus trap, Escape-to-close and focus restoration.

Table

Responsive data table with header, body, row and cell parts.

Tabs

Tabbed sections with roving tabindex and RTL-aware arrow-key navigation.

Badge

Compact status descriptor with semantic variants.

Calendar

A localized month grid with full keyboard navigation and an ISO hidden value.

Command

Filterable, keyboard-navigable command palette list.

Dropdown Menu

Menu with keyboard navigation, click-outside dismissal and Escape handling.

Chart

A token-themed chart wrapper around ApexCharts (area, line, bar, pie, radar, radial & mixed) with themed grid, legend and tooltip.

Composed blocks

Full sections built from the primitives — 131 blocks (431 variants) across marketing, app and commerce.

Browse all 131 blocks →

Form Wizard

A multi-step form wizard (Account → Profile → Review) with a reactive progress indicator, Back/Continue navigation and a final submit.

Hero

Marketing hero sections with a range of animated backdrops.

Closing / CTA

Closing call-to-action sections with expressive backgrounds.

Team

Team sections — a card grid, a split-lead layout, list rows, a photo grid, a minimal grid and a carousel.

Pricing

Pricing sections — from a simple three-tier table to a billing-period toggle, gradient and elevated cards, tinted and horizontal layouts, and a tabbed switcher.

Paywall

Conversion paywalls — inline plan upgrade, gated article content and a focused subscription card with billing toggle.

Ready to own your Laravel UI?

One Artisan command writes real, editable Blade into your app. No runtime lock-in, no black box.

Get started Browse blocks