Installation

Add Chakra UI v3 to a Next.js app and drop in your first Toro UI block.

Toro UI blocks are plain Chakra UI v3 components. There is nothing to install from us at runtime — you install Chakra, add a provider, then paste blocks in.

1. Create a Next.js app

2. Install Chakra UI

3. Add the provider

Create app/provider.tsx:

Then wrap your root layout with it:

suppressHydrationWarning is required

next-themes writes the colour-mode class onto <html> before React hydrates. Without the attribute, React logs a hydration mismatch on every page load.

4. Add a block

Blocks and templates require a licence. With one, there are three ways to get the code, and they all resolve to the same source.

The CLI

The recommended route, because it is the only one that records what it installed and can therefore merge later updates into code you have edited.

See the CLI reference for how updates work.

Your coding agent

Point any MCP client at https://toro-ui.com/api/mcp and ask for what you need — it signs in with your account, no key required. See the MCP server docs.

Copy and paste

Open any block in the catalogue and switch to the Code tab. Blocks import only from @chakra-ui/react and react-icons, so there is nothing else to wire up.

Next steps

CLI

Install blocks and keep them updated.

Theming

Set your accent colour and typeface at the token level.

Handbook

Conventions every block follows.