Custom Code Block: Free Utilities Component by Blank.Design

A highly customizable, interactive code snippet component designed for Framer. It features built-in syntax highlighting, smart theme presets, and a premium UI, making it perfect for developer portfolios, documentation, and tech blogs.

About this Component

Custom Code Block Component

A highly customizable, interactive code snippet component designed for Framer. It features built-in syntax highlighting, smart theme presets, and a premium UI, making it perfect for developer portfolios, documentation, and tech blogs.

Key Features:

Multi-Language Syntax Highlighting: Built-in custom tokenizer with support for JS, TS, JSX, TSX, CSS, HTML, JSON, and Plain Text.
Smart Theming: Instantly switch between pre-configured "Dark" and "Light" modes featuring a vibrant pastel color palette. Selecting "Custom" unlocks granular control over all background, text, and selection colors.
Interactive Copy Button: Includes a fully functional, zero-setup "Copy to Clipboard" button with customizable labels, colors, and a timed success state.
Mac-Style Window Header: A sleek, toggleable header with an adjustable title and optional macOS-style decorative window dots.
Elegant Scroll & Fade Overlay: Handles long code snippets gracefully with seamless scrolling and a fixed, automatic gradient fade at the bottom (up to 70% opacity) for a polished look.
Granular Styling Control: Easily toggle line numbers and text wrapping, or adjust the border radius, border thickness, and inner padding directly from the Framer property panel.