UI System

Custom components showcase

65 reusable pieces I reach for in Laravel dashboards and landing pages: navigation shells, resilient form controls, feedback surfaces, and polished mockups that stay responsive.

Navigation, forms, feedback, motion, mockups

Light and dark ready

Accessibility-first

Systems

Tokens, rhythm, and responsive breakpoints baked into every component.

States

Hover, focus, success, and error states choreographed for clarity.

Dashboard shell

Flow & layout

Navbar + timeline

Adaptive

24 Routes handled

08 Guard rails

03 Active tabs

Setup

Base navbar + breadcrumbs

Now

Flow

Tabs + drawer + pagination

Form + feedback

Component

State

Priority

Live previews

Try the components in-app

Switch categories, flip validation states, and trigger feedback to see how the system holds up.

✓

Navigation

Breadcrumbs + tabs + pagination

Responsive

Home Components Navigation

Tabs & states

Elastic spacing, keyboard friendly, hover + active + focus baked in.

Hover Focus Active

Pagination

Timeline

Forms

Inputs with inline validation

ARIA-strong

Work email

Never shared. Validates on blur and submit.

Component focus

Pairs with the custom select enhancer on request.

Microcopy polish

Basic Confident Crafted

Feedback

Alerts, badges, and toasts

Motion-aware

Saved! Layout state persisted.

Validation failed. Check required fields.

Live Beta Updated

76%

Progress

States wired to events and error boundaries.

Framing

Browser & hero mockups

Brand-safe

Browser mock

Hero

Identity-first hero

Eye-line, CTA pair, and supporting meta ready to drop into Laravel views.

Code mock Light/Dark

<section class="card">
  <h3>Duro shell</h3>
  <p>Navbar, drawer, tabs, and timeline.</p>
</section>