Sidepanel

A flexible side panel component to place content on either side of the page.
1<Flex style={{ gap: "24px", flexWrap: "wrap" }}>
2  <SidePanel side="right">
3    <SidePanel.Header
4      title="Right Side Panel"
5      icon={<Avatar fallback="A" />}
6      description="This is a description."
7      actions={[<Button>Action</Button>]}
8    />
9    <SidePanel.Section>
10      <List>
11        <List.Header>User Information</List.Header>
12        <List.Item align="center">
13          <List.Label minWidth="88px">Status</List.Label>
14          <List.Value>Active</List.Value>
15        </List.Item>

Usage

1import { SidePanel } from "@raystack/apsara";

SidePanel Props

Customize the SidePanel appearance with these configuration options.

The SidePanel component is composed of several parts, each with their own props

Prop

Type

SidePanel.Header

Prop

Type

Examples

Basic Usage

1<SidePanel side="right">
2  <SidePanel.Header title="Right Side Panel" />
3  <SidePanel.Section>
4    <List>
5      <List.Header>User Information</List.Header>
6      <List.Item align="center">
7        <List.Label minWidth="88px">Status</List.Label>
8        <List.Value>Active</List.Value>
9      </List.Item>
10    </List>
11  </SidePanel.Section>
12</SidePanel>

Position

The SidePanel can be positioned on either the left or right side of the screen.

1<SidePanel side="right">
2  <SidePanel.Header title="Right Side Panel" />
3  <SidePanel.Section>
4    <List>
5      <List.Header>User Information</List.Header>
6      <List.Item align="center">
7        <List.Label minWidth="88px">Status</List.Label>
8        <List.Value>Active</List.Value>
9      </List.Item>
10    </List>
11  </SidePanel.Section>
12</SidePanel>