# Marketing Code Showcase

Developer landing page section showing a code example in tabs with a copy button.

- id: `marketing-code-showcase`
- Page: https://agentic-ui-kit.com/components/marketing-code-showcase
- Live preview: https://agentic-ui-kit.com/live/component/marketing-code-showcase?piece=marketing-code-showcase

## Install

```bash
agentic-ui add marketing-code-showcase
npx shadcn@4.17.0 add @agentic-ui/marketing-code-showcase
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york), Base UI (registry variant base-vega)
- **Capabilities:** code-tabs, syntax-highlight, line-numbers, copy-to-clipboard, file-captions, numbered-highlights, dark-mode
- **Intents:** communicate, explore-detail
- **Suits domains:** marketing, devtools, ai-agents, saas
- **Interaction:** click, copy-to-clipboard, keyboard-navigation
- **Screen role:** overview
- **Density:** comfortable
- **Dark mode:** yes
- **Use it for:** developer landing page section showing a code example in tabs with a copy button, show how easy our SDK is to use with a few files of example code on the homepage, code snippet showcase with syntax highlighting for a developer tool marketing site
- **Avoid when:** full documentation pages with long code (use a docs layout), editable code (use code-diff-viewer or an editor), audiences who do not read code
- **Preserve when adapting:** aria-tabs, focusable-code-region
- **Replace when adapting:** copy, files, highlights, cta-link
- **Adaptation effort:** low
- **Coupling:** low
- **Quality breakdown:** visual 9/10, responsive 9/10, accessibility 9/10, code 9/10
- **Uses primitives:** button
- **npm dependencies:** lucide-react
- **npm dependencies (registry):** lucide-react@0.577.0
- **Registry dependencies:** lib-primitives