Wylie Dog
03 · Components·@wyliedog/ui v1.4

42 components.
All tokens. All accessible.

The full Wylie Dog catalog — every component is a typed React export, built on Radix UI primitives, wired to the OKLCH token system, and audited against WCAG 2.2 AA.

Components
42
Categories
6
Built on
Radix
Audited
WCAG 2.2
7 components rendered
EM

Elena Mori

Lead, Design Systems

Online
v1.4 release readiness82%
Dialog⌘K

Dark mode preview

render every story in both themes

usesCardAvatarBadgeSeparatorProgressInputSwitchButton
01 · Category

Content Display

Surfaces that present information — cards, tables, calendars, carousels. Compose them; don't customize them. 7 components

Shipping
Free over $50, 2-day delivery on stock items.
Returns
Warranty

Accordion

Vertically stacked sections that expand one at a time or independently.

Storybook
EMJRAK+8

Avatar

Image, initials, or icon — with stacked group, status dot, and fallback.

Storybook
DefaultOutlineActive
BetaDeprecated

Badge

Small status pill — default, outline, success, warning, destructive.

Storybook
May 2026
SMTWTFS
262728293012345678910111213141516

Calendar

Single date, range, or multi-select — locale-aware via Intl.

Storybook

Project

Migration to v1.4

68 components migrated · 6 outstanding tickets

EMJR
Active

Card

The catch-all surface — header, content, footer slots, and a hover state.

Storybook

Carousel

Embla-powered slider with keyboard, swipe, autoplay, and snap controls.

Storybook
NameRoleStatus
Elena MoriLeadActive
Jude ReyesEng—
Ari KleinDesignAway

Table

Sortable headers, sticky rows, dense or comfortable density.

Storybook
02 · Category

Feedback & Status

Tell the user what's happening — is it loading, did it work, did something go wrong? All four states map to the same role tokens. 4 components

Build passed · 3,402 tests

2 deprecation warnings

Connection lost · retrying

Alert

Inline status banner — default, success, warning, destructive.

Storybook
Uploading68%
Indexingindeterminate
circular · 70%

Progress

Linear, circular, determinate, indeterminate — for any wait state.

Storybook

Skeleton

Shimmering placeholder shapes for content that's loading.

Storybook

Theme published

v1.4.0 is live in production

Toast

Transient stack of notifications with auto-dismiss and swipe-to-clear.

Storybook
03 · Category

Inputs & Controls

The shape of every form. All thirteen wire to the same Form schema and share keyboard, focus, and validation behavior. 13 components

PrimaryOutline
GhostDestructive
Loading

Button

5 variants × 3 sizes, with loading, disabled, and icon-only modes.

Storybook

Checkbox

Three states: checked, indeterminate, unchecked — with label slot.

Storybook
elena@wyliedog.dev

Must be a work email address.

••••••••

Form

react-hook-form + zod schema; field-level error and aria-* wiring built-in.

Storybook
Search components…
elena@wyliedog.dev
Disabled

Input

Text, email, password, search, file — with leading/trailing slots.

Storybook
*
e.g. Elena Mori
optional
Tell people who you are.

Label

Required marker, optional hint, and click-to-focus association.

Storybook

Radio Group

Single-select cluster with horizontal or vertical orientation.

Storybook
Engineering
Engineering
Design
Operations

Select

Native-feeling dropdown with search, sections, and keyboard nav.

Storybook
Volume62
Range24 – 78

Slider

Single value, range, or stepped — vertical or horizontal.

Storybook
Auto-deploy
Beta channel
Telemetry disabled

Switch

Boolean toggle with label slot, on/off icons, and disabled state.

Storybook

Designers can edit tokens directly in Figma; the bridge opens a pull request with the diff.

142 / 280

Textarea

Auto-resizing multi-line input with character counter and rich states.

Storybook

Toggle

A two-state pressable button — the foundation for Toggle Group.

Storybook

Toggle Group

Single or multi-select cluster of toggles — segmented control or icon strip.

Storybook
Design Systems
Design Systems
Engineering
Operations

Combobox

Searchable select with async loading, multi-select, and custom option rendering.

Storybook
04 · Category

Layout & Structure

The shape of the page itself — aspect, scroll, split, collapse. Headless utilities you compose around your content. 5 components

16 : 9

Aspect Ratio

Maintain a fixed ratio for media or canvases regardless of viewport.

Storybook
Advanced settings
→ Network timeout
→ Retry strategy
→ Cache invalidation

Collapsible

A single open/closed disclosure region — the building block of Accordion.

Storybook
Sidebar
Main

Resizable

Split panes with drag handles — horizontal, vertical, nested.

Storybook

Changelog

v1.4.0 — OKLCH ramps

v1.3.2 — Toast variants

v1.3.1 — Fix focus ring

v1.3.0 — Calendar locales

v1.2.4 — Pagination

Scroll Area

Custom-styled scrollbars that show on hover and stay accessible.

Storybook

Workspace

Settings · Members · Billing

or

Separator

Horizontal or vertical divider with optional inline label.

Storybook
05 · Category

Navigation

Way finding — from a single breadcrumb to a global command palette. All six share keyboard semantics and the same focus-ring token. 6 components

Type a command…esc
Open documentation
New token…
Toggle theme

Command

Searchable command list — the primitive behind every ⌘K palette.

Storybook
FileEditViewHelp
New project⌘N
Open⌘O

Menubar

Application-style top bar with cascading menus and keyboard shortcuts.

Storybook
ProductsSolutionsPricingDocs

Tokens

1184 vars

Components

42 React

Navigation Menu

Multi-level top nav with mega-menu panels and viewport positioning.

Storybook
…

Pagination

Numbered or prev/next, with truncation and URL-syncing helpers.

Storybook
OverviewActivityMembers
Migration plan, owners, and current status for v1.4.

Tabs

Underline, contained, or vertical — with lazy-mounted panels.

Storybook
06 · Category

Overlays & Popovers

Anything that floats above the page — modal, sheet, popover, tooltip. All eight go through Radix's portal and share focus-trap and dismiss behavior. 8 components

Delete project?

All migrations, tickets, and tokens will be permanently removed.

CancelDelete

Alert Dialog

Confirmation modal for destructive actions — cannot be dismissed by overlay click.

Storybook
Copy⌘C
Paste⌘V
Delete

Context Menu

Right-click menu with sub-items, checkboxes, and shortcut hints.

Storybook

Invite teammates

name@example.com
Send invite

Dialog

Modal panel with header, footer, and overlay — the workhorse modal.

Storybook
Edit
Duplicate
Delete

Dropdown Menu

Trigger-anchored menu with checkboxes, radios, and submenus.

Storybook
@elena_mori
EM

Elena Mori

Lead, Design Systems

Building design systems that scale.

42 following1.2k followers

Hover Card

Rich preview on hover — useful for user profiles, link previews.

Storybook

Filter by status

Popover

Trigger-anchored floating panel with full content and close button.

Storybook

Settings

Sheet

Side drawer that slides in from any edge — with overlay and focus trap.

Storybook
WCAG 2.2 AA compliant
hover·focus·touch

Tooltip

Keyboard and pointer-triggered label — never interactive content.

Storybook

Primitive layer

Radix UI

All 42 components are built on Radix primitives — headless, a11y-compliant, and unstyled.

Type safety

TypeScript

Every prop, variant, and slot is typed. Import the component; your editor knows the API.

Styling

Tailwind 4

OKLCH CSS vars through Tailwind's CSS custom property syntax. Zero runtime, full tree-shaking.

Token contract

OKLCH Tokens

1184 design tokens across 3 tiers. Every color in every component resolves through the token graph.