A code-block UI component. Copy-Paste. Customizable.

Get Started   ✦   Components   ✦   Blocks   ✦   Contributing   ✦   License

Features

• 📋 Copy-Paste: Copy code with a single click, it's 100% yours.
• 🎨 Customizable: Styled with Tailwind CSS, easily customize it to fit your design.
• 📦 Components & Blocks: Basic structure and blocks for building your own code-block UI.
• 🖌️ Shiki & Sugar-High: Choose your syntax highlighter.
• ⚙️ shadcn/ui compatible: Add components and utilities using shadcn/ui CLI.

Contributing

We welcome contributions to enhance the functionality, design, and documentation of this project. To contribute, please read our Contributing Guide and Code of Conduct.

Development Setup

1. Clone the repository:

git clone git@github.com:pheralb/code-blocks.git
cd code-blocks

2. Install dependencies:

# Install pnpm globally if you haven't already:
npm i pnpm@latest -g

# Install project dependencies:
pnpm install

3. Start the development server:

pnpm dev

Commands

• pnpm dev: Start the development server for the docs website.
• pnpm website:build-registry: Build the component and block registry.
• pnpm website:build: Build the docs website for production.
• pnpm website:build-cc: Build content using content-collections CLI.

License

This project is licensed under the MIT License. See the LICENSE file for details.