ui Architecture Docs
Home / File/ resizable.tsx — ui Source File

resizable.tsx — ui Source File

Architecture documentation for resizable.tsx, a tsx file in the ui codebase. 2 imports, 0 dependents.

File tsx ComponentRegistry ChartRegistry 2 imports 3 functions

Entity Profile

Dependency Diagram

graph LR
  35477bb5_69ee_04d5_7b97_1f0a03255ba1["resizable.tsx"]
  e3a189ea_cc83_2570_3f47_ad87ecca3ddc["react-resizable-panels"]
  35477bb5_69ee_04d5_7b97_1f0a03255ba1 --> e3a189ea_cc83_2570_3f47_ad87ecca3ddc
  ef4051f4_aeb7_8d0c_a726_0ba96ad80cf6["utils"]
  35477bb5_69ee_04d5_7b97_1f0a03255ba1 --> ef4051f4_aeb7_8d0c_a726_0ba96ad80cf6
  style 35477bb5_69ee_04d5_7b97_1f0a03255ba1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as ResizablePrimitive from "react-resizable-panels"

import { cn } from "@/registry/bases/radix/lib/utils"

function ResizablePanelGroup({
  className,
  ...props
}: ResizablePrimitive.GroupProps) {
  return (
    <ResizablePrimitive.Group
      data-slot="resizable-panel-group"
      className={cn(
        "cn-resizable-panel-group flex h-full w-full aria-[orientation=vertical]:flex-col",
        className
      )}
      {...props}
    />
  )
}

function ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {
  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
}

function ResizableHandle({
  withHandle,
  className,
  ...props
}: ResizablePrimitive.SeparatorProps & {
  withHandle?: boolean
}) {
  return (
    <ResizablePrimitive.Separator
      data-slot="resizable-handle"
      className={cn(
        "cn-resizable-handle bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
        className
      )}
      {...props}
    >
      {withHandle && (
        <div className="cn-resizable-handle-icon z-10 flex shrink-0" />
      )}
    </ResizablePrimitive.Separator>
  )
}

export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

Domain

Subdomains

Functions

Dependencies

  • react-resizable-panels
  • utils

Source

Frequently Asked Questions

What does resizable.tsx do?
resizable.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in resizable.tsx?
resizable.tsx defines 3 function(s): ResizableHandle, ResizablePanel, ResizablePanelGroup.
What does resizable.tsx depend on?
resizable.tsx imports 2 module(s): react-resizable-panels, utils.
Where is resizable.tsx in the architecture?
resizable.tsx is located at apps/v4/registry/bases/radix/ui/resizable.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/bases/radix/ui).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free