Panelside

A navigation panel that moves the app aside instead of covering it.

A button in the corner, and the screen slides across, shrinks, rounds its corners and dims — revealing a panel of destinations and history that was behind it all along. The app never disappears, so going back is a tap on the thing you were just looking at.

It is not a Drawer with different styling. A drawer mounts through a portal, which puts it above the app by construction and leaves the app content elsewhere in the tree, unreachable — there is nothing to push. Panelside renders inline and owns both halves, which is why the part of your app that moves has to be named.

Installation

Panelside ships with the library — no separate install.

import { Panelside, AIInput, Avatar, BottomSheet, Button, Menu, MenuIcon, MicIcon, PackageIcon, PencilIcon, PlusIcon, ShareNodesIcon, StarIcon, TrashIcon, usePanelside, Popover, SearchBar, Item } from 'panelui-native';
import { View, Pressable } from 'react-native';

Or copy the source into your project, to own and edit it:

npx panelui-cli@latest add panelside

Usage

<Panelside>
  <Panelside.Panel>
    <Panelside.Header
      title="Assistant"
      action={<Panelside.SearchTrigger onPress={openSearch} />}
    />

    <Panelside.Content>
      <Panelside.Group>
        <Panelside.GroupLabel>Recents</Panelside.GroupLabel>
        <Panelside.Item label="Migrating the design tokens" />
      </Panelside.Group>
    </Panelside.Content>

    <Panelside.Footer>
      <Panelside.Cta label="New chat" onPress={compose} />
    </Panelside.Footer>
  </Panelside.Panel>

  <Panelside.Scene>
    <Panelside.Trigger />
    <Conversation />
  </Panelside.Scene>

</Panelside>

Composition

<Panelside>
  <Panelside.Panel>
    <Panelside.Header action={<Panelside.SearchTrigger />} />
    <Panelside.Content>
      <Panelside.Group>
        <Panelside.GroupLabel>…</Panelside.GroupLabel>
        <Panelside.Item>
          <Panelside.ItemIcon>…</Panelside.ItemIcon>
          <Panelside.ItemLabel>…</Panelside.ItemLabel>
          <Panelside.ItemBadge>…</Panelside.ItemBadge>
          <Panelside.ItemActions>…</Panelside.ItemActions>
        </Panelside.Item>
      </Panelside.Group>
    </Panelside.Content>
    <Panelside.Footer>
      <Panelside.Cta />
    </Panelside.Footer>
  </Panelside.Panel>

  <Panelside.Scene>
    <Panelside.Trigger />
    <Panelside.Pages>
      <Panelside.Page />
    </Panelside.Pages>
  </Panelside.Scene>

</Panelside>

A row can be filled two ways, and they are the same row. icon, label and badge are the shorthand for the row every navigation panel has; Panelside.ItemIcon, Panelside.ItemLabel and Panelside.ItemBadge are the same three slots written out, for a row that needs a different order, a label that is not a string, or something in a slot the prop cannot take.

They compose rather than exclude each other — a row can take its label from label and still write a trailing Panelside.Action as a child.

Examples

Destinations and history

Two groups, because they are two different things. The first is where you can go and never changes; the second is what you have done and changes every session — so only the second carries a label, and only its rows carry an action.

<Panelside.Content>
  <Panelside.Group>
    <Panelside.Item icon={<MessageCircleIcon size={20} />} label="Chats" active />
    <Panelside.Item icon={<PackageIcon size={20} />} label="Projects" badge={4} />
  </Panelside.Group>

  <Panelside.Group>
    <Panelside.GroupLabel>Recents</Panelside.GroupLabel>
    {recents.map((chat) => (
      <Panelside.Item key={chat.id} label={chat.title} onPress={() => open(chat.id)}>
        <Panelside.Action label={`Options for ${chat.title}`} onPress={() => menu(chat.id)} />
      </Panelside.Item>
    ))}
  </Panelside.Group>
</Panelside.Content>

Search, as a page rather than a panel

A field in the header is the obvious way to put search in a navigation panel, and it is the wrong one on a phone. The panel is most of the screen and the field is forty points of it, so a search that returns anything has to push the history down a screen it already fills.

So the button is in the header and what it opens is a page. Searching your chats is somewhere you go and stay for a while, and a surface over the screen you came from spends that time covering the thing it is a list of.

Panelside.SearchTrigger draws the button and reports the press. Where search lives is a decision about the app — a scene of your own, a Panelside.Page, a screen pushed onto the router's stack — so the component does not answer it for you. Give the page a way back: SearchBar with cancel="always" draws the field and the Cancel beside it, and calls onCancel once the field has emptied and dropped focus.

const [searching, setSearching] = useState(false);

return (
  <Panelside>
    <Panelside.Panel>
      <Panelside.Header
        title="Assistant"
        action={
          <Panelside.SearchTrigger
            onPress={() => {
              setSearching(true);
              setOpen(false);
            }}
          />
        }
      />
      <Panelside.Content>{history}</Panelside.Content>
    </Panelside.Panel>

    <Panelside.Scene>
      {searching ? (
        <View className="flex-1">
          <View className="px-4 pb-2.5">
            <SearchBar
              shape="pill"
              variant="filled"
              value={query}
              onChangeText={setQuery}
              onCancel={() => setSearching(false)}
              placeholder="Search chats, images, files"
              cancel="always"
              autoFocus
            />
          </View>
          {results}
        </View>
      ) : (
        app
      )}
    </Panelside.Scene>
  </Panelside>
);

Settings from the account avatar

The footer's trailing slot is the account, and pressing it opens a full-height sheet. Full height because it is a settings screen rather than a confirmation: the rows go past the fold, and a sheet that stops halfway is one you have to drag before you can read it.

Under native pass nativeBackground with it. A settings list is a column of rows on a surface, and the platform's translucent material with a moving screen behind it makes every one of those rows harder to read for nothing.

Leave the sheet's top padding alone. The platform draws its grabber inside the sheet, over the first 24 to 28 points of whatever is hosted in it, and the sheet's own padding is what stands clear of it — a header row put in at the top with that padding stripped arrives with its top third behind the grabber.

const [account, setAccount] = useState(false);

<Panelside.Footer>
  <Panelside.Cta icon={<PlusIcon size={18} />} label="New chat" />
  <View className="flex-1" />
  <Pressable accessibilityRole="button" accessibilityLabel="Account" onPress={() => setAccount(true)}>
    <Avatar size="md" fallback="K" />
  </Pressable>
</Panelside.Footer>

<BottomSheet open={account} onOpenChange={setAccount} native nativeBackground snapPoints={['full']}>
  <BottomSheet.Content size="full" showClose={false}>
    …
  </BottomSheet.Content>
</BottomSheet>

Pages, and rows that go to them

A navigation panel is usually wired the same way at every call site: a piece of state for what is open, an active computed against it on every row, an onPress that sets it, and a close after.

The panel holds the route instead. A row takes a to, and from that one prop it marks itself as the current destination, sets the route and closes the panel. Panelside.Pages shows the Panelside.Page whose value matches.

A page is mounted the first time it is visited and stays mounted after that, hidden rather than removed — so returning to one is a style change rather than a mount, with its list intact and its scroll position where you left it. Pass keepAlive={false} on a page whose contents go stale.

route and onRouteChange make it controlled, for a route that comes from somewhere else. usePanelside() gives you route and navigate for a control of your own.

<Panelside defaultRoute="inbox">
  <Panelside.Panel>
    <Panelside.Content>
      <Panelside.Group>
        <Panelside.Item icon={<MessageCircleIcon size={20} />} label="Inbox" to="inbox" />
        <Panelside.Item icon={<PencilIcon size={20} />} label="Drafts" to="drafts" />
      </Panelside.Group>

      <Panelside.Group>
        <Panelside.GroupLabel>Recents</Panelside.GroupLabel>
        {chats.map((chat) => (
          <Panelside.Item key={chat.id} label={chat.title} to={`chat/${chat.id}`} />
        ))}
      </Panelside.Group>
    </Panelside.Content>
  </Panelside.Panel>

  <Panelside.Scene>
    <Panelside.Pages>
      <Panelside.Page value="inbox"><Inbox /></Panelside.Page>
      <Panelside.Page value="drafts"><Drafts /></Panelside.Page>
      {chats.map((chat) => (
        <Panelside.Page key={chat.id} value={`chat/${chat.id}`}>
          <Conversation id={chat.id} />
        </Panelside.Page>
      ))}
    </Panelside.Pages>
  </Panelside.Scene>
</Panelside>

Actions on a row

Panelside.ItemActions is the overflow button with a menu on it. Give it Menu.Item rows and it draws the button, opens the panel and dismisses it.

The menu is anchored to the button rather than presented from the bottom of the screen. The panel is a fraction of the screen wide, so an anchored menu lines up with the row it belongs to and leaves the list readable behind it, where a sheet covering both to offer four verbs costs more than it says. placement and align move it.

Pressing the button does not press the row, so a row that navigates stays where it is.

<Panelside.Item label={chat.title} to={`chat/${chat.id}`}>
  <Panelside.ItemActions label={`Options for ${chat.title}`}>
    <Menu.Item icon={<PencilIcon size={17} />} onSelect={() => rename(chat)}>Rename</Menu.Item>
    <Menu.Item icon={<StarIcon size={17} />} onSelect={() => star(chat)}>Star</Menu.Item>
    <Menu.Separator />
    <Menu.Item
      variant="destructive"
      icon={<TrashIcon size={17} />}
      onSelect={() => remove(chat)}
    >
      Delete
    </Menu.Item>
  </Panelside.ItemActions>
</Panelside.Item>

A trigger of your own

Given a child, Panelside.Trigger chains the toggle onto that element's own onPress rather than replacing it. A control sitting on the app's bare surface needs a shape to be findable, which is why this is usually a Button rather than an icon on its own. outline rather than a filled variant: the trigger sits on the app's own surface with nothing around it, so it needs a shape to be findable — and a second filled surface on a screen that already has the panel's is one too many.

<Panelside.Scene>
  <View className="flex-row items-center gap-2 px-3 pt-3">
    <Panelside.Trigger>
      <Button size="icon" variant="outline" className="rounded-full">
        <MenuIcon size={20} />
      </Button>
    </Panelside.Trigger>
    <Text size="lg" weight="semibold" className="flex-1">
      Migrating the design tokens
    </Text>
  </View>

  <Conversation />
</Panelside.Scene>

Moving something with the panel

usePanelside hands back progress as a shared value, so a header of your own can travel with the panel on the UI thread instead of re-rendering once a frame. It reads 0 closed and 1 open, and every value in between during a drag.

function SceneTitle() {
  const { progress, toggle } = usePanelside();

  const style = useAnimatedStyle(() => ({
    opacity: 1 - progress.value,
    transform: [{ translateY: progress.value * -8 }],
  }));

  return (
    <Animated.View style={style}>
      <Text size="lg" weight="semibold">Migrating the design tokens</Text>
    </Animated.View>
  );
}

A sidebar on a tablet

Past dock, the panel stops being an overlay: it takes a column of the layout, stays open, drops the gesture, narrows to a third of the container, and Panelside.Trigger renders nothing. The number is yours on purpose — set it high enough that what is left over is still a screen. Around 700 is the first width where both halves have room.

<Panelside dock={700}>
  <Panelside.Panel>{/* … */}</Panelside.Panel>
  <Panelside.Scene>
    {/* The trigger disappears on its own above 700pt. */}
    <Panelside.Trigger />
    <Conversation />
  </Panelside.Scene>
</Panelside>

Sizing and tinting it

The panel is meant to be changed. scale, radius and dim set the curve for every scene under the root, so the three numbers live where the panel is configured rather than on a part further down — a Panelside.Scene prop still wins where one screen wants something of its own. scrimClassName is for the colour of the dim, which black at 45% gets wrong in a light theme, where it reads as a hole rather than as shade.

Panelside.Cta and Panelside.Item take a size. The pill is 40pt by default so it sits level with the account button beside it; size="lg" is the 48pt one, for a footer where the call to action is the only thing in the row. Panelside.Item has size="sm" for a panel that has to show more history at once — it tightens the padding and leaves the type alone, because a list you can read is worth more than two extra rows.

<Panelside haptics scale={0.92} radius={32} dim={0.55}>
  <Panelside.Panel>
    <Panelside.Content>
      {history.map((chat) => (
        <Panelside.Item key={chat} label={chat} size="sm" />
      ))}
    </Panelside.Content>
    <Panelside.Footer>
      <Panelside.Item className="flex-1" icon={<Avatar size="md" fallback="K" />} />
      <Panelside.Cta icon={<PlusIcon size={18} />} label="New chat" />
    </Panelside.Footer>
  </Panelside.Panel>

  <Panelside.Scene scrimClassName="bg-neutral-900">
    <App />
  </Panelside.Scene>
</Panelside>

A row the props cannot describe

icon, label and badge cover the row a navigation panel is made of, and most rows should use them. Write the parts out when the row needs something the props have no argument for — a different order, a label that is not a string, two things in the trailing slot.

The two forms compose: a row can take its label from the prop and still write a Panelside.Action as a child.

<Panelside.Item active={thread.id === current} onPress={() => open(thread)}>
  <Panelside.ItemIcon>
    <Avatar size="xs" fallback={thread.initials} />
  </Panelside.ItemIcon>
  <Panelside.ItemLabel>{thread.title}</Panelside.ItemLabel>
  <Panelside.ItemBadge>
    <View className="h-2 w-2 rounded-full bg-primary" />
  </Panelside.ItemBadge>
  <Panelside.Action label={`Options for ${thread.title}`} onPress={() => rename(thread)} />
</Panelside.Item>

Versions

Assistant

The default shape. Swipe in from the leading edge and the screen slides, shrinks and rounds in step with your finger; release under 60 points and it springs back.

<Panelside>
  <AssistantPanel />
  <Panelside.Scene>
    <SceneBar />
    <Transcript />
  </Panelside.Scene>
</Panelside>

Open a conversation

The panel used as navigation rather than as a display. A row is a to and nothing else: pressing it sets the route, marks itself as the current destination and closes the panel — leaving it open would put the thing you just navigated to behind the thing you navigated from.

Each conversation is a Panelside.Page. The first press mounts one and it stays mounted after that, so going back to a conversation you have already read does not rebuild it.

const [route, setRoute] = useState(chats[0]);

<Panelside haptics route={route} onRouteChange={setRoute}>
  <Panelside.Panel>
    <Panelside.Content>
      {chats.map((chat) => (
        <Panelside.Item key={chat} label={chat} to={chat} />
      ))}
    </Panelside.Content>
  </Panelside.Panel>

  <Panelside.Scene>
    <Panelside.Pages>
      {chats.map((chat) => (
        <Panelside.Page key={chat} value={chat}>
          <Conversation title={chat} />
        </Panelside.Page>
      ))}
    </Panelside.Pages>
  </Panelside.Scene>
</Panelside>

Row actions

Every conversation carries a “…”. The menu behind it renames, stars, shares or deletes the row it belongs to, and the list changes underneath — anchored to the button, so it lines up with the row and the history stays readable behind it.

<Panelside.Item label={chat} active={chat === active} onPress={() => setActive(chat)}>
  <Panelside.ItemActions>
    <Menu.Item icon={<PencilIcon size={17} />} onSelect={() => rename(chat)}>Rename</Menu.Item>
    <Menu.Item icon={<StarIcon size={17} />} onSelect={() => star(chat)}>Star</Menu.Item>
    <Menu.Item icon={<ShareNodesIcon size={17} />}>Share</Menu.Item>
    <Menu.Separator />
    <Menu.Item
      variant="destructive"
      icon={<TrashIcon size={17} />}
      onSelect={() => remove(chat)}
    >
      Delete
    </Menu.Item>
  </Panelside.ItemActions>
</Panelside.Item>

Overlay

The same panel, sliding over a screen that stays exactly where it is — for a scene whose content cannot afford to move.

<Panelside mode="overlay">
  <AssistantPanel />
  <Panelside.Scene>
    <SceneBar />
    <Transcript />
  </Panelside.Scene>
</Panelside>

Docked

Past the width you name, the panel is a column of the layout rather than a thing you open: the trigger removes itself, the gesture goes, and the panel narrows to a third of the container — docked, every point it takes is a point the app does not get back.

<Panelside dock={700}>
  <AssistantPanel />
  <Panelside.Scene>
    <SceneBar />
    <Transcript />
  </Panelside.Scene>
</Panelside>

Deeper curve

Scale, radius and dim turned well past their defaults. scale is the one that changes the shape of the thing rather than its finish: below one the screen stops being full height and lifts away from the status bar, which is a different look and not the default for good reason.

<Panelside>
  <AssistantPanel />
  <Panelside.Scene scale={0.72} radius={44} dim={0.7}>
    <SceneBar />
    <Transcript />
  </Panelside.Scene>
</Panelside>

Full chat

A streaming transcript in the scene, anchored and scrolling on its own while the panel holds the history it came from.

<Panelside>
  <AssistantPanel />
  <Panelside.Scene>
    <SceneBar />
    <MessageScroller autoScroll className="flex-1">
      <MessageScroller.Viewport>
        <MessageScroller.Content>
          {turns.map((turn) => (
            <MessageScroller.Item
              key={turn.id}
              messageId={turn.id}
              scrollAnchor={turn.role === 'user'}
            >
              <Turn turn={turn} />
            </MessageScroller.Item>
          ))}
        </MessageScroller.Content>
      </MessageScroller.Viewport>
      <MessageScroller.Button />
    </MessageScroller>
  </Panelside.Scene>
</Panelside>

Native chat

Panelside has no native prop and cannot have one — the platform toolkits ship a switch, a picker, a sheet and a button, and none of them is a pushing navigation panel. What goes native is what is inside it: the panel's compose and account buttons, the search button, the account sheet and the attachment sheet.

The composer is AIInput under native, which hands its own controls to the platform the same way the buttons beside it are handed over. It is written the way the composer's own chat version is written, keyboard numbers included: the composer owns lifting itself, and is told how far it already sits above the bottom so it does not travel that distance twice.

The search page stays ours end to end, and that is a decision rather than an omission. Its field, its filter chips and its grouped rows have no platform equivalent that takes a leading tile, a marked-up title and a trailing meta line and still follows the theme — and a page whose every row is half-platform reads as two designs.

The account sheet is the platform's, painted solid with nativeBackground, and on iOS its rows are the platform's too — a SwiftUI list with SF Symbols, and nothing of ours hosted inside it. A hosted view inside a native control needs a definite size above it on both axes, and a list whose row heights the platform decides cannot give it one. Android has no equivalent list here, so it keeps ours.

<Panelside>
  <Panelside.Panel>
    <Panelside.Header
      title="Assistant"
      action={<Panelside.SearchTrigger native glass onPress={openSearch} />}
    />
    <Panelside.Content>{history}</Panelside.Content>
    <Panelside.Footer>
      <Panelside.Cta label="New chat" size="xl" native glass />
      <View className="flex-1" />
      {/* A plain string, not an Avatar hosted inside the button. */}
      <Button
        native
        glass
        size="xl"
        variant="ghost"
        accessibilityLabel="Account"
        onPress={openSettings}
      >
        K
      </Button>
    </Panelside.Footer>
  </Panelside.Panel>

  <Panelside.Scene>
    <Transcript />

    <AIInput
      native
      value={draft}
      onValueChange={setDraft}
      onSubmit={send}
      keyboardBottomInset={Math.max(insets.bottom, 12)}
      keyboardGap={12}
    >
      <AIInput.Field placeholder="Message the assistant" />
      <AIInput.Toolbar>
        <AIInput.Action label="Attach" icon={<PlusIcon />} onPress={() => setAttaching(true)} />
        <AIInput.Spacer />
        <AIInput.Action label="Dictate" icon={<MicIcon />} />
        <AIInput.Submit />
      </AIInput.Toolbar>
    </AIInput>

    <BottomSheet native open={attaching} onOpenChange={setAttaching} snapPoints={['half']}>
      <BottomSheet.Content>{/* … */}</BottomSheet.Content>
    </BottomSheet>
  </Panelside.Scene>

  {/* The rows are ours; the sheet the platform's, painted solid. */}
  <BottomSheet open={account} onOpenChange={setAccount} native nativeBackground snapPoints={['full']}>
    <BottomSheet.Content size="full" showClose={false}>{/* … */}</BottomSheet.Content>
  </BottomSheet>
</Panelside>

API Reference

Panelside

Panelside.Panel

Panelside.Header

Panelside.Search

Panelside.Content

Panelside.Group

Panelside.GroupLabel

Panelside.Item

Panelside.ItemIcon

Panelside.ItemLabel

Panelside.ItemBadge

Panelside.Action

Panelside.ItemActions

Panelside.Footer

Panelside.Cta

Panelside.Scene

Panelside.Pages

Panelside.Page

Panelside.Trigger

Panelside.SearchTrigger

Every part also accepts the underlying React Native props (ViewProps or TextProps) and a className for Tailwind utilities.

Notes

How far everything travels

One shared value drives both layers, so a half-finished drag is a real halfway state rather than a blend of two snapshots. At progress p, with panel width W and container width C:

scale      = 1 - (1 - scale) * p
translateX = p * (W + 12) - C * (1 - scale) / 2
radius     = p * radius

scale defaults to 1, so by default the middle term falls away and the scene simply travels. That is deliberate: a scale is applied about the centre, so anything below one insets the screen at the top and the bottom as well as at the side — it lifts away from the status bar and the home indicator, and the strips of panel that appear above and below it are strips of nothing. Full height, with the corner radius and the dim carrying the effect, is what this pattern actually looks like. Only the screen's content respects the safe area, and it was already doing that on its own.

Set scale below one and the subtraction earns its place. React Native scales about the centre, so a scaled scene has already pulled its leading edge inward before any translation applies — travelling by the panel width alone would leave a gap that grows with the scale, and the panel would look mis-measured.

Where a swipe can start

A single pan opens and closes, and by default it listens across the whole surface: a sideways drag anywhere on the app brings the panel in, from wherever your thumb already was. What keeps a list usable underneath it is the pair of thresholds — the drag gives itself up on 12 points of vertical travel and only claims the touch at 14 horizontal, so anything even slightly vertical resolves as a scroll.

swipeFrom="edge" narrows the closed-state hit area to edgeWidth points at the leading screen edge instead. Reach for it when the scene has its own use for a horizontal drag — a carousel, a wide table, a pannable chart — which would otherwise fight the panel and lose.

<Panelside swipeFrom="edge" edgeWidth={64}>…</Panelside>

Either way the restriction is a closed-state one. Open, the whole surface drags: the panel is already out, so there is no app underneath left to compete.

<Stack.Screen options={{ gestureEnabled: false }} />

Both halves leave the accessibility tree

Being covered says nothing to a screen reader: without help it reads out a navigation list nobody can see, or the app underneath an open panel. Panelside hides whichever half is not in front, so a swipe through the elements only ever reaches what is actually on the screen.

Search is a place, not a panel

Panelside.SearchTrigger draws the search button and reports the press. It goes in Panelside.Header's action slot, it takes native and glass so the control can be the platform's, and it does nothing else — where search lives is onPress's to decide.

A field in the header is the obvious answer and the wrong one on a phone. The panel is most of the screen and the field is forty points of it, so results have to push the history down a screen it already fills.

A surface over the app is the second wrong answer. Searching your chats is somewhere you go and stay for a while: you read the list, filter it, type, read it again. A sheet spends all of that covering the thing it is a list of, and gives the field half a screen to put results in once the keyboard is up.

So a page. Swap what Panelside.Scene renders, or give the scene a Panelside.Page and navigate to it.

Put the field at the top with a Cancel beside it. SearchBar draws both — pass cancel="always", and its onCancel fires after the field has emptied and dropped focus, which is the order a page that is about to close wants. The page needs a way out: it is somewhere you arrive at, look at, and leave, and leaving by the panel button means opening a panel to escape a search.

Group the results and mark the match. Which section a row is in answers "is this a file or a conversation", which a mixed list of twelve titles cannot; and highlighting the query inside the line answers "why is this row in front of me" for a title that contains it once in the middle of eight words.

Before anything is typed, show recent searches and what was last open. Those are what a search screen is opened for most of the time, and answering them without a query saves the query.

Panelside.Search, the inline field, is still exported. It is the right shape for a docked panel on a tablet, where there is width for a field and no keyboard covering half the screen.

What is yours to change

Every part takes className. On top of that: width and dock decide the geometry, scale, radius and dim the curve — settable on the root as defaults for every scene, or per scene — scrimClassName the colour of the dim, and size on Panelside.Cta and Panelside.Item the density of the two things in the panel that are not text. swipeFrom and edgeWidth decide where a swipe may start, and swipeEnabled turns it off. variant on Panelside.SearchTrigger swaps its round control between a fill and a ring, for a panel whose other controls are outlined.

Reduced motion

Every spring here resolves instantly to its target when the system setting is on. The panel still opens and the scene still ends up in the right place — it just does not travel.

Panelside.Trigger composes a supplied trigger onPress with opening/closing the panel. With a custom child, the child's own press runs first, then the trigger callback, then the panel toggle; the default button uses the same callback-before-toggle ordering and retains its name, role, classes, and primary handler after other forwarded props.

Public exports

Values: Panelside, usePanelside

Types: PanelsideProps, PanelsidePanelProps, PanelsideHeaderProps, PanelsideSearchProps, PanelsideContentProps, PanelsideGroupProps, PanelsideGroupLabelProps, PanelsideItemProps, PanelsideItemIconProps, PanelsideItemLabelProps, PanelsideItemBadgeProps, PanelsideActionProps, PanelsideItemActionsProps, PanelsideFooterProps, PanelsideCtaProps, PanelsideSceneProps, PanelsidePagesProps, PanelsidePageProps, PanelsideTriggerProps, PanelsideSearchTriggerProps, PanelsideMode, PanelsideSwipeFrom, PanelsideItemSize, PanelsideCtaSize, PanelsideSurface, PanelsideControlVariant, UsePanelsideResult