Components API
Main API Components
Detailed reference of all components available in the Main API
Main API
The main API provides backward compatibility with Vaul Drawer, so if you're migrating from Vaul Drawer to Folium Sheet you can keep using the same code without changes.
Components
The main componets provided by Folium Sheet are:
Drawer.Root
The <Drawer.Root /> that provides the context for the drawer, and here accepts the main props for controllign the Drawer behavior.
Props:
Prop
Type
Basic Structure
The only needed for building a basic with sheet with no extra functionalities is the following:
import { Drawer } from "folium";
export default function DrawerComponent(){
return (
<Drawer.Root>
<Drawer.Portal>
<Drawer.Overlay />
<Drawer.Content>
// Required for accesibility, if you dont to provide a title you can use aria-label
<Drawer.Title>My Sheet</Drawer.Title>
</Drawer.Content>
</Drawer.Portal>
)
}Full Structure
import { Drawer } from "folium";
export default function DrawerComponent() {
return (
<Drawer.Root>
<Drawer.Trigger>Open Sheet</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay />
<Drawer.Content>
<Drawer.Handle />
<Drawer.Header>
// Required for accesibility, if you dont to provide a title you can
use aria-label
<Drawer.Title>My Sheet</Drawer.Title>
</Drawer.Header>
<Drawer.Description>// Optional for the sheets</Drawer.Description>
<Drawer.Close />
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>
);
}