Z
Zyeon-AI/zyeon-ui-components
API Keys Panelapi-keys-panelA four-state API key manager built around show-the-secret-once — a forced acknowledgement before the reveal can be closed, a name-repeating revoke confirmation, and lifecycle plus never-used called out per key.
Auth Cardauth-cardSign-in, sign-up and reset in one card: a typed rejection union (bad credentials, address taken, rate limited), per-mode autocomplete tokens, a duplicate-submit guard, and input that survives every failure.
Blog Card Gridblog-card-gridA four-state article grid: one stretched link per card (category and author stay independently clickable), a featured post that spans two columns, and deliberate, configurable line clamping so mismatched title lengths still line up.
Contact Sectioncontact-sectionA contact block built around its submit state machine: zod-validated name/email/topic/message, a duplicate-submit guard, a confirmation panel that names the address it replied to, and a failure that keeps every character you typed — beside contact rows whose mailto:/tel:/map links are derived from their own values.
CTA Bandcta-bandA closing call-to-action strip — headline, supporting line and a primary/secondary CTA pair, in four surfaces (plain, card, muted, accent) and row or stacked layouts.
Dashboard Shelldashboard-shellAn app shell with a pinned top bar, a collapsible icon rail and a main region that is the page's only scroll container — on mobile the sidebar becomes a scroll-locked, focus-trapped drawer.
Error Pageerror-pageA full-viewport error page for 404 / 403 / 500 / offline / maintenance — per-type copy and advice, a back button that degrades when the history stack is empty, live online status, and a copyable error ID behind collapsed diagnostics.
FAQ Sectionfaq-sectionA four-state FAQ accordion block with a self-contained, dependency-free disclosure list and smooth grid-rows expansion.
Feature Gridfeature-gridA four-state feature section: equal-weight icon cards with optional real "learn more" links, and no cap on how many render.
Hero Sectionhero-sectionA props-driven landing hero with eyebrow, dual CTAs, social-proof bar and an optional visual that collapses to a centred column when omitted.
Integration Gridintegration-gridA four-state integrations directory: debounced search and category facets that really filter, a live result count, and per-card connect / disconnect with pending, error and retry.
Job Listingsjob-listingsA four-state careers board: roles grouped by department, three filters that really combine (department, location, remote-only), a live result count, and salary ranges whose absence is spelled out instead of left blank.
Logo Cloudlogo-cloudA trusted-by logo wall that optically equalises logos of wildly different aspect ratios, as a static grid or a reduced-motion-aware marquee.
Metric Overviewmetric-overviewA dashboard KPI row — one shared range switcher over comparable cards, deltas coloured by each metric's polarity, and a sparkline per card.
Newsletter Signupnewsletter-signupAn email capture band driven by a real submit state machine: zod validation, a duplicate-submit guard, a role=status confirmation, an idempotent already-subscribed branch, and a failure that keeps the address you typed.
Pricing Tablepricing-tableA four-state pricing section with a data-derived monthly/yearly toggle and a highlighted recommended tier.
Roadmap Boardroadmap-boardA public product roadmap in planned / in-progress / shipped lanes, with optimistic upvoting that rolls back and reports the failure, per-lane empty states and real loading/empty/error branches.
Settings Pagesettings-pageA settings page shell — section nav, per-section save, and an unsaved-changes guard that stops a section switch with save / discard / cancel instead of dropping the edit.
Site Footersite-footerA contract-driven site footer: brand block with named social links, collapsible link columns on mobile, and a legal bottom bar with an optional locale switcher.
Stats Sectionstats-sectionA marketing KPI band of big formatted numbers with hairline dividers, driven by a four-state contract.
Team Gridteam-gridA four-state team section with equal-height member cards, initials-fallback avatars, real social links and optional department grouping.
TestimonialstestimonialsA masonry wall of customer quote cards with avatars, driven by one contract through all four data states.