jixoai-ui · patterns

Patterns — the composition product

Five landing sections composed from the atoms you already have: login, pricing, heroes, FAQ, CTA. A pattern adds no primitives — it declares the atoms it composes, and installing it pulls the whole closure. Every card links to the pattern's canonical docs page; the source stays yours after add.

5 patterns composition-only terminal idiom

pattern-login

The `ssh user@host` login card — a composition product, not a primitive: user/host lanes are plain Input (innerInlineStart carries the user@ / --host= glyphs), the passphrase reveal rides the Input's own eye (hard F1 prerequisite — no pattern-local fallback), the OTP second-factor screen rides input-otp (joined form value; incomplete codes submit empty), the submit is a PressButton, and the footer is the copyable npx bootstrap line — the terminal idiom's magic-link analog.

npx jixoai-ui add pattern-login

pattern-pricing

The `$ plan --compare` section: the comparison matrix rides the Table family (consumer authors thead/tbody; the recommended column opts in with data-jx-recommended on the th AND its td's — pattern css paints brand inset rules that keep the row-hover law intact), each tier's install command rides a CodeCard with a copy PressButton in its footer, plan labels ride Badge. Commands/labels are value-domain payload; no atom is patched.

npx jixoai-ui add pattern-pricing

pattern-hero-set

Three hero forms of the terminal grammar: the terminal-window hero (hero-section with the right column prewired to a terminal-card whose command derives from copyCommand — one string drives the CTA label, the clipboard payload and the typed demo), the ASCII-art headline hero (art as whitespace-preserved payload in a pre under the mono scale law — wide banners scroll, ascii never reflows), and the badge-marquee hero (plain mono token strip with an aria-hidden duplicate on a seamless -50% CSS loop; prefers-reduced-motion kills the animation, folds the duplicate away and leaves a static scrollable row).

npx jixoai-ui add pattern-hero-set

pattern-faq

The man-page FAQ: a command(section) head with the print-style dotted NAME leader over the accordion family (native details/summary — exclusive by default, questions compose as AccordionItem children or bare details), closing on a SEE ALSO line. The pattern owns only the framing; disclosure semantics, keyboard and SSR state belong to the accordion.

npx jixoai-ui add pattern-faq

pattern-cta

The shell-prompt CTA band: a lead block (eyebrow / heading / summary / optional outline escape) beside the install command on a CodeCard (copyable=false — the band owns exactly ONE copy affordance) with the copy PressButton in the card's footer: fill rung, copy → check flip, 1.4s copied surface. Press physics stay the button's own.

npx jixoai-ui add pattern-cta