Content & Dashboard

Code Block with Copy Button

Styled pre/code block with a filename bar and a copy button with a real success state, no syntax highlighter bundled.

Subscription Included with the Velocity Components subscription.

bash

$ velocityx add code-block-copy

Built for react. Needs react already installed as a peer dependency. An Astro-only project needs @astrojs/react wired up first — this won't run on its own in plain Astro.

Full docs for Code Block with Copy Button →

Needs a licence key — subscribe here, then velocityx loginonce.

react v1.0.0 react

Code Block with Copy Button

supabase.ts

export function getSupabase() {
  if (!PUBLIC_SUPABASE_URL || !PUBLIC_SUPABASE_ANON_KEY) {
    return createStubClient(); // never throw — chrome must render with no env
  }
  return createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY);
}

Props

Name	Type	Required	Default	Description
code	string	No	DEFAULT_CODE	raw code — always used for the copy action
codeNode	ReactNode?	Yes		optional pre-highlighted markup for display only
language	string?	No	'ts'	shown in the top bar
filename	string?	Yes		shown in the top bar, takes precedence over language label
className	string	No	''

File this creates

The CLI writes this path into your project, relative to its root — nothing else moves.

text

components/velocity/code-block-copy/CodeBlockCopy.jsx

Using the Code Block with Copy Button component

Install it with velocityx add code-block-copy. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Code Block with Copy Button

Props

File this creates

Using the Code Block with Copy Button component

Related components