Patterns

Layouts

Higher-level building blocks for pages: headers, paginated grids, and complete application shells.

Card grid

Responsive grid with built-in empty, loading, and load-more states.

Aurora

Project #1

Basalt

Project #2

Cinder

Project #3

Delta

Project #4

Theme-aware logo

New

LandingNavbar, LandingFooter, and DashboardShell take an optional appLogoDark. Both images render and the .dark class picks one, so the logo follows the theme toggle with no flash. Toggle the theme and watch the footer logo.

Light themeapp-logo="/logo.svg"

Dark themeapp-logo-dark="/logo-dark.svg"

Application shells

Complete layouts that own navigation, theming, and responsive behavior.

You are here

Dashboard shell

Collapsible sidebar, sticky blurred topbar, and grid background. You are looking at it right now.

Landing & blog

Navbar with reading progress, content layout, footer, and a full Nuxt Content blog.

Error page

Branded 404 and 500 pages with a recovery action and toolbar slots.