https://github.com/cosmicjs/blocks
React components for building Cosmic powered websites and apps.
https://github.com/cosmicjs/blocks
api headless-cms nextjs react tailwindcss
Last synced: 6 months ago
JSON representation
React components for building Cosmic powered websites and apps.
- Host: GitHub
- URL: https://github.com/cosmicjs/blocks
- Owner: cosmicjs
- License: mit
- Created: 2023-10-05T15:54:34.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-12T18:38:02.000Z (about 1 year ago)
- Last Synced: 2025-06-10T09:18:56.073Z (7 months ago)
- Topics: api, headless-cms, nextjs, react, tailwindcss
- Language: TypeScript
- Homepage: https://blocks.cosmicjs.com
- Size: 68.6 MB
- Stars: 20
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Blocks
[Blocks](https://blocks.cosmicjs.com) 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](https://blocks.cosmicjs.com)
[Explore the demo](https://cosmic-agency-template.vercel.app)
## 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.
```bash
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](https://app.cosmicjs.com/?redirect_to=?highlight=api-keys). (Ask [Cosmic support](https://www.cosmicjs.com/contact) 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](http://localhost:3000).
## License
Licensed under the [MIT license](https://github.com/cosmicjs/blocks/blob/main/LICENSE).