Command Search Spotlight

A centered feature with an eyebrow, a light-weight heading, and a paragraph sitting above a wide image tile. A command search bar floats over the bottom edge of the tile, and a row of quick-filter chips sits below the whole visual.

By Staaarter Team

Feature

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/command-search-spotlight.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature25.tsx instead.

Usage

The file also exports feature25Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature25, feature25Demo } from "@/components/blocks/feature/feature25";

export default function Page() {
  return <Feature25 {...feature25Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small label above the heading.
heading	ReactNode	none	Section heading, rendered with a lighter font weight than most other blocks.
description	string	undefined	Supporting paragraph under the heading.
searchPlaceholder	string	"Search anything..."	Static text shown inside the decorative search bar.
quickFilters	string[]	[]	Chip labels shown in the row under the image tile.
className	string	none	Extra classes for the outer section element.

Behavior notes

The image tile is an abstract placeholder (a centered dashboard icon on a tinted background), not a real screenshot; swap in a real photo or product capture via your own image if you copy this block.
The command search bar and the quick-filter chips are entirely decorative: the input is read-only with a fixed value and there is no real search logic behind it.
This is a plain Server Component with no client-side state; every element you see is static markup, nothing responds to interaction.

More Feature Blocks

View all →

Full-Bleed Workspace Band

Two-column header above a full-bleed image band with a live view switcher, closing on three numbered captions.

Center-Line Journey Timeline

Vertical hairline timeline alternating stages either side, dropping a phone frame on one step.

Figure-Led Evidence Rows

Tall image with a floating before-and-after card, leading into oversized-figure evidence rows.

Staircase Asset Trio

Three image tiles stepping down the page in a staircase, each floating a different live asset.

Sticky Reference List

Sticky heading column beside three labelled groups of checked capabilities, closing on a footnote.

Day Timeline Rows

Hairline rows walking through one working day, stamped with time and a live approval card inline.