OpenShadcnBlocks Documentation

Learn how to preview, copy, install, and customize free shadcn/ui components, blocks, pages, and templates with React and Tailwind CSS.

docs

Quick start

Open any component, block, page, or template and use its Preview and Code tabs to evaluate the implementation before installing it.

npx shadcn add https://openshadcnblocks.pages.dev/r/block/hero-001

Copy source

Every detail route exposes the complete editable TypeScript source. Multi-file templates include a tab for every route and shared layout file.

Customize

OpenShadcnBlocks uses semantic shadcn tokens, Tailwind CSS utilities, and ordinary React source. Change content, layout, tokens, and behavior directly in your project.