Blocks
Assembled compositions you paste in and wire up — sign-in and sign-up pages, dashboard stat rows, marketing heroes, and feature grids. Blocks are built from the same primitives you already have, and every link routes through LinkProvider so they work with any router.
Installation
Blocks ship in their own entry point so they tree-shake independently of the primitives:
Import blocks from @mikenotthepope/substrateui/blocks.
import { SignInBlock, HeroBlock, StatsBlock } from "@mikenotthepope/substrateui/blocks"
// Make links router-aware once, at the root:
import NextLink from "next/link"
import { LinkProvider } from "@mikenotthepope/substrateui"
<LinkProvider component={NextLink}>{children}</LinkProvider>Sign In
Sign Up
Stats
Revenue
$48.2k
Increase of +12% +12%
Active users
2,340
Increase of +3% +3%
Churn
1.2%
Decrease of -0.4% -0.4%
Hero
The design system that does everything
72 components, ready-made blocks, and an OKLCH token engine.
Feature Grid
Everything in the box
72 components
Atoms to organisms, accessible by default.
OKLCH tokens
Dark mode is a single token swap.
Framework-agnostic
Bring any router via LinkProvider.
Marketing · Pricing
Simple, transparent pricing
Marketing · Call to action
Marketing · Footer
Application · Activity feed
Built on the new Timeline component.
Deploy succeeded
v1.3.0 is live in production.
Published to npm
@mikenotthepope/substrateui@1.3.0
Merged #38
Version Packages.
E-commerce · Product grid
Uses the new Rating component for review scores.