Shell
A sidebar that resizes, collapses on a spring and peeks back when the pointer rests on the edge.
Drag the sidebar’s edge, double-click it to reset, drag it shut, then rest the pointer on the left edge.
Features
- A sidebar that resizes by its edge, resets on double-click and collapses when dragged below half its minimum.
- It peeks back when the pointer rests on the left edge.
Use it for
- App layouts.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react motion lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { Shell } from 'runets'
<Shell title="Today" sidebar={rows}>{content}</Shell>API
| Prop | Type | What it does |
|---|---|---|
sidebar | ReactNode | Sidebar content. |
title | string | Toolbar title. |
Accessibility
- The edge is a focusable separator; arrow keys resize it.
Source
The code is in src/kit/surfaces.tsx in runets, MIT licensed.