Resizable

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@line/abc-def-react/resizable";

<script setup lang="ts">
import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from "@line/abc-def-vue/resizable";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@line/abc-def-react/resizable";

export function Example() {
  return (
    <ResizablePanelGroup>
      <ResizablePanel defaultSize={55}>Preview</ResizablePanel>
      <ResizableHandle />
      <ResizablePanel defaultSize={45}>Tokens</ResizablePanel>
    </ResizablePanelGroup>
  );
}

<script setup lang="ts">
import {
  ResizableHandle,
  ResizablePanel,
  ResizablePanelGroup,
} from "@line/abc-def-vue/resizable";
</script>

<template>
  <ResizablePanelGroup direction="horizontal" class="min-h-40 rounded-md border">
    <ResizablePanel :default-size="55" class="p-4">Preview</ResizablePanel>
    <ResizableHandle with-handle />
    <ResizablePanel :default-size="45" class="p-4">Tokens</ResizablePanel>
  </ResizablePanelGroup>
</template>

Component tokens

Composition exports

Usage notes

• Use persistent sizes for productivity surfaces.
• Keep minimum panel sizes usable.
• Related component tokens use the `resizable` token group in `@line/abc-def-styles/css`.