Browse catalog

Style Guide

Open

A living design-token reference — colour swatches, type scale, radius, spacing, elevation, motion and numeric tokens plus WCAG contrast grades, all driven by real semantic tokens so the guide re-themes with your app.

Responsive Dark mode RTL Localized SEO

Preview

Viewport

Theme Dark RTL Admin surface Open full screen

Installation

terminal

php artisan ui:add blocks/style-guide

Installs these dependencies automatically:

card badge separator color-token color-palette color-contrast typography-token font-family-token font-weight-token spacing-token radius-token elevation-token duration-token number-token order-token

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.style-guide />

Built from primitives

Composes <x-ui.*> Semantic tokens Re-themeable RTL-ready

This block composes installed <x-ui.*> primitives and semantic design tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by editing CSS variables; flip the preview to RTL to confirm it mirrors.

Source

The exact, editable file ui:add writes into your app. The preview above renders this same source — there are no preview-only blocks.

Changelog

Style Guide ships as a core open block. See the site changelog for the full release history.