Getting Started
Inline reference
Wrap any text — clicking copies the value to clipboard. If a haptic handler is registered via setHapticHandler, a "light" impact fires on success.
import { Body1, Body2, Card, Copyable, Flex } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function CopyableInlinePreview() {
return (
<PreviewLayout>
<Card>
<Flex vertical gap={12}>
<Flex vertical={false} gap={12} align="center">
<Body2 color="text-3">Booking ID</Body2>
<Copyable text="BKG-7F3A-92EE-114B">
<Body1 style={{ fontFamily: "ui-monospace, monospace" }}>
BKG-7F3A-92EE-114B
</Body1>
</Copyable>
</Flex>
<Flex vertical={false} gap={12} align="center">
<Body2 color="text-3">Referral code</Body2>
<Copyable text="BOXO-NURS-2026">
<Body1 style={{ fontFamily: "ui-monospace, monospace" }}>
BOXO-NURS-2026
</Body1>
</Copyable>
</Flex>
</Flex>
</Card>
</PreviewLayout>
)
}
Long string
Useful for opaque tokens / signed URLs / long IDs.
import { Body1, Card, Copyable } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function CopyableLongPreview() {
return (
<PreviewLayout>
<Card>
<Copyable text="ey0a73c4b8d2e1f5h6j9k0l1m2n3o4p5q6r7s8t9u0v1w2x3y4z5">
<Body1
style={{
fontFamily: "ui-monospace, monospace",
wordBreak: "break-all",
}}
>
ey0a73c4b8d2e1f5h6j9k0l1m2n3o4p5q6r7s8t9u0v1w2x3y4z5
</Body1>
</Copyable>
</Card>
</PreviewLayout>
)
}
Installation
pnpm add @appboxo/ui-kitBuild mini-apps with Boxo
Freedom UI Kit is the design system behind partner mini-apps shipping on the Boxo platform.
Learn more about Boxo