Interactive Code Block
macOS-inspired code presentation card with instant 1-click copy feedback and vibrant theme styling.
On This Page
macOS-inspired code presentation card with instant 1-click copy feedback and vibrant theme styling.
A macOS-inspired code presentation card with instant 1-click copy feedback, syntax layout, line numbering, and vibrant theme styling.
1import { Button, AuroraBorderCard } from "nexoreui";23export function WelcomeHero() {4 return (5 <AuroraBorderCard variant="aurora" glow="medium">6 <h1 className="text-2xl font-bold">Build Faster</h1>7 <Button variant="aurora">Get Started</Button>8 </AuroraBorderCard>9 );10}
1const studio = new NexoreStudio({2 theme: "aurora",3 acceleration: "hardware-60hz",4});
1export async function queryAI(prompt: string) {2 const response = await fetch("/api/make-ai", {3 method: "POST",4 body: JSON.stringify({ prompt }),5 });6 return response.json();7}
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | - | Source code string to render inside the block. |
| filename | string | "Component.tsx" | File title displayed in the macOS titlebar. |
| theme | "dark" | "aurora" | "neon" | "glass" | "midnight" | "dark" | Visual color scheme styling. |
| showLineNumbers | boolean | true | Whether numeric line numbers are shown. |
| highlightLines | number[] | [] | Array of line numbers highlighted with subtle background tint. |
| copyable | boolean | true | Whether the copy-to-clipboard button is rendered. |