Getting Started
Default
Text-only hint with the bundled InfoCircle icon.
import { Tip } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function TipDefaultPreview() {
return (
<PreviewLayout>
<Tip text="We only use this on your device. Nothing leaves the phone." />
</PreviewLayout>
)
}
Emphasised prefix
emphasisPrefix bolds the leading clause without breaking the layout.
import { Flex, Tip } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function TipEmphasisPreview() {
return (
<PreviewLayout>
<Flex vertical gap={12}>
<Tip
emphasisPrefix="Heads up:"
text="You can stack rewards from multiple partners on the same Boxo Pass."
/>
<Tip
emphasisPrefix="Tip:"
text="Long-press a lounge pass to add it to Apple Wallet."
/>
</Flex>
</PreviewLayout>
)
}
Inside a card
Tips slot into card layouts to highlight a single rule without dominating.
import { Tip } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function TipInCardPreview() {
return (
<PreviewLayout>
<div
style={{
background: "var(--boxo-card-mobile-background, var(--fill-1))",
borderRadius: 12,
padding: 16,
}}
>
<Tip text="This balance is rounded to the nearest 10 points. Check your statement for exact values." />
</div>
</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