Code Example 1 - Tabbed snippets with copy

A developer marketing section with a headline and a code window that switches between TypeScript, Python and cURL versions of the same API call, with a copy button. Use it on API landing pages to show the first request in each user’s language.

About Code Example 1

A developer marketing section with a headline and a code window that switches between TypeScript, Python and cURL versions of the same API call, with a copy button. Use it on API landing pages to show the first request in each user’s language.

Code Example 1 is a free code example block for React, built on shadcn/ui and Tailwind CSS. It ships as 104 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • code
  • tabs
  • copy
  • api
  • typescript
  • python
  • curl

Installation

  1. Add the Chocolate UI registry to your components.json (see the installation guide).
  2. Run the shadcn CLI:
npx shadcn@latest add @chocolate/code-example-01

Dependencies installed automatically: lucide-react.

Uses: button, reveal, use-copy, utils.

Usage

import CodeExample01 from "@/components/blocks/code-example-01"

export default function Page() {
  return <CodeExample01 />
}

FAQ