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>

Anatomy

Import and assemble the component:

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

3<SidePanel>
4  <SidePanel.Header />
5</SidePanel>

API Reference

Root

Customize the SidePanel appearance with these configuration options.

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

Prop

Type

Header

Renders the panel header section.

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>

Accessibility

  • Uses role="complementary" for proper landmark identification
  • Supports keyboard navigation and focus management
  • Panel state is communicated to screen readers