Brok UI

Loading…

No results

Pro

Token

Open source

tokenui.dev-inspired design-token documentation chips — a base name → value token with click-to-copy, plus typed variants for colour, typography, dimension, motion and scalar tokens.

Source Open issues Report a bug

Version: v1.1.1
Stability: stable
License: MIT
Related: Token; Color Token; Typography Token; Font Family Token; Font Weight Token; Radius Token; Elevation Token; Duration Token; Number Token; Order Token

Spacing Token — Documents a single spacing-scale design token — a proportional width bar plus the token name, with the length value revealed in a tooltip on hover and click-to-copy.

space-1 space-2 space-3 space-4 space-6 space-8

Side

previews.components.spacing-token.default.blade.php Blade

<div class="flex flex-wrap items-center gap-3">
    <x-ui.spacing-token name="space-1" value="0.25rem" />
    <x-ui.spacing-token name="space-2" value="0.5rem" />
    <x-ui.spacing-token name="space-3" value="0.75rem" />
    <x-ui.spacing-token name="space-4" value="1rem" />
    <x-ui.spacing-token name="space-6" value="1.5rem" />
    <x-ui.spacing-token name="space-8" value="2rem" />
</div>

Top Current

space-1 space-2 space-3 space-4 space-6 space-8

Right Current

space-1 space-2 space-3 space-4 space-6 space-8

Bottom Current

space-1 space-2 space-3 space-4 space-6 space-8

Left Current

space-1 space-2 space-3 space-4 space-6 space-8

Installation

terminal

php artisan ui:add spacing-token

Registry contract

php artisan ui:add spacing-token writes only the files below. The CLI validates each file hash before writing and asks before it replaces a local change, unless you pass --force.

blade resources/views/components/ui/spacing-token.blade.php

Registry dependencies: token
Packages: composer: jml/brok:^0.2

Use with AI

A brief for your coding agent: install command, usage, props, guidance and the rules. Copy it, or open a prompt about this component in an assistant.

spacing-token.md

# Brok UI: Spacing Token (`spacing-token`)

Documents a single spacing-scale design token — a proportional width bar plus the token name, with the length value revealed in a tooltip on hover and click-to-copy.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add spacing-token
```

## Usage

```blade
<div class="flex flex-wrap items-center gap-3">
    <x-ui.spacing-token name="space-1" value="0.25rem" />
    <x-ui.spacing-token name="space-2" value="0.5rem" />
    <x-ui.spacing-token name="space-3" value="0.75rem" />
    <x-ui.spacing-token name="space-4" value="1rem" />
    <x-ui.spacing-token name="space-6" value="1.5rem" />
    <x-ui.spacing-token name="space-8" value="2rem" />
</div>
```

## Props

- `name` (string, default ``) — Token name shown as the chip label and tooltip trigger.
- `value` (string, default ``) — Token length value, shown in the tooltip and copied to the clipboard.
- `copyable` (bool, default `true`) — Shows the copy button when true.
- `side` (string, default `top`) — Tooltip placement side.

## Use when

- Use to document, inspect, and apply design-system decisions consistently across teams and AI tooling.
- Documenting a spacing-scale token so its length is visible as a proportional bar next to its raw value.
- Comparing several spacing steps side by side in a style guide.

## Avoid when

- Do not present token-level controls to end users who only need product functionality.
- Documenting a non-length token; use the matching specialised token component instead.

## Anti-patterns

- Exposing implementation tokens as product settings

## Rules

- Use the `<brok:spacing-token>` tag (or `<x-ui.spacing-token>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/spacing-token
- Registry JSON (files, props, contract): https://brokui.dev/r/open/spacing-token.json

Ask about Spacing Token in

Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.

API

manifest knowledge + registry-derived coverage

Props

Props accepted by this component: name, type, default value and description.
Prop	Type	Default	Description
name	string		Token name shown as the chip label and tooltip trigger.
value	string		Token length value, shown in the tooltip and copied to the clipboard.
copyable	bool	true	Shows the copy button when true.
side	string	top	Tooltip placement side.

Slots

default — Extra content appended inside the chip.

Data slots

Stable hooks for CSS overrides and browser tests.

spacing-token

Behavior

Composes the base token chip and supplies a bar whose width is set from value via an inline style, capped at the indicator's own width, as the indicator.
Declares registry capability flags: a11y, responsive, rtl, darkMode, localized.

Guidance

Design-token documentation

Inspect and govern design-system decisions.

Use when

Use to document, inspect, and apply design-system decisions consistently across teams and AI tooling.
Documenting a spacing-scale token so its length is visible as a proportional bar next to its raw value.
Comparing several spacing steps side by side in a style guide.

Avoid when

Do not present token-level controls to end users who only need product functionality.
Documenting a non-length token; use the matching specialised token component instead.

Use instead

Product-level controls for end users

Anti-patterns

Exposing implementation tokens as product settings

Anatomy: root
Theming hooks: spacing-token

Accessibility

WCAG 2.2 AA Keyboard focus-visible RTL-ready Localized labels Dark mode

Keyboard: No component-owned keyboard interaction; native element behavior applies.
Focus: none

The bar is decorative and aria-hidden; the token name and tooltip carry the actual length value.

Semantic HTML and a stable data-slot attribute for styling and scripting hooks.
Focus-visible rings use the ring token, so keyboard focus is always visible.
Disabled and invalid states are conveyed to assistive tech, not by color alone.
Targets WCAG 2.2 AA; verify contrast in light, dark, admin and customer surfaces in the preview.
Labels go through __() and layout uses logical properties (ms-*, text-start), so it mirrors under dir="rtl" — flip the preview to RTL to confirm.
Dark mode uses the same semantic tokens under the dark class; high contrast follows forced-color system tokens.

Livewire

Safe

Livewire can update this component through forwarded wire:* attributes.

Source

The exact, editable file ui:add writes into your app. Previews render this same code; there are no preview-only components.

resources/views/components/ui/spacing-token.blade.php Blade

@props([
    'name' => '',
    'value' => '',
    'copyable' => true,
    'side' => 'top',
])

{{-- Documents a single spacing-scale token: a width bar plus the token name, with the
     length value in a tooltip and click-to-copy. Composes the base `token` chip and
     supplies the bar through its `indicator` slot. --}}

<x-ui.token
    data-slot="spacing-token"
    :name="$name"
    :value="$value"
    :copyable="$copyable"
    :side="$side"
    {{ $attributes }}
>
    <x-slot:indicator>
        <span class="inline-flex h-4 w-16 items-center justify-start"><span class="h-2 rounded-full bg-primary" style="width: {{ $value }}; max-width: 100%"></span></span>
    </x-slot:indicator>
</x-ui.token>

Ownership & lifecycle

Owner, release state, review evidence and adoption for this item.

Owner: Platform UI (@JoshJML)
Current version: 1.1.1
Status: Stable
License: open
Accessibility reviewed: No review date recorded
Last breaking change: No date recorded
Deprecation: Not deprecated
Contract: v6
Foundation: ≥ 1.0.0