Blocks are compositions, not exports.

Lift a starting point into your app, then keep the pieces you need. Every preview below is a real, interactive React component — no props, no context, its own state — organised by what you are building rather than by component name.

Blocks / Landing

Navbars

Top-level navigation, from a bare wordmark to a split bar with search.

17 blocks

landing/navbars/navbar-splitInput · Button

acme

$npx grassroot block add landing/navbar-split

Why blocks stay separate

Components are contract surfaces. Blocks are opinionated compositions. Keeping them apart means a component can remain stable while a block changes with the product.

Use the CLI

$ npx grassroot block add app/sidebar-console
  wrote src/blocks/sidebar-console.tsx
  0 new dependencies