Sidepanel

Overlay component

Installing

Install the component

npm install @supabase/ui

Getting started

Import the component

@import { Modal } from '@supabase/ui'

Basic

The Menu component is made up of a parent component and then subcomponents that dictate menu items and group labels

1import { Button, SidePanel, Typography } from "@supabase/ui";
2import { useState } from "react";
3
4export default function SidePanelBasic() {
5  const [visible, setVisible] = useState(false);
6
7  function toggle() {
8    setVisible(!visible);
9  }
10  return (
11    <>
12      <Button type="default" onClick={toggle}>
13        Open sidepanel
14      </Button>
15      <SidePanel
16        visible={visible}
17        title="Title of the sidepanel"
18        onCancel={toggle}
19      >
20        <Typography.Text>This is the content of the sidepanel</Typography.Text>
21      </SidePanel>
22    </>
23  );
24}
25

The Menu component is made up of a parent component and then subcomponents that dictate menu items and group labels

1import {
2  Badge,
3  Button,
4  IconTrash,
5  SidePanel,
6  Space,
7  Typography,
8} from "@supabase/ui";
9import { useState } from "react";
10
11export default function SidePanelFooterCustom() {
12  const [visible, setVisible] = useState(false);
13
14  function toggle() {
15    setVisible(!visible);
16  }
17  return (
18    <>
19      <Button type="default" onClick={toggle}>
20        Open sidepanel
21      </Button>
22      <SidePanel
23        visible={visible}
24        title="Title of the sidepanel"
25        onCancel={toggle}
26        customFooter={[
27          <Space>
28            <Button type="secondary">Cancel</Button>
29            <Button danger>Delete</Button>
30          </Space>,
31        ]}
32      >
33        <Typography.Text type="secondary">
34          SidePanel content is inserted here, if you need to insert anything
35          into the SidePanel you can do so via{" "}
36          <Typography.Text code>{"{children}"}</Typography.Text>
37        </Typography.Text>
38      </SidePanel>
39    </>
40  );
41}
42

The Menu component is made up of a parent component and then subcomponents that dictate menu items and group labels

1import { Button, SidePanel, Typography } from "@supabase/ui";
2import { useState } from "react";
3
4export default function SidePanelFooterHide() {
5  const [visible, setVisible] = useState(false);
6
7  function toggle() {
8    setVisible(!visible);
9  }
10  return (
11    <>
12      <Button type="default" onClick={toggle}>
13        Open sidepanel
14      </Button>
15      <SidePanel
16        visible={visible}
17        title="Title of the sidepanel"
18        onCancel={toggle}
19        hideFooter
20      >
21        <Typography.Text>This is the content of the sidepanel</Typography.Text>
22      </SidePanel>
23    </>
24  );
25}
26

Left aligned

The Menu component is made up of a parent component and then subcomponents that dictate menu items and group labels

1import { Button, SidePanel, Typography } from "@supabase/ui";
2import { useState } from "react";
3
4export default function SidePanelLeftAligned() {
5  const [visible, setVisible] = useState(false);
6
7  function toggle() {
8    setVisible(!visible);
9  }
10  return (
11    <>
12      <Button type="default" onClick={toggle}>
13        Open sidepanel
14      </Button>
15      <SidePanel
16        align="left"
17        visible={visible}
18        title="Left aligned panel"
19        onCancel={toggle}
20      >
21        <Typography.Text>This is the content of the sidepanel</Typography.Text>
22      </SidePanel>
23    </>
24  );
25}
26

Wide

The Menu component is made up of a parent component and then subcomponents that dictate menu items and group labels

1import { Button, SidePanel, Typography } from "@supabase/ui";
2import { useState } from "react";
3
4export default function SidePanelWide() {
5  const [visible, setVisible] = useState(false);
6
7  function toggle() {
8    setVisible(!visible);
9  }
10  return (
11    <>
12      <Button type="default" onClick={toggle}>
13        Open sidepanel
14      </Button>
15      <SidePanel
16        wide
17        visible={visible}
18        title="Wide sidepanel"
19        onCancel={toggle}
20      >
21        <Typography.Text>This is the content of the sidepanel</Typography.Text>
22      </SidePanel>
23    </>
24  );
25}
26