Getting Started
Empty
Placeholder-only state.
import { useState } from "react"
import { SearchBar } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function SearchBarEmptyPreview() {
const [value, setValue] = useState("")
return (
<PreviewLayout>
<SearchBar
value={value}
onChange={(v) => setValue(v)}
placeholder="Search rewards, stores, brands…"
/>
</PreviewLayout>
)
}
With value
A clear button appears automatically once there's content.
import { useState } from "react"
import { SearchBar } from "@appboxo/ui-kit"
import { PreviewLayout } from "./_section"
export function SearchBarFilledPreview() {
const [value, setValue] = useState("starbucks")
return (
<PreviewLayout>
<SearchBar
value={value}
onChange={(v) => setValue(v)}
placeholder="Search…"
/>
</PreviewLayout>
)
}
Installation
pnpm add @appboxo/ui-kitTheme tokens
--search-bar-input-wrapper-background-color, --search-bar-*.
Build mini-apps with Boxo
Freedom UI Kit is the design system behind partner mini-apps shipping on the Boxo platform.
Learn more about Boxo