Next.js Search Bar with shadcn/ui Example

In this tutorial, we’ll explore how to integrate a search bar into Next.js with Shadcn UI. To begin, you’ll need to set up a Next.js 13 project with Shadcn UI.

Before utilizing the search input feature in Next.js 13 with Shadcn UI, ensure you install the latest version of Shadcn UI by running npx shadcn-ui@latest add input.

npx shadcn-ui@latest add input
# or
npx shadcn-ui@latest add

NextJS with Shadcn UI Search Bar Example

1. To create a search bar in Next.js 13 with Shadcn UI, we’ll utilize Shadcn UI’s Input and Button components.

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function SearchBar() {
  return (
    <div className="flex items-center space-x-2">
      <Input type="text" className="px-3 py-2 w-80" placeholder="Search..." />
      <Button className="px-3 py-2">Search</Button>
    </div>
  )
}

2. Implement the search bar in Next.js with Shadcn UI, integrating a search icon for a more intuitive user experience.

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function SearchBar() {
  return (
    <div className="flex items-center space-x-2">
      <Input type="text" className="px-3 py-2 w-80" placeholder="Search..." />
      <Button className="px-3 py-2">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          strokeWidth={1.5}
          stroke="currentColor"
          className="w-6 h-6"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
          />
        </svg>
      </Button>
    </div>
  )
}

3. Next.js with Shadcn UI, embed a search icon within the search bar for enhanced visual appeal and functionality.

import { Input } from "@/components/ui/input"

export default function SearchBar() {
  return (
    <div className="relative w-80">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className="absolute top-0 bottom-0 w-6 h-6 my-auto text-gray-500 left-3"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
        />
      </svg>
      <Input type="text" placeholder="Search" className="pl-12 pr-4" />
    </div>
  )
}

Sources

shadcn/ui Input (ui.shadcn.com/docs)
shadcn/ui button (ui.shadcn.com/docs)

NextJS with Shadcn UI Search Bar Example

Aaronn