Z
Zyeon-AI/zyeon-ui-components
Danger Zoneaccount-danger-zoneA settings-page danger zone — one row per irreversible action with its consequences itemised before the confirm, a type-the-resource-name gate, grace windows dated from the payload's own clock, and blocked actions that name their blocker instead of rendering a dead button.
Age Gateage-gateA date-of-birth gate with three explicit boxes, a real calendar behind them, and a minimum-age rule whose refusal is honest and always offers a way out.
Agent Dashboardagent-dashboardAn agent-ops overview — KPI tiles whose trends are derived, a runs-over-time bar chart, a recent-runs table whose failing rows expand to the error line, and a live-agent rail that filters the table without moving the window figures.
AI Answerai-answerA search-answer section — the question, the sources it stands on, prose whose every sentence carries a numbered chip back to a source, follow-ups, and a streaming pass where sources land before the text.
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.
API Playgroundapi-playgroundA try-it console that generates parameter, header and body editors from an operation definition, sends the request through an injected fetcher, and reports status, timing, size and headers with a pretty/raw toggle.
App Downloadapp-downloadA get-the-app block that promotes the store matching the visitor's device, encodes the smart link into a scannable QR for desktop visitors, and renders the store badges you supply instead of redrawing brand marks.
Assistant Welcomeassistant-welcomeA first-run assistant hero — greeting, capability cards and starter chips that prefill the host's composer instead of sending, over a token-only animated accent.
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.
Billing Historybilling-historyA four-state invoice list — per-currency money through Intl, a six-state lifecycle with partial-refund arithmetic, real filters and pagination, and PDF links that never render as dead buttons.
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.
Cart Drawercart-drawerA slide-out cart panel whose money re-derives on every change — quantity steppers that refuse with a reason, an undoable remove, a promo field driven by the host's verdict, and free-shipping progress.
Case Study Gridcase-study-gridA four-state customer-story grid where the quantified result is the first-class field: every metric carries value, unit, direction and a required baseline (or says "No baseline captured"), industry and company-size facets really filter with truthful counts, and logos of any aspect ratio are optically area-matched.
Chatbot Widgetchatbot-widgetAn embeddable support chat widget — launcher bubble with an acknowledged unread badge, a panel that keeps its draft when minimised, quick replies, and a rating row on the way out.
Checkout Formcheckout-formA one-page checkout — contact, delivery address, payment method and an order summary whose delivery, tax and payment fee are derived from the form in the same render, in integer minor units, so the lines always add up to the button and the money can never lag the address.
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.
Cookie Preferencescookie-preferencesA granular cookie consent manager: one row per category with plain-language copy and a vendor-count disclosure, a locked strictly-necessary row, equal-weight accept-all / reject-all / save-selection, and a saved-choice strip that re-opens the editor.
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.
Data Export Requestdata-export-requestA GDPR-style data export block — scope picker with live size estimates split by largest remainder, a confirmation that states what the archive contains and who can open it, a build read that never dresses a queue position up as progress, and a download link that visibly counts down to its own expiry with past exports that re-request when theirs is gone.
Empty Dashboardempty-dashboardA first-run dashboard: welcome copy, a setup checklist whose progress counts done separately from skipped, a labelled skeleton of the filled dashboard, and a confirmed sample-data escape hatch — the block renders nothing once nothing is left to do.
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 Announcementfeature-announcementA what's-new surface — modal dialog or anchored popover — that steps through the features a reader has not seen yet and reports every seen id plus the reason it closed.
Feature Comparisonfeature-comparisonA dated us-vs-competitors capability table — yes / partial / no / not-disclosed told apart by shape and word, numeric rows with a per-row unit, a frozen capability column, and a verified-on date measured against an injected now.
Feature Gridfeature-gridA four-state feature section: equal-weight icon cards with optional real "learn more" links, and no cap on how many render.
Feature Hover Previewfeature-hover-previewA feature list whose rows cross-fade a preloaded media panel on hover or focus, marking the active row with a measured accent rail and falling back to media inline under each row on touch.
Help Centerhelp-centerA support landing block whose search ranks titles, keywords and summaries, whose topic cards report honest counts, and whose zero result offers a topic or a human instead of a dead end.
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.
Incident Composerincident-composerThe write side of a status page — pick the update state, set each affected component's impact, and see exactly what the email, SMS and webhook subscribers receive plus how many destinations they reach, with resolve forcing every component back to operational behind a confirm.
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.
Invite Teaminvite-teamA four-state invite panel: a paste-a-list email field with per-address reasons, a role per invite, a seat meter that blocks over-allocation, undoable revoke and a copyable join link.
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.
Legal Consentlegal-consentA versioned terms-and-privacy acceptance panel — the clause-level delta since the version the user last accepted, full text that must actually be scrolled to its end before its checkbox unlocks, separable consents for terms/privacy/marketing, and the record it hands back.
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.
Model Comparemodel-compareA side-by-side arena for two answers to one prompt — per-side streaming states, derived speed, optional blind names, and a vote that fires exactly once.
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.
Notification Preferencesnotification-preferencesAn events × channels notification matrix that saves as you toggle: per-switch pending and single-switch rollback on failure, locked always-on rows, a disconnected channel column with a real Connect entry point, row/column bulk actions with a bulk-vs-manual marker, and a quiet-hours window that wraps past midnight.
NPS Surveynps-surveyA whole Net Promoter Score round in one block: a keyboard-reachable 0–10 scale, a follow-up question reworded per detractor / passive / promoter bucket, an optional contact-me box, and a one-submission-per-session thank-you.
Onboarding Checklistonboarding-checklistA four-state getting-started panel driven by a zod task contract — a progress ring whose accessible value is the count rather than the rounded percentage, rows that expand to a description and one real action, instructions that collapse themselves once a task is ticked, an honest time-left figure, and an inline celebration whose dismiss states where to reopen it.
Order Confirmationorder-confirmationA post-checkout receipt block — a dictatable, one-click-copyable order number, an itemised table whose money is refined to add up, a delivery window rather than a promised day, ship / pickup / digital fulfillment, and print styles that keep it on paper.
Pricing Calculatorpricing-calculatorAn interactive price estimator whose seat, usage and add-on axes re-derive the bill on every change — switching tier by itself when a cap is crossed, and naming the cheaper plan when another one wins.
Pricing Tablepricing-tableA four-state pricing section with a data-derived monthly/yearly toggle and a highlighted recommended tier.
Referral Programreferral-programA four-state referral panel: the personal invite link with copy and templated share targets, tier progress counted from the referral list itself, every referred person with their stage and reward, and the program terms behind a disclosure.
Research Reportresearch-reportThe finished output of a deep-research run — prose whose citation numbers are derived from one walk of the data, per-section source chips, an outline that follows the reader, and a methodology footer that shows the queries run and the sources rejected.
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.
Scrollytelling Panelscrollytelling-panelA sticky-media storytelling block: a pinned visual beside stepped copy, where an IntersectionObserver reading line hands the frame to whichever step the reader is on and publishes the active index.
Search Resultssearch-resultsA four-state search results page — query echo, keyword highlighting, faceted type/recency/tag filters whose counts are the real post-click result count, and pagination that snaps back to page 1 on every filter change.
Seat Managementseat-managementA seat ledger crossed with the member roster: who holds a billable, free-viewer, invited or deactivated seat, the assignment count against the plan, the cost of adding or removing a seat previewed before it is committed, an overage warning carrying both of its exits, and a bulk deactivation of idle members that states what it frees before it states what it saves.
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.
SSO Setupsso-setupA four-state SAML/OIDC connection panel: copy-per-field values in both directions, DNS TXT domain proof, claim mapping, a test verdict that names the broken setting, and an enforcement switch that refuses with its reasons and spells out who would be locked out.
Stats Sectionstats-sectionA marketing KPI band of big formatted numbers with hairline dividers, driven by a four-state contract.
Status Pagestatus-pageA public status page whose overall banner is derived from the worst service state and open incident, with per-service 90-day uptime strips, timestamped incident updates and upcoming maintenance windows.
Sticky Footer Revealsticky-footer-revealA footer that sits behind the page: the content is an opaque sheet on a higher z-index that the last screenful of scroll slides off a sticky-pinned footer, with an automatic in-flow fallback when nothing scrolls.
Subscription Managersubscription-managerA manage-plan block — the running plan with its renewal countdown and seat overage, usage against the plan's own limits, prorated plan changes, and a cancellation that states what is lost and when access actually ends.
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.
Trust Centertrust-centerA public trust page that measures every audit report against the refresh cycle its own data states, filters subprocessors by processing region with shares apportioned to exactly 100, and turns each gap — no report link, no DPA, no uptime data, no subscribe route — into a sentence with the next step in it.
Two-Factor Setuptwo-factor-setupThe enable-2FA flow around its one irreversible step — QR plus a copyable manual key, a six-digit check whose attempt budget only ever goes down, and recovery codes rendered once behind a finish button that refuses to fire until they are saved.
Usage Dashboardusage-dashboardA period-scoped usage block — headline, quota bar, cumulative burn-up curve and per-dimension breakdown all derived from one bucket array, so the four readouts cannot disagree; run-rate projection stated apart from actual usage, and period switches that never put a new label over old figures.
Voice Chatvoice-chatA realtime voice session panel — speaking orb, word-by-word live captions, mute, mic picker, connection meter, session clock, and an end-of-call summary.
WaitlistwaitlistA viral waitlist block: validated email capture, a joined panel that reports your place and derives the rest of the maths, a referral link worth a stated number of places, and a leaderboard teaser that pins your own row.
Webhooks Managerwebhooks-managerA four-state webhook endpoint manager — an event multi-select editor that refuses unreachable URLs with the reason, reveal-on-demand signing secrets rotated behind a stated overlap window, a test sender that names its blocker, and per-endpoint deliveries with outcome mix and retry.