File Search

A search box that streams matching keys with substring, glob, regex and exact match modes plus a case-sensitivity toggle - driven by useFiles.

Streams search() results into a list. Switch between substring, glob, regex and exact matching, toggle case sensitivity, and the previous search is aborted the moment a new one starts.

"use client";

import { useState } from "react";

import { demoFiles } from "@/lib/demo-files";
import { FileSearch } from "@/registry/files-sdk/file-search/file-search";

const Example = () => {
  const files = demoFiles;
  const [selected, setSelected] = useState<string>();

  return (
    <div className="flex flex-col gap-3">
      <FileSearch files={files} onSelect={(file) => setSelected(file.key)} />
      {selected && (
        <p className="text-muted-foreground text-xs">Selected: {selected}</p>
      )}
    </div>
  );
};

export default Example;

Installation

npx shadcn@latest add https://files-sdk.dev/r/file-search.json

Usage

import { useFiles } from "files-sdk/react";

import { FileSearch } from "@/components/files-sdk/file-search";

export function Search() {
  const files = useFiles({ endpoint: "/api/files" });

  return (
    <FileSearch
      files={files}
      prefix="docs/"
      defaultMatch="glob"
      onSelect={(file) => console.log(file.key)}
    />
  );
}

Matching runs over keys, not contents — the same four modes search() exposes. Scope a search with prefix to keep it cheap on large buckets, and maxResults caps how many matches are collected per run.

Props