Discovery

Sort Select

A sort-order dropdown built on a native select for full accessibility. Ships with a default set of e-commerce options; pass your own items to customize.

sort

select

accessible

Preview

Installation

Run the shadcn CLI. Dependencies and the shared lib block come with it.

npx shadcn add sort-select

Usage

Import

import { SortSelect, defaultSortItems } from "@/components/lumo/sort-select"

Example

const [sort, setSort] = useState("featured")

<SortSelect value={sort} onValueChange={setSort} />

Props

Prop	Type	Default	Required
value	string	-	Required
onValueChange	(value: string) => void	-	Required
items	SortItem[]	defaultSortItems
size	"sm" \| "md"	"md"

All props accept standard HTML attributes unless otherwise specified.

Dependencies

npm packages

lucide-react

Own every line

Lumo blocks copy into your repo. No runtime dependency, no lock-in. Edit the code to fit your product.

View on GitHub Read the docs