Pro Blocks
Discover shadcn/ui blocks crafted with React and Figma. Elevate your projects with pixel-perfect, prebuilt components for lightning-fast development and stunning designs.
Pro Blocks (code)
Getting started
- Ensure shadcn/ui is installed in your project. If not, install it now.
- Once your shadcn/ui project is installed, install styles dedicated for Pro Blocks. Copy this CLI command:
npx shadcn@latest add “https://pro-blocks-v4.vercel.app/r/pro-blocks-styles.json”
- Run the command in your project’s terminal - it will install the classes used in our Landing Page blocks.
- Go to our Pro Blocks page, for example Hero Sections.
- Copy the selected Pro Block CLI command.
- Paste the CLI command in your shadcn/ui project’s terminal.
- Find and copy your license key. If you purchased the Premium package, you can find it in My Orders page after logging in to Lemon Squeezy.
- Paste your license key after the
“key=”
in your project’s terminal. For example:npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-1&key=YOUR_LICENSE_KEY"
- Run the command and follow the instructions in the terminal.
- If your license key is valid, the component will be installed in your project.
Install multiple blocks at once
You can install multiple Pro Blocks at once. Use component names separated by "+". For example, to install Hero Section 4 and Feature Section 2:
npx shadcn@latest add "https://shadcndesign-pro-blocks.vercel.app/components?name=hero-section-4+feature-section-2&key=YOUR_LICENSE_KEY"