Slick Bottom Sheet

Modern bottom sheet component for React, built with Framer Motion.

Introduction

Slick Bottom Sheet is a bottom sheet component with buttery smooth animation and user friendly interactions for React. The gestures and animations are handled with Framer Motion. It aims to provide a simple and flexible API that works out of the box, with minimal dependencies.

Install

This package requires framer-motion as a peer dependency.

1npm install slick-bottom-sheet
2yarn add slick-bottom-sheet
3pnpm install slick-bottom-sheet

Demo

slick-bottom-sheet.vercel.app

or clone the repo and run the ./example Next.JS app locally.

API Reference

For now, please refer to JSDoc and demo source code.

Example

1"use client";
2
3import React from "react";
4import { SlickBottomSheet, SlickBottomSheetControl } from "slick-bottom-sheet";
5
6export default function Page() {
7  const [isOpen, setIsOpen] = React.useState(false);
8  const ref = React.useRef<SlickBottomSheetControl>(null);
9
10  React.useEffect(() => {
11    setIsOpen(true);
12  }, []);
13
14  return (
15    <>
16      <div className="grid place-items-center h-full">
17        <button
18          className="px-4 py-2 bg-zinc-100 rounded-md"
19          onClick={() => {
20            console.log("open");
21            setIsOpen(true);
22          }}
23        >
24          Open
25        </button>
26      </div>
27      <SlickBottomSheet
28        isOpen={isOpen}
29        onCloseStart={() => {
30          setIsOpen(false);
31        }}
32        ref={ref}
33        onSnap={console.log}
34        className="bg-white rounded-t-2xl overflow-hidden shadow-xl z-10 isolate border"
35        header={
36          <div className="flex justify-center py-2">
37            <div className="w-10 h-1 rounded-full bg-zinc-400" />
38          </div>
39        }
40        footer={
41          <div className="p-4">
42            <button
43              onClick={() => ref.current?.snapTo("close")}
44              className="w-full bg-indigo-600 py-2 font-medium text-white rounded"
45            >
46              Dismiss
47            </button>
48          </div>
49        }
50        backdropClassName="backdrop-blur-sm bg-black bg-opacity-10"
51      >
52        <div className="p-4">
53          <div className="h-48 grid place-items-center font-bold">
54            <div className="text-center">
55              <p className="text-3xl mb-4">Hello There!</p>
56              <p>
57                This is a sheet demo with default breakpoint [&quot;auto&quot;].
58              </p>
59              <p>You can drag the sheet or backdrop to control the sheet.</p>
60            </div>
61          </div>
62        </div>
63      </SlickBottomSheet>
64    </>
65  );
66}

To Do

• More exposed options
• Add testings
• Add more examples
• Improve docs
• Better A11Y support