ascii.cnlibs.com
GithubX

Resizable

Accessible panel groups with keyboard support.

  • app/page.tsx
  • app/layout.tsx
  • lib/utils.ts
  • components/ui/

Select a file to preview its contents here.

## installation

pnpm dlx shadcn@latest add https://ascii.cnlibs.com/r/resizable.json

## usage

import { AsciiBox } from "@/components/ascii/ascii-box";
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
<ResizablePanelGroup totalWidth={61} defaultLeftWidth={30} minWidth={12}>
  <ResizablePanel side="start">
    {(chWidth) => (
      <AsciiBox width={chWidth} title="Files" padY={0}>
        <ul className="flex flex-col">
          <li>app/page.tsx</li>
          <li>app/layout.tsx</li>
          <li>lib/utils.ts</li>
          <li>components/ui/</li>
        </ul>
      </AsciiBox>
    )}
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel side="end">
    {(chWidth) => (
      <AsciiBox width={chWidth} title="Preview" padY={0}>
        <p>Select a file to preview its contents here.</p>
      </AsciiBox>
    )}
  </ResizablePanel>
</ResizablePanelGroup>