/blocks

React components for building Cosmic powered websites and apps.

Primary LanguageTypeScriptMIT LicenseMIT

Blocks

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.

Get started

View all Blocks

Explore the demo

Features

⚡️ Performance optimized

👁 Draft preview ready

🛍 Ecommerce built-in

📱 Mobile responsive

🌎 Localization ready

🌓 Dark mode ready

🔧 Customizable

♿️ Accessible

🦺 Type safe

Blocks include

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

Built with

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

Contributing

  1. Download this code repository and install the dependencies.
git clone https://github.com/cosmicjs/blocks
cd blocks
bun install
  1. 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
  1. Run the app.
bun dev

Open http://localhost:3000.

License

Licensed under the MIT license.