Getting Started

Installation

To install Folium is pretty straightforward. You can use npm or yarn to add it to your project:

npm install folium

Install Folium

Install the component using your preferred package manager.

npm install folium

Vaul from Email Kowalksi used to inject styles automatically in the head of your HTML document. But that didn't give granular control over how styles were being loaded, so here in Folium you need to import the styles manually.

Note

We know Vaul used to say that the library comes with zero styles, and that's half true. The library doesn't come with any style by default, but it does provide some basic keyframes for the animations to work properly. That's why you need to import the styles manually.

You can import the styles in the entry point of your application (e.g., index.js or App.js):

React

import "folium/styles.css";

If you prefer to include the styles via CSS, you can add the following line to your main CSS file:

styles.css

@import "folium/styles.css";

Examples

Explore various examples demonstrating how to use Folium Sheet in different scenarios.

API Reference

Detailed reference of all components and APIs available in Folium Sheet.

Components

Learn about the different components provided by Folium Sheet and how to use them.

Migration Guide

A guide to help you migrate from Vaul Drawer to Folium Sheet seamlessly.

What is Folium?

Folium is a fork based on Emil Kowalksi's Drawer that enhances the developer experience by providing more flexible and customizable drawer components for web applications, and also fixes some issues presented in the original library.

Thanks to Emil for creating such an amazing component and all the time you've invested in it!

Why Folium?

Folium aims to provide better support for this component and making easier to contribute to it and extend functionalities. Also we want to continue this project because Emil has decided to stop mantining the original component.

That's it. You're now ready to use Folium in your projects!