Solid hero blocks.

The 150 hero blocks open a page: a headline, a sentence and a call to action, with something beside or below them that proves the claim, such as a product window, a code preview, a phone, logos or a signup field. Pick the layout that matches what you have to show.

They are grouped into 14 kinds: Product windows, Code and terminal, Mobile and media, Diagrams and maps, Interactive demos, Features and tables, and more. Copy is centred or split, and the proof element varies from screenshots and terminals to counters, quotes and pricing.

For a SaaS app, Split Layout Browser Frame Hero shows the product in a browser window. For a developer tool, Split Code Preview Hero and Install Command Hero show code and an install line. For a mobile app, Split Phone Frame Hero. For a newsletter, Centered Email Capture Form Hero. For a video, Video Modal Hero.

A comment describes the layout, then typed constants hold the copy, the logos, stats or avatars and the demo content, and the component follows. The product shown is a made-up one, and the pictures are drawn in markup rather than loaded from image files.

The product windows, phones and diagrams are drawn with markup and Tailwind, so replace the drawn element with an img or next/image of your screenshot, inside the same frame. Give it an alt that says what the screenshot shows. Only Video Modal Hero is built around video.

Video Modal Hero opens the walkthrough in a dialog with a player frame, and a comment in the file marks where the player goes: a video element with controls and captions, or a titled iframe. Replace the drawn poster with your own thumbnail and set the video's source there.

Centered Email Capture Form Hero checks the address, shows a spinner and then a confirmation, but only stands in for a call with a short timer. Replace that timer with a request to your email service and set the done or error state from the response.

Typewriter Hero types, deletes and retypes the last word of the headline with a button to pause it, and Logo Marquee Hero scrolls logos with a pause button. Change the word or the logo list in the file's constants.

Primary actions use the shared Shine Button and secondary ones a plain button or link. Set the label and href on each, and for a hero with a billing toggle such as Centered Billing Period Toggle Hero, change the plan data so the price matches your plans.

This page lists 150 of the category's 150 hero blocks for Solid. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Solid hero blocks are the React ones ported to Solid, on Ark UI's Solid primitives. They keep the layout, the copy and the theme tokens, and install with shadcn (/r/solid/hero-animated-counter.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Solid needs solid-js @ark-ui/solid lucide-solid installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn@latest add` with the block's registry URL, such as /r/solid/hero-animated-counter.json for Animated Counter Hero. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of hero block, led by product windows (16), code and terminal (14), interactive demos (14) and stats and live data (14), and sort by popular or name. A good first look: Animated Counter Hero, Reverse Split News List Hero and Dismissible Announcement Bar Hero. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a hero block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the showcase, proof and conversion kinds.

Open its page and use the full-screen viewer (/view/hero/solid/animated-counter) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each hero block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the hero blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 150 hero blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a hero block, read it with get_block and install it on your Solid stack.

Pass `category: "hero"` to search_blocks to search only the 150 hero blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "hero", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.