Sigta UI · Internal docs
SIGTAA Livewire/Blade library that carries the Sigta brand — paper, ink, and hand-drawn accents — as the shared foundation for landing pages and SaaS platforms. Semantic tokens mean the same markup re-skins for any brand.
01 · Install
Requires Tailwind v4. Pull the package, point your CSS entry at the Sigta stylesheet, and wire the runtime into your layout.
composer require sigta/ui works for this local-dev playground because the path repository is already wired. A production app needs a private VCS repository, Composer auth, and a deploy sequence — see the production installation guide.
1. Require via Composer
composer require sigta/ui2. Import the stylesheet in your CSS entry
/* resources/css/app.css */
@import "tailwindcss";
@import "../../vendor/sigta/ui/resources/css/sigta.css"; /* core + Sigta brand */
@source "../../vendor/sigta/ui/resources/views";3. Wire the runtime into your layout
{{-- resources/views/components/layouts/app.blade.php --}}
<head>
…
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
@sigtaScripts {{-- + @sigtaEditorScripts if you use <x-sigta::editor> --}}
</head>
<body>
…
@livewireScripts
</body>Components are then available as <sigta:button> or the equivalent <x-sigta::button> — both forms compile identically. This page prefers the terse prefix.
02 · Usage
Every example below is live on the left and its source on the right. Props mirror Flux: variant, size, icon, label, description, error.
<sigta:button variant="cta">Book a project <sigta:icon name="arrow-right" size="sm" /></sigta:button>
<sigta:button>Preview</sigta:button>
<sigta:button variant="ghost">Cancel</sigta:button>We only use this for the invoice.
<sigta:input
label="Email"
type="email"
icon="mail"
placeholder="you@studio.co"
description="We only use this for the invoice." /><sigta:callout variant="success" heading="Deploy complete.">
Plumb 2.4 is live for all workspaces — no migration needed.
</sigta:callout><sigta:badge>Draft</sigta:badge>
<sigta:badge variant="solid">Live</sigta:badge>
<sigta:badge variant="accent">New</sigta:badge>03 · Theming
Every component reads semantic var(--sigta-*) tokens — never a raw colour. A theme is just a values file. Names are roles (--sigta-surface, --sigta-fg), so you pick values that fit your brand and the component markup never changes.
Mode A — drop in the Sigta brand
/* Mode A — drop-in Sigta brand */
@import "tailwindcss";
@import "../../vendor/sigta/ui/resources/css/sigta.css";
@source "../../vendor/sigta/ui/resources/views";Mode B — core + your own theme
/* Mode B — core structure + your own brand */
@import "tailwindcss";
@import "../../vendor/sigta/ui/resources/css/core.css";
@import "./brand.css"; /* your :root{--sigta-*} + @font-face */
@source "../../vendor/sigta/ui/resources/views";The token contract (from theme.example.css — every one is required)
:root {
/* surfaces & text */
--sigta-surface: …; /* page background */
--sigta-surface-raised: …; /* cards, inputs, panels */
--sigta-fg: …; /* primary text, borders, solid fills */
--sigta-fg-muted: …; /* secondary text */
--sigta-line: …; /* hairlines, dividers, input borders */
/* brand & status */
--sigta-accent: …; /* the one emphasis colour (used sparingly) */
--sigta-accent-line: …; /* border for accent-filled elements */
--sigta-success: …;
--sigta-danger: …;
/* inverse (dark bands: CTA sections, spotlights) */
--sigta-inverse: …;
--sigta-inverse-fg: …;
--sigta-inverse-fg-muted: …;
--sigta-inverse-line: …;
/* type */
--sigta-font-head: …; /* headings */
--sigta-font-body: …; /* prose */
--sigta-font-mono: …; /* UI chrome, labels, data */
--sigta-font-hand: …; /* decorative handwriting */
/* shape, depth & layout */
--sigta-radius: …; --sigta-radius-lg: …; --sigta-radius-xl: …;
--sigta-shadow: …;
--sigta-maxw: …; --sigta-gutter: …;
/* focus ring & motion */
--sigta-focus-width: …; --sigta-focus-offset: …;
--sigta-ease-fast: …; --sigta-ease: …; --sigta-ease-slow: …;
}[data-sigta-theme="x"] and set the attribute on any subtree to run several brands in one build.
/* Multi-brand: scope a theme, flip it on any subtree */
[data-sigta-theme="studio"] { --sigta-accent: …; --sigta-radius: …; … }Live: the same cluster, two brands
Kickoff on Friday. Two seats still open on the workspace.
Kickoff on Friday. Two seats still open on the workspace.
Byte-for-byte the same component markup on both sides — only the surrounding token values differ. See it toggle at runtime on the theme-switch page.
04 · Components
68 pages, each covering every variant and state. Tap a tile for the full gallery.