127 Components
Tabbed Code Block
CardsMulti-language developer code block featuring smooth sliding active tab underlines, syntax-token highlighting, line numbering, one-click copy, and an interactive simulated terminal runner.
charge.js
1import Pulse from "@pulse/sdk";
2const pulse = new Pulse("sk_test_51Mz9x8K1x4LkdI");
3
4const charge = await pulse.charges.create({
5 amount: 2000,
6 currency: "usd",
7 source: "tok_visa",
8 description: "Standard subscription tier"
9});
10
11console.log(charge.id);
Terminal Response OutputHTTP 200 OK
Press "Run API" above to dispatch a test charge and observe the JSON outcome.
Language:
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/tabbed-code-block.json"
Props
TypeScript props supported by <TabbedCodeBlock />.
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultLang | string | 'node' | Default active programming language tab ('curl', 'node', 'python', 'go'). |
| showLineNumbers | boolean | true | Whether to display line numbers alongside the code tokens. |
| className | string | — | Optional CSS classes to apply to the root container. |
Key Features
- Multi-language tabs (cURL, Node.js, Python, Go) with spring layout sliding indicator.
- Granular token-based syntax coloring without hefty runtime parsing dependencies.
- Configurable line numbering and emphasized line highlight callouts.
- One-click copy to clipboard with responsive checkmark confirmation.
- Integrated collapsible live terminal console simulating real HTTP 200 JSON API responses.
Keyboard & Accessibility
- Built with ARIA tablist, tab, and tabpanel semantic roles.
- Accessible clipboard feedback with screen-reader friendly status transitions.
- High-contrast color scheme adhering to WCAG AAA developer terminal guidelines.