Introduction

Toro UI is a collection of beautiful, expertly crafted website blocks and templates built with Next.js and Chakra UI v3.

Toro UI is a premium block and template library for teams that want to move fast without shipping generic-looking software. Every block is written as plain, readable Chakra UI v3 — no wrappers, no hidden abstractions, no lock-in.

What's inside

Blocks

Copy-and-paste sections for marketing sites, application shells, and storefronts.

Templates

Complete, production-ready Next.js starters assembled from Toro blocks.

Theme Config

Recolor and re-font the entire library, then export the token set.

AI Tooling

An llms.txt manifest, an MCP server, and agent skills.

Why Toro UI

Most component libraries optimise for the moment you install them. Toro UI optimises for the six months after — when a designer wants a different accent colour, when a new engineer needs to find the right block, and when an AI agent is asked to build a page nobody has designed yet.

  • Own the code. Blocks are copied into your repo. There is no <ToroHero /> to fight with when the brief changes.
  • Theme-aware by default. Every block reads from the token layer, so the Theme Config panel in the header restyles the whole library instantly.
  • Built for agents. Each block ships with structured metadata, and the library exposes an llms.txt manifest plus an MCP server so coding agents pick the right block instead of inventing one.

Requirements

Toro UI targets Chakra UI v3 and React 19.

DependencyVersion
React19.0 or later
Next.js15.0 or later
Chakra UI3.20 or later
TypeScript5.0 or later

Using Chakra UI v2? Blocks rely on v3 token semantics such as colorPalette and bg.panel, so a v2 project needs migrating first.

Next steps

Head to the installation guide to get set up, or browse the block library to see what is available.

Installation