Library

Components

Production-ready, accessible React components. Built with CVA for variants, Radix primitives for behaviour, and token-driven styling throughout. All 48 components in a single showcase.

PrimitivesFormsLayoutSurfaceFeedbackOverlayNavigationDataMulti-StepDateLearningContracts

01 · Primitives

Primitives

The atomic building blocks. Buttons, badges, tags, keyboard hints, inline code, avatars, separators, and labels.

Button
With icons
Badge
DefaultOutlineMutedWarningSuccessDestructive
Tag
DefaultOutlineMutedWarningSuccessDestructive
Dismissible
DesignReactTokens
Kbd
Save:⌘SSearch:⌘KUndo:CtrlZ
Code

Install with pnpm add @entangle-hq/ui and import import { Button } from '@entangle-hq/ui' to get started. Run pnpm build to compile tokens.

Avatar
SM
MD
LG
Separator
Horizontal
Content aboveContent below
Vertical
LeftCentreRight
Label

02 · Forms

Form Controls

Text inputs, textareas, and toggle switches with full validation states, size variants, and accessibility support.

Input · Sizes
Small
Medium
Large
Input · States
Default
InvalidPlease enter a valid email address
Disabled
Textarea
Default
InvalidThis field is required
Switch
Notifications enabled
Dark mode off
Disabled
FormField
Default with helper text

We'll never share your email.

Required + Error
With Textarea

Markdown supported.

03 · Layout

Container & Stack

Layout primitives for page structure and content flow. Container constrains width; Stack provides flex layout with direction, gap, and alignment.

Container Sizes
size="sm"640px
size="md"768px
size="lg"1024px
size="xl"1280px
size="full"100%
Stack Directions
direction="column"
Item 1
Item 2
Item 3
direction="row"
Item 1
Item 2
Item 3
Stack Gap Variations
gap="xs"
1
2
3
4
gap="sm"
1
2
3
4
gap="md"
1
2
3
4
gap="lg"
1
2
3
4
gap="xl"
1
2
3
4

04 · Surface

Surface & Content

Cards with compound composition, alerts for user feedback, and metric KPI cards for data display.

Card · Compound Composition
Project Alpha
Design system implementation

Token-driven component library with full a11y coverage and visual regression testing.

Brand Refresh
Multi-hue colour system

Four hand-tuned palettes with semantic token mapping and automatic dark mode support.

Card · Accent & Interactive
accent

Purple border tint with subtle background fill.

interactive

Hover to see border highlight on cursor.

accent + interactive

Both props combined.

Alert
Metric
Revenue$2.1M12-month rolling
Spend$259K8-month total
ROAS8.1xBlended return

05 · Feedback

Feedback

Loading skeletons, progress bars, and toast notifications for communicating system state.

Skeleton
Progress
Default · 65%
Success · 100%
Warning · 45%
Critical · 15%
Toast

Click a button to trigger a toast notification in the bottom-right corner.

06 · Overlay

Overlay & Interaction

Dialogs, sheets, tabs, tooltips, dropdown menus, and popovers. Built on Radix primitives with glass treatment and backdrop blur.

Dialog

A modal dialog with overlay, glass treatment, and keyboard dismissal.

Sheet

A slide-out panel from the right edge.

Tabs

This is the overview panel. Tabs use Radix primitives for keyboard navigation and ARIA attributes.

Tooltip

Hover or focus the buttons to see tooltips.

Dropdown Menu

Click the button to open a context menu.

Popover

Click to open a popover with rich content.

08 · Data Display

Data Display

Tables, comparison cards, and ad format cards for marketing reports and client dashboards.

Table
CampaignSpendConversionsROAS
Brand — Search$12,4003428.2x
Generic — Shopping$8,2001564.1x
Retargeting — Display$3,100896.7x
Prospecting — Meta$6,800943.2x
Comparison Card
ROAS
6.8x
+61.9%was 4.2x
CPA
$52
-38.1%was $84
Spend
$38K
-9.5%was $42K
Impressions
890K
-25.8%was 1.2M
Ad Card
Search Ad

aquapulsespas.com.au/shop

Premium Spa Products | Free Delivery Over $99

Shop Australia's widest range of spa equipment, chemicals & accessories. Expert advice & fast shipping.

CTR4.2%
CPC$1.84
Conv.128
ROAS6.2x
Insights
  • Headline 1 drives 40% of clicks — test expanding this angle
Meta Ad

Join 2,400+ Queensland families who upgraded to a premium spa experience. Free delivery & installation.

No creative

Transform Your Backyard This Weekend

Learn More
CTR1.8%
CPM$12.40
Leads64
CPL$38
Insights
  • Frequency at 2.1 — headroom before fatigue

09 · Multi-Step

Wizards & Quizzes

Multi-step form wizards and interactive quizzes for onboarding flows, assessments, and guided experiences.

Form Wizard

We'll audit this during onboarding.

1 / 3
Quiz
Question 1 of 3

What is a good blended ROAS target for e-commerce?

10 · Date & Time

Date Pickers

Single date input, date range between two dates, and preset period selector for dashboards and reports.

Date Input
Date Range Picker

Inline range selector with two date inputs and a connector label.

Date Preset Picker

Quick period selection for dashboards. Active preset gets the primary pill treatment.

Combined · Preset + Range

Preset pills for quick selection with a date range picker for custom periods.

11 · Learning

Learning Components

Educational content components for academy and documentation flows. Token-driven, no hardcoded colours, Lucide icons throughout.

Callout

Note

Use WeaveProvider at the root of your app to enable theme switching.

Warning

Importing components.css after utilities.css may cause specificity conflicts.

Tip

The layout.tsx scaffold in APP-STARTER.md includes all required imports.

Error

Stale Tailwind assertion strings silently poison the CSS build.
Concept Card
Design Tokens — Named CSS custom properties that map raw values to semantic intent. --primary maps to #635bff across all themes.
CSS Layers — @layer weave.* namespacing prevents consumer app styles from conflicting with Weave component styles.
≈

Analogy

Think of CSS layers like namespaces in programming — they prevent naming collisions between independent systems.

Key Takeaway

Key Takeaway

Import tokens/css before theme.css — theme.css references the custom properties that tokens/css defines.

Key Takeaway

WeaveThemeScript must run before React hydration to prevent flash-of-wrong-theme.
Highlight Text

The design token is the atomic unit of the system. Every color, spacing, and typography value is a named variable before it becomes a pixel on screen.

Step Sequence
1

Install packages

pnpm add @entangle-hq/ui @entangle-hq/tokens

2

Add CSS imports

tokens/css → theme.css → components.css → utilities.css → theme preset

3

Wrap with WeaveProvider

Add WeaveProvider and WeaveThemeScript to your root layout

4

Import components

import { Button, Card } from '@entangle-hq/ui'

Comparison Table
Approachv0.2.xv0.3.0
Theme initclassName='dark' on htmlWeaveProvider + WeaveThemeScript
Token CSSManual :root overridesimport @entangle-hq/tokens/css
Components35 core48 (+ learning + contracts)
Font slotsNot exportedCSS variable slots in theme.css
Flow Diagram
tokens/css→theme.css→components.css→theme preset→Your App

12 · Contracts

Contract Components

Reusable contract and proposal components with print CSS. Import @entangle-hq/ui/contracts/print.css once in the contract page layout.

Clause
1
Scope of Services
Entangle will provide growth marketing services as outlined in Schedule A, including paid media management, analytics reporting, and campaign optimisation.
2
Payment Terms
Invoices are issued on the first business day of each month and are due within 14 days of issue. Late payments attract a 1.5% monthly fee.
Scope Item
Google Ads management (Search + Shopping)
Meta Ads management (Feed + Stories)
Weekly performance report
Analytics dashboard access
Monthly strategy review
Party Cards
Provider
Entangle Pty Ltd
ABN 12 345 678 901
Brisbane, QLD
Client
Aqua Pulse Spas Pty Ltd
ABN 98 765 432 100
Gold Coast, QLD
Contract Nav

Sticky top navigation for contract documents showing status badge and client name. Shown here without sticky positioning for demo purposes.

Signature Block

Service Provider

Entangle Pty Ltd

Aaron Rodrigo · Director

Awaiting signature

Client

Aqua Pulse Spas Pty Ltd

Hayden Smith · Director

Awaiting signature