---
title: "Code Block Kit — Framer component · Best of Framer"
description: "$7.00 · Framer component · by Can Girgin · Text. Multi-tab code viewer with animated glow"
canonical: "https://framer.elliotli.dev/component/code-block-kit"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Code Block Kit

# Code Block Kit

Multi-tab code viewer with animated glow

[View on Framer](https://framer.com/marketplace/components/code-block-kit/?via=elliot-li)

![Code Block Kit preview image 1](https://framer.elliotli.dev/og/component/code-block-kit/6a33b2a0208f8057/1600x1200.jpg)

## Summary

Multi-tab code viewer with animated glow

## Description

### What’s Included

• Multi-tab code snippets with up to 8 tabs. Each tab supports its own label, language, and content• 16 supported languages: JavaScript, TypeScript, Python, C++, Go, Rust, Java, C#, PHP, Ruby, Swift, HTML, CSS, JSON, SQL, Bash• 7 built-in themes: GitHub Dark, GitHub Light, Dracula, One Dark Pro, Night Owl, Monokai, Solarized Dark• Animated glow border with adjustable speed, blur, and color• 24 customizable color overrides for syntax tokens, background, header, tabs, and buttons• Diff mode with green and red line highlighting similar to GitHub• Line highlighting by specific number or range• Hover-based line highlight for improved readability• Copy button with customizable label and animated feedback• macOS-style window controls• Multiple tab styles including underline and pill• Word wrap and max height controls• Custom font support via Framer font picker• Fully responsive across all screen sizes

### Perfect For

• API references and SDK documentation• SaaS landing pages• Developer tools and product marketing sites• Technical blogs and tutorials• Design system documentation

## Rank history [How rankings work →](/terms#rankings)

-   All · #9709

## Details

- **Author**: Can Girgin
- **Price**: $7.00
- **Published**: 2026-04-01
- **Updated**: 2026-04-01
- **Added**: 2026-03-23
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing