Blocks are React components for building Cosmic powered websites and apps. Use Blocks to build website features such as landing pages, blogs, image galleries, events, and more.

View all Blocks

Explore the demo

⚡️ Performance optimized

👁 Draft preview ready

🛍 Ecommerce built-in

📱 Mobile responsive

🌎 Localization ready

🌓 Dark mode ready

🔧 Customizable

♿️ Accessible

🦺 Type safe

• Blog
• User management
• Landing page
• Ecommerce (powered by Stripe 🛒)
• Contact form (powered by Resend ✉️)
• Events
• FAQs
• Testimonials
• Navigation
• Comments
• Image gallery
• File upload
• and more!

• React Server Components
• Tailwind CSS
• TypeScript
• Next.js

1. Download this code repository and install the dependencies.

git clone https://github.com/cosmicjs/blocks
cd blocks
bun install

2. Create a .env.local file with your Cosmic API keys. Find these after logging in to the Cosmic dashboard in Project > API keys. (Ask Cosmic support for a bucket export file to connect Blocks dynamic content.)

cp .env.example .env.local

It will look like this:

# .env.local
NEXT_PUBLIC_SOURCE_BUCKET_SLUG=change_to_your_bucket_slug
NEXT_PUBLIC_SOURCE_READ_KEY=change_to_your_bucket_read_key

3. Run the app.

bun dev

Open http://localhost:3000.

Licensed under the MIT license.