MCPcopy Index your code
hub / github.com/emilkowalski/vaul

github.com/emilkowalski/vaul @v1.1.2 sqlite

repository ↗ · DeepWiki ↗ · release v1.1.2 ↗ · + Follow
102 symbols 257 edges 48 files 3 documented · 3% 58 cross-repo links
README

https://github.com/emilkowalski/vaul/assets/36730035/fdf8c5e8-ade8-433b-8bb0-4ce10e722516

Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices. You can read about why and how it was built here.

Usage

To start using the library, install it in your project:,

npm install vaul

Use the drawer in your app.

import { Drawer } from 'vaul';

function MyComponent() {
  return (
    <Drawer.Root>
      <Drawer.Trigger>Open</Drawer.Trigger>
      <Drawer.Portal>
        <Drawer.Content>
          <Drawer.Title>Title</Drawer.Title>
        </Drawer.Content>
        <Drawer.Overlay />
      </Drawer.Portal>
    </Drawer.Root>
  );
}

Documentation

Find the full API reference and examples in the documentation.

Extension points exported contracts — how you extend this code

PreventScrollOptions (Interface)
(no doc)
src/use-prevent-scroll.ts
DrawerContextValue (Interface)
(no doc)
src/context.ts
Style (Interface)
(no doc)
src/helpers.ts
SnapPoint (Interface)
(no doc)
src/types.ts
WithFadeFromProps (Interface)
(no doc)
src/index.tsx
WithoutFadeFromProps (Interface)
(no doc)
src/index.tsx

Core symbols most depended-on inside this repo

isVertical
called by 20
src/helpers.ts
set
called by 19
src/helpers.ts
openDrawer
called by 12
test/tests/helpers.ts
closeDrawer
called by 7
src/index.tsx
useDrawerContext
called by 6
src/context.ts
addEvent
called by 5
src/use-prevent-scroll.ts
getTranslate
called by 4
src/helpers.ts
getScale
called by 4
src/index.tsx

Shape

Function 96
Interface 6

Languages

TypeScript100%

Modules by API surface

src/index.tsx23 symbols
src/use-prevent-scroll.ts15 symbols
src/helpers.ts9 symbols
src/browser.ts7 symbols
src/use-snap-points.ts5 symbols
test/src/app/with-scaled-background/page.tsx3 symbols
test/src/app/parent-container/page.tsx3 symbols
test/src/app/open-another-drawer/page.tsx3 symbols
src/use-scale-background.ts3 symbols
src/use-controllable-state.ts3 symbols
src/use-composed-refs.ts3 symbols
test/tests/helpers.ts2 symbols

Dependencies from manifests, versioned

@playwright/test1.37.1 · 1×
@radix-ui/react-dialog1.1.1 · 1×
@types/node20.5.7 · 1×
@types/react18.2.55 · 1×
@types/react-dom18.2.18 · 1×
autoprefixer10.4.15 · 1×
bunchee5.1.5 · 1×
clsx2.0.0 · 1×
eslint7.32.0 · 1×
eslint-config-next13.5.1 · 1×
next13.5.1 · 1×
postcss8.4.29 · 1×

For agents

$ claude mcp add vaul \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact