Search Results

Search interface with input, result cards, and result count.

Preview

Search in your library

Filter results by category and query.

Dashboard overview

Landing

A marketing layout built for high-contrast product launches.

User onboarding flow

Onboarding

An onboarding flow with bold CTAs and clear guidance.

Tiered pricing table

Pricing

Pricing table with sharp comparisons and highlights.

Hyperwave search

Landing

Search UX with punchy filters and clean cards.

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/search-results.json

Usage

search-results-demo.tsx
import SearchResults from "@/components/blocks/search-results"

export default function SearchResultsDemo() {
  return (
    <SearchResults
      // Update copy and results as needed.
      title="Search in your library"
      description="Filter results by category and query."
      queryPlaceholder="Search blocks, docs, or templates..."
      results={[
        {
          title: "Dashboard overview",
          description:
            "A marketing layout built for high-contrast product launches.",
          tag: "Landing",
        },
        {
          title: "User onboarding flow",
          description: "An onboarding flow with bold CTAs and clear guidance.",
          tag: "Onboarding",
        },
        {
          title: "Tiered pricing table",
          description: "Pricing table with sharp comparisons and highlights.",
          tag: "Pricing",
        },
        {
          title: "Hyperwave search",
          description: "Search UX with punchy filters and clean cards.",
          tag: "Landing",
        },
      ]}
    />
  )
}
0