hyzrui
GitHub
HomeDocsSearch Bar

Navigation

Search Bar

A command-style search overlay without page blur or heavy visual effects.
Live example
import { SearchBar } from "@hyzrui/core";
 
export function Example() {
  return <SearchBar items={[{ group: "Docs", label: "Button", href: "/docs/components/button" }]} placeholder="Search components..." />;
}

Installation

Install the primitive source, then keep editing it inside your app. The command names the component file you want copied.

Command
pnpm dlx hyzrui add search-bar

Usage

Import the component from the generated source folder and compose it with normal React props.

Import
import { SearchBar } from "@hyzrui/core";
Usage
<SearchBar className="my-search-bar" />

Customization

Every primitive accepts local props and class names, then inherits design tokens from HyzrThemeProvider . Copy the file, keep the markup, and tune the CSS until it matches your product.

Radius--hui-radiusControls the default corner system for buttons, inputs, cards, overlays, and nested surfaces.
Foreground--hui-foregroundControls the page and component text colors. Dark mode uses the same component source with different tokens.
Surface--hui-surfaceControls card, dialog, popover, and input surfaces.
Border--hui-borderControls separators, input strokes, card outlines, and menu edges.
Primary--hui-primaryControls the main action color and the matching foreground color for solid controls.
Font--hui-font-familyControls the font stack used by every primitive inside the provider.
Control size--hui-control-font-sizeControls the default font size for buttons, inputs, selects, tabs, command rows, and menu triggers.
Control weight--hui-font-weight-controlControls the default weight of buttons, tabs, menus, badges, and compact actions.
Control height--hui-control-heightControls the default field and trigger height across forms and navigation.
Button height--hui-button-heightControls button height independently from form fields.
Button padding--hui-button-paddingControls horizontal button spacing without changing the text size.
Card padding--hui-card-paddingControls card, dialog, sheet, drawer, and panel interior spacing.
Border width--hui-border-widthControls default edge width for controls, cards, tables, and floating panels.
Focus width--hui-focus-widthControls keyboard focus outline thickness.
Motion duration--hui-transition-durationControls shared hover timing for controls and surfaces.
Hover lift--hui-hover-liftControls subtle hover lift for raised styles.
Overlay--hui-overlayControls dialog, sheet, drawer, and command overlay strength.
Floating offset--hui-floating-offsetControls menu, command, popover, and hover-card distance from the trigger.
Source fileEdit src/lib/hyzrui/components/search-bar.tsx directly once the primitive is installed in your app.
Local classTarget .hui-search-bar for local refinements that should not become global theme tokens.
Theme tokens
import { defineHyzrTheme } from "@hyzrui/core";
 
export const theme = defineHyzrTheme({
  id: "product",
  density: "comfortable",
  radius: 10,
  shadow: 0.08,
  colors: {
    background: "#fbfbfc",
    foreground: "#09090b",
    surface: "#ffffff",
    border: "#e4e4e7",
    primary: "#18181b",
    primaryForeground: "#ffffff",
  },
  typography: {
    controlSize: 14,
    controlWeight: 500,
    headingWeight: 680,
  },
  sizing: {
    controlHeight: 38,
    buttonHeight: 34,
    buttonPadding: 14,
    cardPadding: 18,
  },
  borders: {
    radius: 10,
    radiusSm: 7,
    radiusLg: 16,
    width: 1,
    focusWidth: 2,
  },
  motion: {
    duration: 150,
    hoverLift: 0,
    hoverMix: 5,
  },
});

See the customization guide for the full theme shape, style presets, scoped CSS overrides, and source-edit workflow.

Examples

These examples show the same primitive in realistic combinations and states.

Global search

A command-style search trigger with a keyboard shortcut hint and grouped results.

Global search
import { SearchBar } from "@hyzrui/core";
 
export function GlobalSearch() {
  return (
    <SearchBar
      placeholder="Search docs and components…"
      shortcut="K"
      items={[
        { group: "Components", label: "Button", href: "/docs/components/button" },
        { group: "Components", label: "Dialog", href: "/docs/components/dialog" },
        { group: "Guides", label: "Theming", href: "/docs/customization" },
      ]}
    />
  );
}

API Reference

Props are intentionally small. For deeper changes, edit the component source file directly.

PropTypeDefaultDescription
classNamestring-Adds classes to the copied component without replacing the default structure.
childrenReact.ReactNode-The rendered content for compound or wrapper components.
...propsHTMLAttributes-Forwards native element props such as id, aria attributes, and event handlers.
itemsSearchBarItem[]-Searchable items.
shortcutstringKShortcut label shown in the trigger.
onSelect(item: SearchBarItem) => void-Called when a result is selected.