Collection controls

Stable

Native search, filter and sort controls that collapse their options in narrow containers.

$ npx shadcn add @klarhimmel/collection-controls

Preview

collection-controls.tsx

import { Theme } from '@/components/klarhimmel/theme/style';
import { CollectionControls } from '@/components/klarhimmel/ui/collection-controls';

export default function Example() {
  return (
    <Theme theme="brand">
      <CollectionControls search={{ name: "q", label: "Search articles", placeholder: "Find an article…" }} sort={{ name: "sort", label: "Sort by", options: [{ value: "newest", label: "Newest first" }] }} />
    </Theme>
  );
}

Install

Import

$import { CollectionControls } from '@/components/klarhimmel/ui/collection-controls';

Lands in: components/klarhimmel/ui/collection-controls.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in: Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

API reference

Prop	Type	Default	Description
`search`	`{ name, label, placeholder?, inputProps? }`	`required`	A named native search input, always visible.
`choices`	`{ name, label, options, defaultValue }`	`-`	Optional radio choices with counts.
`filters / sort`	`CollectionSelect[] / CollectionSelect`	`-`	Named native selects with labels and options.
`disabled`	`boolean`	`false`	Keep controls disabled until the application’s filtering is ready.
`disclosureLabel / resetLabel`	`string`	`Filters & sort / Clear filters`	Disclosure and reset labels. Empty resetLabel omits the reset button.
`className`	`string`	`-`	Extra classes, merged after the component's own.