Code block

1npx uix-ui@latest init2npx uix-ui@latest add button card

import { CodeBlock } from "@/components/ui/code-block";

export default function Example() {
  return (
    <div style={{ width: 460, maxWidth: "100%" }}>
      <CodeBlock filename="add-tea.sh" code={"npx uix-ui@latest init\nnpx uix-ui@latest add button card"} />
    </div>
  );
}

#Installation

$ npx uix-ui@latest add code-block

This copies the file into components/ui/code-block.tsx in your project. npx shadcn@latest add @uix/code-block works too.

#Usage

import { CodeBlock } from "@/components/ui/code-block";

<div style={{ width: 460, maxWidth: "100%" }}>
  <CodeBlock filename="add-tea.sh" code={"npx uix-ui@latest init\nnpx uix-ui@latest add button card"} />
</div>

#Props

Everything else is passed to the root element, so className, aria-* and event handlers work as usual.

#Dependencies

Installed for you by the CLI.

• class-variance-authority
• clsx
• tailwind-merge

• lib/utils.ts
• components/ui/icons.tsx