OOratiq

Code Snippet

Ready

Code with a copy button.

npx @oratiq-js/ui add code-snippet
app/page.tsx
import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button>Get started</Button>;
}

Installation

$ npx @oratiq-js/ui add code-snippet

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { CodeSnippet } from "@/components/ui/code-snippet";

Behaviour

  • Pinned dir="ltr" — code is a technical sequence and never reorders with the page's direction.
  • The copy button announces its state and falls back silently where the clipboard is unavailable.
  • inline renders a one-line command bar; block adds a labelled header and scrolls beyond maxHeight.

Props

PropTypeDefaultDescription
code*string—The text to display and copy.
labelstring—Header label (block mode).
inlinebooleanfalseOne-line command style.
maxHeightnumber—Scroll past this height.

View source on GitHub → components/ui/code-snippet.tsx