https://github.com/pheralb/code-blocks

🍪 A set of UI components & utilities to show your code beautifully.
https://github.com/pheralb/code-blocks

code-block mdx nextjs react shiki sugar-high turborepo typescript

Last synced: 5 days ago
JSON representation

🍪 A set of UI components & utilities to show your code beautifully.

• Host: GitHub
• URL: https://github.com/pheralb/code-blocks
• Owner: pheralb
• License: mit
• Created: 2025-01-27T00:58:44.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2026-02-11T23:51:36.000Z (13 days ago)
• Last Synced: 2026-02-12T09:28:19.528Z (12 days ago)
• Topics: code-block, mdx, nextjs, react, shiki, sugar-high, turborepo, typescript
• Language: TypeScript
• Homepage: https://code-blocks.pheralb.dev
• Size: 3.04 MB
• Stars: 60
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          


  

    

  

  


  


    

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

    

  


Get Started

  ✦  

Components

  ✦  

Blocks

  ✦  

Contributing

  ✦  

License







![Next.js Badge](https://img.shields.io/badge/Docs-000?logo=nextdotjs&logoColor=fff&style=flat)

![Tailwind CSS Badge](https://img.shields.io/badge/Styles-06B6D4?logo=tailwindcss&logoColor=fff&style=flat)

![React Badge](https://img.shields.io/badge/Components-61DAFB?logo=react&logoColor=000&style=flat)

![TypeScript Badge](https://img.shields.io/badge/Utilities-3178C6?logo=typescript&logoColor=fff&style=flat)

[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fpheralb%2Fcode-blocks%2Fbadge%3Fref%3Dmain&style=flat)](https://actions-badge.atrox.dev/pheralb/code-blocks/goto?ref=main)

![GitHub stars](https://img.shields.io/github/stars/pheralb/code-blocks)

![GitHub issues](https://img.shields.io/github/issues/pheralb/code-blocks)



## 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](https://github.com/shikijs/shiki) & [Sugar-High](https://github.com/huozhi/sugar-high/)**: Choose your syntax highlighter.

- ⚙️ [**shadcn/ui**](https://ui.shadcn.com) 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](https://github.com/pheralb/code-blocks/blob/main/CONTRIBUTING.md) and [Code of Conduct](https://github.com/pheralb/code-blocks/blob/main/CODE_OF_CONDUCT.md).

### Development Setup

1. Clone the repository:

```bash

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

cd code-blocks

```

2. Install dependencies:

```bash

# Install pnpm globally if you haven't already:

npm i pnpm@latest -g

# Install project dependencies:

pnpm install

```

3. Start the development server:

```bash

pnpm dev

```

### Commands

- `pnpm dev`: Start the development server for the docs website.

- `pnpm website:build`: Build the docs website for production.

- `pnpm website:build-cc`: Build content using content-collections CLI.

- `pnpm website:build-registry`: Build the component and block registry.

### Contributors



  



## License

This project is licensed under the MIT License. See the [LICENSE](https://github.com/pheralb/code-blocks/blob/main/LICENSE) file for details.