Sidepanel

<Flex style={{ gap: "24px", flexWrap: "wrap" }}>
  <SidePanel side="right">
    <SidePanel.Header
      title="Right Side Panel"
      icon={<Avatar fallback="A" />}
      description="This is a description."
      actions={[<Button>Action</Button>]}
    />
    <SidePanel.Section>
      <List.Root>
        <List.Header>User Information</List.Header>
        <List.Item align="center">
          <List.Label minWidth="88px">Status</List.Label>
          <List.Value>Active</List.Value>
        </List.Item>
        <List.Item align="center">
          <List.Label minWidth="88px">Type</List.Label>
          <List.Value>Premium Account</List.Value>
        </List.Item>
        <List.Item align="center">
          <List.Label minWidth="88px">Created</List.Label>
          <List.Value>April 24, 2024</List.Value>
        </List.Item>
      </List.Root>
    </SidePanel.Section>
    <SidePanel.Section>
      <List.Root>
        <List.Header>User Information</List.Header>
        <List.Item align="center">
          <List.Label minWidth="88px">Status</List.Label>
          <List.Value>Active</List.Value>
        </List.Item>
        <List.Item align="center">
          <List.Label minWidth="88px">Type</List.Label>
          <List.Value>Premium Account</List.Value>
        </List.Item>
        <List.Item align="center">
          <List.Label minWidth="88px">Created</List.Label>
          <List.Value>April 24, 2024</List.Value>
        </List.Item>
      </List.Root>
    </SidePanel.Section>
  </SidePanel>
</Flex>

Usage

import { 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	Default
`side`	`"left" \| "right"`	`"left"`
`children`	`ReactNode`	-
`className`	`string`	-

SidePanel.Header

Prop	Type	Default
`title`	`string`	-
`description`	`string`	-
`icon`	`ReactNode`	-
`actions`	`ReactNode[]`	-

Examples

Basic Usage

<SidePanel side="right">
  <SidePanel.Header title="Right Side Panel" />
  <SidePanel.Section>
    <List.Root>
      <List.Header>User Information</List.Header>
      <List.Item align="center">
        <List.Label minWidth="88px">Status</List.Label>
        <List.Value>Active</List.Value>
      </List.Item>
    </List.Root>
  </SidePanel.Section>
</SidePanel>

Sidepanel

Usage

SidePanel Props

SidePanel.Header

Examples

Basic Usage

On this page