Component Reference
Signals Framework — Canonical Component Library
On This Page
Form Inputs
Field
Search Input
Checkbox
Toggle
Toggle Row
Tag Input
Combobox
Number Input
Range Slider
Inline Edit
Calendar
Date Picker
Datetime Input
OTP Input
Colour Picker
Upload Zone
Dropzone
Matrix
Stars
WYSIWYG
Format Selector
Strategy Selector
Data Display
Table
Data List
Status Cells
Badges
Toolbar Chips
Status Badge
Avatar
Sparkline
Datetime Display
Stat Cards
Bar Chart
Qty Bar
Grid Table
Kanban Board
Tree View
Timeline
Product Cell
Availability Bar
Photo Gallery
Page Header
Use .s-page-header for the top of every list/detail page. Breadcrumb + title + metadata left, actions right.
Opportunity Grid
Buttons
Standard Variants
With Icons
Sizes
Outline Variants
Icon-Only & Block
Disabled & Loading
Toolbar Chips
Toggle chips for toolbar filters. Add .on class for active state.
Standard
Active
Cancelled
Quotation
Confirmed
Color Variants
Green
Amber
Red
Blue
Violet
With Count & Removable
Equipment 92
Services 34
Audio
Lighting
Badges
Use .s-badge with a color modifier. Optional .s-badge-dot for status dot.
All Colors (with dot)
Active
Pending
Overdue
Processing
Archived
Syncing
System
Without Dot
Confirmed
Draft
Cancelled
In Progress
Archived
Lifecycle
Draft
Quotation
Order
Processing
Outline & Count
Outline Green
Outline Blue
Outline Red
Outline Amber
5
12
99+
3
Status Cells
Compact inline status for use inside table cells. Slightly smaller than badges.
All Colors
Confirmed
Provisional
Cancelled
Sub-hired
Archived
Syncing
System
Outline Variant
Active
Warning
Error
Info
Tabs
Underline tabs. Add .on class for active. Optional .s-tab-count for counts.
Table
Use .s-table-wrap > .s-table. Mono font for IDs/refs/dates/amounts. Use .s-cell-link for clickable refs.
Standard
Striped
Compact & Bordered
Inline Editing & Group Row
Sortable Headers with Indicators
Filter Row
With Footer Totals
Checkbox
Custom checkbox. Add .checked class for checked state.
Search Input
Use
<x-signals.search> everywhere. Mono font, green focus border. For toolbars, tables, and standalone use.Toolbar
Toolbar sits between page header and content. Use .s-toolbar-sep for dividers, .s-toolbar-right for right-aligned items.
Dropdown / Popover
Use .s-dropdown inside a relative container. Shown via Alpine x-show or display toggle.
Status
Confirmed
Provisional
Cancelled
Availability Bar
Compact availability indicator for table cells. Fill width = percentage available.
20 / 20
12 / 20
3 / 20
0 / 20
Shortage
Product Cell
Used in tables to show a product with thumbnail, name, and SKU.
🎤
Shure SM58 Microphone
SKU-MIC-SM58
🔊
JBL EON615 Speaker
SKU-SPK-EON615
Card
Generic card container. Use .s-card-header + .s-card-body for structured content.
Standard with Header Actions
Recent Activity
Card body content goes here. Use for settings panels, detail views, widgets, etc.
With Footer
Confirm Dispatch
12 items will be dispatched to Acme Events Ltd. This action cannot be undone.
Cover Image & Horizontal
🎤
Audio Pack
8 items · £450/day
📦
Staging Package
24 items across 3 categories. Includes assembly.
Stat Card
148
Active Opportunities
£52.4k
Revenue This Month
23
Pending Quotes
Toast Notification
Fixed-position toast. Add .visible class to show. Typically used for save confirmations.
Changes saved successfully
Save Indicator
Inline pulsing indicator for autosave confirmation. Typically positioned top-right.
Saved
Keyboard Hints
Esc Close
⌘S Save
↑↓ Navigate
Enter Select
Tab Next Cell
Bulk Action Bar
Fixed bottom bar when items are selected. Uses .s-bulk-btn with SVG icons. Add .visible class to show.
Summary Bar
Compact footer showing aggregate stats. Fixed at bottom of scrollable content.
Legend / Key
Use below availability matrices or any color-coded visualisation.
Key: Available
Low
Out of Stock
N/A
Tooltip
Fixed-position tooltip shown on hover. Position via JS. Add .visible class to show.
Shure SM58
Stock 20
Allocated 14
Available 6
Empty State
No results found
Try adjusting your search or filter criteria
Section Label
Mono uppercase label used for grouping content. Consistent across all views.
General Settings
Notification Channels
Custom Fields
Color Palette
All status/semantic colors available. These map to --s-{color}-bg and --s-{color}-bdr tokens.
Green
Amber
Red
Blue
Violet
Navy
Navy Mid
Navy Light
Grey
Grey Light
Typography
Page Title — Chakra Petch 700
font-family: var(--font-display); font-size: 20px; font-weight: 700;
Section Title — Chakra Petch 700 Uppercase
font-family: var(--font-display); font-size: 14px; font-weight: 700; text-transform: uppercase;
Button / Tab Label — Chakra Petch 600
font-family: var(--font-display); font-size: 11px; font-weight: 600; text-transform: uppercase;
Body / Data Text — System Sans 400
font-family: var(--font-sans); font-size: 13px;
Label / Section — Martian Mono 500 Uppercase
font-family: var(--font-mono); font-size: 9px; font-weight: 500; text-transform: uppercase;
Version Tree
Hierarchical quote version tree with active/selected states. From opportunity-lifecycle.
v3
Final revision
CONFIRMED
$12,450.00
15 Mar 2026
v2
Added lighting
$10,800.00
10 Mar 2026
v1
Initial quote
$8,200.00
05 Mar 2026
Panel
Card panel with header/title/body. From opportunity-lifecycle.
Event Stream
Timeline-style event rows with color-coded left borders. From opportunity-lifecycle.
OpportunityCreated Sarah Chen 2 min ago
StatusChanged System 5 min ago
from: Draft to: Quotation
ItemAdded Mike Ross 1 hour ago
State Diagram
Three-column state machine visualization. From opportunity-lifecycle.
Draft
Draft
new
Quotation
Provisional
quotation
Order
Confirmed
order
Stat Cards
Icon + label + value stat cards in a 4-column grid. From field-registry.
Total Fields
142
Core
98
Computed
28
Custom
16
Button Dropdown
Custom styled select element with dropdown arrow. From field-registry.
Multi-Pane
Sidebar + editor layout. Active item is green. From permissions.
Toggle
Toggle switch. Add .on class for active state. From permissions.
Sidebar
Navigation sidebar with grouped items and badges. From custom-views.
Column Config
Draggable column config with grip handles and toggles. From custom-views.
Visible Columns
Reference
Subject
Status
Unsaved Bar
Fixed notification bar for unsaved changes. Navy background, pulsing amber dot. From settings-admin.
Toggle Row
Label + description + toggle in a row. From settings-admin.
Enable two-factor authentication
Require 2FA for all admin accounts
Allow public registration
Users can create their own accounts
Colour Picker
Swatch + hex value display. From settings-admin.
#059669
#2563eb
#0f172a
Upload Zone
Small dashed upload area for logos/icons. From settings-admin.
Upload logo
Matrix
Grid table for tax rates, permission matrices, etc. From settings-admin.
Status Badge
Compact status indicators (lighter weight than s-badge). From plugin-system.
Active
Disabled
Error
Stars
Star rating display. From plugin-system.
JSON Viewer
Syntax-highlighted JSON display on dark background. From plugin-system.
Parsed View
Collapsible key-value sections on dark background. From plugin-system.
Form Section
Panel with header icon, title and body. From rate-engine.
Multiplier Table
Editable table with input cells for rate multipliers. From rate-engine.
| Period | Days | Multiplier |
|---|---|---|
| 1 Day | 1 | |
| 2 Days | 2 | |
| 1 Week | 7 |
Strategy Selector
Radio-style card selector with icons. From rate-engine.
Period
Charge per time period
Usage
Charge per use
Fixed
One-time charge
Hybrid
Combined strategy
Bar Chart
Horizontal bar chart with labels. From shortage-resolution.
Qty Bar
Quantity availability indicator. Green fill on red background. From shortage-resolution.
Dispatch Urgency
Color-coded urgency text. From shortage-resolution.
Tomorrow
3 days
2 weeks
Grid Table
CSS Grid-based table layout (not HTML table). From shortage-resolution.
WYSIWYG
Toolbar with icon buttons + textarea. From notification-admin.
Viz Buttons
Toggle button group for switching visualization types. From reporting.
Report Sidebar
Grouped sidebar list with source badges and pin buttons. From reporting.
Pin
Pin/favourite toggle button. Amber when active. From reporting.
Collapsible
Accordion panel with chevron indicator. From reporting.
Zoom Controls
Zoom in/out with level display.
100%
Stepper
Multi-step progress indicator with done/active/pending states. From import-export.
Upload
2
Map Fields
3
Validate
4
Import
Dropzone
Drag-and-drop file upload area. From import-export.
Drop your file here or click to browse
Supports CSV, XLSX, JSON (max 50MB)
Format Selector
Card-based format/option selector. From import-export.
CSV File
Excel
JSON
PDF
Progress Bar
Horizontal progress bar with label and percentage. From import-export.
Importing records... 68%
Validating fields 100%
Avatar
User avatar with image, initials, color, and status indicator. Use
<x-signals.avatar> Blade component.Sizes
XS
SM
MD
LG
Indicators
ON
AW
OF
Avatar Group
AB
CD
EF
+3
Loading Button
Add
.s-btn-loading to any .s-btn to show a spinner. CSS-only modifier.Split Button
Button with dropdown for secondary actions. Uses
<x-signals.split-button>.Save as Draft
Save & Close
Discard
Duplicate
Archive
Pagination
Page navigation with numbered buttons, ellipsis, and per-page selector. CSS demo below; use
<x-signals.pagination> with a Laravel paginator.
…
1–25 of 300
Card Variants
Card footer slot and horizontal layout. Extends existing
<x-signals.card>.Card with Footer
Confirm Action
Are you sure you want to proceed?
Horizontal Card
📦
Equipment Package
24 items across 3 categories
Simple Tooltip
Lightweight hover tooltip. Uses
<x-signals.tip>. Pure CSS, no Alpine.
Top tooltip
Bottom tooltip
Left tooltip
Right tooltip
Skeleton
Loading placeholder with shimmer animation. Use
<x-signals.skeleton>.Command Palette
Full-screen overlay with blurred backdrop. Press
Cmd+K to open, or click the button below. Uses <x-signals.command-palette>.
Searching...
No results for ""
Press ⌘K to open the full-screen command palette with blurred backdrop.
Breadcrumb
Breadcrumb navigation. Uses existing
.s-breadcrumb CSS via <x-signals.breadcrumb>.Calendar
Mini month calendar with day selection, event dots, range selection, and adjacent month navigation. Uses
<x-signals.calendar> with Alpine.Single Date + Events
Date Range
Adjacent Month Nav
Spinner
SVG-based loading spinner. CSS-only — no border-radius needed.
Popover
Click-triggered floating panel with title, body, and optional footer. Uses
<x-signals.popover>.Stock Details
Item has 16 units available across 2 stores.
Date Picker
Date input with calendar dropdown, range mode, and optional time picker. Uses
<x-signals.datepicker>. Composes the Calendar component.Single Date
Date + Time
Date Range
Field
Form field wrapper with label, help text, and error state. Uses
<x-signals.field> with s-input, s-textarea, s-checkbox, s-radio classes.Standard Inputs
We'll never share your email.
Checkbox, Radio & Toggle
Choose which notifications to receive.
This field is required.
Input Groups
https://
£
GBP
kg
Modal
Full-page overlay dialog with blur backdrop, focus trap, and escape-to-close. Uses
<x-signals.modal>. Click buttons below to open live modals.
Delete Item
Are you sure you want to delete this item? This action cannot be undone.
Edit Opportunity
Bulk Import Preview
Review the following records before importing:
| Name | Type | Status | |
|---|---|---|---|
| Acme Events Ltd | info@acme.co.uk | Organisation | Ready |
| Jane Cooper | jane@cooper.com | Contact | Ready |
| Sound Warehouse | hello@soundwh.com | Organisation | Duplicate? |
OTP Input
Multi-digit code input with auto-advance, backspace navigation, and paste support. Uses
<x-signals.otp-input>.
—
Timeline
Vertical timeline with colored dots and content. Uses
<x-signals.timeline> and <x-signals.timeline-item>.Order Confirmed
Order #OPP-2026-0148 confirmed by admin.
Items Dispatched
12 items dispatched via courier.
Quote Sent
Quote emailed to client.
Created
Opportunity created.
Datetime Display
Formatted date/time display in mono font. Uses
<x-signals.datetime>.
08 Mar 2026
14:30
08 Mar 2026
08 Mar 2026
14:30
2 months ago
Datetime Input
Combined date picker + time input. Uses
<x-signals.datetime-input>. Composes the Date Picker with built-in time picker.Date + Time
Date Only (no time)
Empty State
Alert / Banner
System messages, validation summaries, status banners. Use
<x-signals.alert>. Supports info/success/warning/danger types.Information
Your import is being processed. This may take a few minutes.
Success
Opportunity #1042 has been confirmed and the client notified.
Low Stock Warning
3 items are below minimum stock levels. Review allocations.
Payment Failed
Invoice #INV-2026-089 payment was declined. Please retry.
Dismissible variant:
Tip
You can customise columns by clicking the gear icon in the toolbar.
Banner (full-width, no side borders) — add
class="s-banner":Drawer
Slide-over panel for detail views, quick-edit forms, and filters. Uses
<x-signals.drawer>. Click buttons to open.
Member Details
Name
Acme Events Ltd
Email
info@acme-events.co.uk
Type
Organisation
Phone
+44 20 7946 0958
Status
Active
Filters
Tag Input
Multi-value tokenised input for tags, categories, recipients. Uses
<x-signals.tag-input>. Type and press Enter, or select from suggestions.Combobox
Searchable select / autocomplete. Uses
<x-signals.combobox>. Type to filter, arrow keys to navigate, Enter to select.No results found
Confirmation Dialog
Lightweight destructive action confirmation. Uses
<x-signals.confirm>. Reuses modal backdrop and sizing.Delete Opportunity?
Archive Record?
Copy Button
One-click copy for API keys, share links, reference numbers. Uses
<x-signals.copy-btn>.Accordion
Grouped collapsible sections with mutual exclusion. Uses
<x-signals.accordion> + <x-signals.accordion-item>.Single open (default)
Multiple open
Inline Edit
Click-to-edit fields. Uses
<x-signals.inline-edit>. Click the value to edit, Enter to save, Escape to cancel.
Subject
Quantity
Number Input
Stepper-style number input with +/- buttons and min/max bounds. Uses
<x-signals.number-input>.Default (step 1)
Step 5, min 0, max 100
Range Slider
Drag-based range selection. Uses
<x-signals.range-slider>.
0
500
Quick Filters
Horizontal chip bar for one-click filter presets. Uses
<x-signals.quick-filters>. Uses wire:click for Livewire integration.Notification Center
Bell-icon dropdown with grouped notifications. Uses
<x-signals.notification-center>. Real-time updates via Reverb in production.
Notifications
Opportunity Confirmed
OPP-2026-1042 "Summer Festival" confirmed by client
2m ago
New Message
Jane Cooper sent you a message about the PA system
15m ago
Stock Alert
Martin guitars below minimum level (2 remaining)
1h ago
Kanban Board
Columnar card layout for pipeline views. Uses
<x-signals.kanban>, <x-signals.kanban-column>, <x-signals.kanban-card>.
Quotation
3
Summer Festival
OPP-1042 · Acme Events
£12,500.00
Corporate Launch
OPP-1043 · TechCo
£8,200.00
Wedding Reception
OPP-1044 · Private
£3,750.00
Confirmed
2
Music Awards
OPP-1038 · MusicCo
£45,000.00
Trade Show
OPP-1040 · ExpoWorld
£18,900.00
In Progress
1
Product Launch
OPP-1035 · InnovateCo
£22,100.00
Completed
0
Tree View
Hierarchical expandable tree for category browsing. Uses
<x-signals.tree-view>. Click arrows to expand/collapse.
Audio
Speakers
Line Array
Monitors
Subwoofers
Mixers
Microphones
Lighting
Moving Heads
LED Wash
Control
Staging
Data List
Key-value pair display for detail views. Uses
<x-signals.data-list>. Supports horizontal, vertical, and grid layouts.Horizontal (default)
Reference
OPP-2026-1042
Subject
Summer Festival 2026
Member
Acme Events Ltd
Status
Confirmed
Total
£12,500.00
Grid layout
Company
Acme Events Ltd
Email
info@acme.co.uk
Phone
+44 20 7946 0958
Type
Organisation
Created
15 Jan 2026
Last Active
3 days ago
Sparkline
Tiny inline trend line for dashboard cards and table cells. Uses
<x-signals.sparkline>. Pure SVG, no chart library.
Revenue
+14%
Returns
-25%
Utilisation
~50%
Photo Gallery
Grid of thumbnails with lightbox overlay. Uses
<x-signals.gallery>. Click to open lightbox, arrow keys to navigate.