Code

Inline code and multi-line code blocks with copy-to-clipboard.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Import the component using @payglocal_ui/flux-ui and wrap with TooltipProvider.

example.tsxtsx

import { Button } from "@payglocal_ui/flux-ui";

export function MyPage() {
  return <Button variant="primary">Get started</Button>;
}

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import { Code, CodeBlock } from "@payglocal_ui/flux-ui";

Example

{/* Inline */}
<p>Pass the <Code>amount</Code> as a number in paise.</p>

{/* Block */}
<CodeBlock language="json">
  {JSON.stringify({ status: "SUCCESS", txnId: "TXN123" }, null, 2)}
</CodeBlock>