QuickOpen

Go to a file by a few letters of its name, ranked like a code editor. ":120" after the name opens the file at that line.

QuickOpen

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, QuickOpen

Type “gls:40” to open a file at a line.

Dark theme, QuickOpen

Type “gls:40” to open a file at a line.

High contrast theme, QuickOpen

Type “gls:40” to open a file at a line.

UsageLink to the section Usage

tsx

import { QuickOpen } from '@skribly/ui/search'

tsx

<QuickOpen isOpen={open} onOpenChange={setOpen} shortcut paths={paths} recent={recent}
  onOpen={(path, { line }) => openFile(path, line)}
  label="Go to file" searchLabel="File name" listLabel="Files" closeLabel="Close" emptyLabel="No file matches." />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A modal dialog with a search field and a list of files.
Each file is named by its file name, then its folder, plus "recently opened" where it applies.
Matched letters are marked by weight and underline as well as colour.
Up and Down move, Enter opens, Escape closes.
The number of matches is read from a polite live region.

This demo runs through axe in all three themes on every test run. See what the tests check.