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.
⚡️ 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
- Download this code repository and install the dependencies.
git clone https://github.com/cosmicjs/blocks
cd blocks
bun install- Create a
.env.localfile 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
- Run the app.
bun dev
Open http://localhost:3000.
Licensed under the MIT license.