Apple Spotlight

A macOS-style spotlight search component with animated shortcuts and search results. Features a beautiful blur effect, animated shortcut buttons, and live search results.

Component preview

Install using CLI

npx shadcn@latest add "https://www.obsidianui.dev/r/apple-spotlight.json"

Install Manually

Install dependencies

npm install motion lucide-react clsx tailwind-merge

Add util file

Create a file lib/utils.ts:

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}

Copy the source code

Copy the code into components/block/apple-spotlight.tsx

Usage

Code

1import { AppleSpotlight } from "@/components/block/apple-spotlight"
2import { useState } from "react"
3
4export function Demo() {
5const [isOpen, setIsOpen] = useState(false)
6
7return (
8  <>
9    <button onClick={() => setIsOpen(true)}>Open Spotlight</button>
10    <AppleSpotlight isOpen={isOpen} handleClose={() => setIsOpen(false)} />
11  </>
12)
13}

Props

Prop	Type	Default	Description
isOpen	`boolean`	`true`	Controls visibility of spotlight
handleClose	`() => void`	`-`	Callback when spotlight is closed
shortcuts	`Shortcut[]`	`default shortcuts`	Array of shortcut buttons