Getting Started
Default
Headings map to Title*, paragraphs to Body1, list items to Body2. Backed by react-markdown.
import { Markdown } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
const CONTENT = `
## Terms of service
By tapping continue you agree to our **terms** and [privacy policy](#).
### What we collect
- Your name and email
- Booking history
- Device identifiers (for fraud prevention)
Points expire after **12 months** of inactivity. Redemptions are final.
`
export function MarkdownDefaultPreview() {
return (
<PreviewLayout>
<Markdown content={CONTENT} />
</PreviewLayout>
)
}
CMS / i18n content
Use this when copy comes from a CMS or translation catalog and you don't want to hand-render JSX. Pass componentClass to fine-tune individual elements.
import { Markdown } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
// Typical shape of copy returned from a CMS or i18n catalog.
const CONTENT = `
### Lounge benefits
Each pass includes:
1. Unlimited buffet (hot + cold)
2. Wi-Fi up to **100 Mbps**
3. Showers (subject to availability)
If you arrive **less than 3 hours** before your flight, our staff will
help you fast-track to the gate.
`
export function MarkdownCmsPreview() {
return (
<PreviewLayout>
<Markdown content={CONTENT} />
</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