Skip to content
helixui

Blocks

A block is a tightly-scoped pattern you’d otherwise re-author for every project: a sign-in form, an empty state, a pricing card, a 404 page. The same 8 helixui primitives stack into all of them.

Each block below is:

  • < 100 lines of code, often less.
  • Self-contained — no external dependencies beyond @helixui/core and @helixui/icons.
  • Token-driven — no hex codes, no px values; the cascade does the styling.
  • Copy-pasteable — paste into src/components/<name>.tsx and ship.

Catalog

BlockWhat it is
Sign-in formEmail + password + OAuth buttons + “forgot password” link.
Sign-up formEmail + password + confirm + ToS checkbox.
Empty stateFriendly explanation + a single primary action.
Pricing cardA single tier — name, price, feature list, CTA.
Stat strip3-4 KPI tiles for a dashboard header.
Notification toast listLive-region container + animated entries.
Settings rowTitle / description / control trio used in /settings pages.
Confirmation dialog”Are you sure?” — destructive variant included.
Search-result rowMulti-line result with breadcrumb and snippet.
Comment threadAvatar + meta + nested replies.

Difference from apps/site/.../showcase/*

Showcases are full apps: a Dashboard, a Messenger, a DNA Lab. You study them; you don’t copy them whole.

Blocks are fragments: 30-90 lines that solve one well-defined UX problem. You copy them and tweak.

Difference from @helixui/core components

Components are the atoms. Blocks are the molecules — opinionated arrangements of components that we found ourselves re-implementing in every project.

If a block is used in three or more projects, we promote it to a real component with a spec.md. Until then, it lives here as code you own.

Submit a block

If you have a pattern you’ve authored on helixui that’s small, clean, and useful — open a PR to apps/docs/src/content/docs/blocks/<name>.md. Format: one paragraph of context + the full code block.

We accept blocks that:

  • Solve one problem well.
  • Compile against the current helixui release.
  • Have an obvious use case.

We reject blocks that:

  • Reinvent a primitive (use the primitive).
  • Hard-code colors / spacing instead of using tokens.
  • Pull in dependencies beyond @helixui/core and @helixui/icons.