Code Block

A syntax-highlighted code block with header, line numbers, copy button, and fade gradient. Supports dark/light themes and multiple languages.

Feature Sectionshovercodesyntaxhighlightcopysnippetdarklight

Code Block — Variant 1

Example
import React, { useState } from 'react';
 
export default function PricingCard() {
  const [isYearly, setIsYearly] = useState(false);
 
  return (
    <div className="pricing-card">
      <h3>Pro Plan</h3>
      <p className="price">
        ${isYearly ? '99' : '12'}
        <span className="duration">
          /{isYearly ? 'year' : 'month'}
        </span>
      </p>
 
      <button onClick={() => setIsYearly(!isYearly)}>
        Toggle Billing
      </button>
 
      <ul className="features">
        <li>Unlimited Projects</li>
        <li>Priority Support</li>
      </ul>
    </div>
  );
}

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

theme

Color theme preset.

Code Block — Variant 2

Example
import React, { useState } from 'react';
 
export default function PricingCard() {
  const [isYearly, setIsYearly] = useState(false);
 
  return (
    <div className="pricing-card">
      <h3>Pro Plan</h3>
      <p className="price">
        ${isYearly ? '99' : '12'}
        <span className="duration">
          /{isYearly ? 'year' : 'month'}
        </span>
      </p>
 
      <button onClick={() => setIsYearly(!isYearly)}>
        Toggle Billing
      </button>
 
      <ul className="features">
        <li>Unlimited Projects</li>
        <li>Priority Support</li>
      </ul>
    </div>
  );
}

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

theme

Color theme preset.

Code Block — Variant 3

Example
{
  "name": "nexus-labs",
  "version": "1.0.0",
  "dependencies": {
    "react": "^18.0.0",
    "framer-motion": "^11.0.0"
  }
}

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

theme

Color theme preset.

Animation effects

hover

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.