Skip to content
ThorbisInterface Guidelines (opens in a new tab)
All components

Resizable

A bounded split layout whose user-controlled size persists without breaking either pane.

Adopted
Family
Workbench
Available import
@/components/ui/resizable
Status
Thorbis wrapper and live specimen ship here.
Live Thorbis specimenresizable
Route list
Job detail
Use
Use in expert workbenches when people need to balance adjacent durable regions.
Avoid
Do not make required content unreachable, overlap handles, or ship without keyboard resizing.

Use this component

GitHub source links require access to the private Thorbis design repository.

Wrapper sourceRepository and dependencies

Value exports
  • ResizableHandle
  • ResizablePanel
  • ResizablePanelGroup
Type exports
None.
Setup, styles, and dependencies

These are React wrappers in the Thorbis design repository, not an installable npm UI package. In this repository, @/ resolves to src/ through tsconfig.json.

Use the repository's package.json and package-lock.json for dependencies. Load src/styles.css once at the application root for global tokens, typography, and themes. The wrappers compose colocated StyleX owners; include the generated token CSS and extracted StyleX output.

For another project, bring the wrapper and its transitive local imports, configure the alias, install the dependencies those files use, and provide the same token and style setup. Review the source before copying; the direct imports below are not a complete dependency closure.

Interactive examples require client-side React. This TanStack Start site server-renders and hydrates React; another host must hydrate or render the component on the client. Example code is the same TypeScript source used by its live preview.

Direct imports in this wrapper:

  • ./resizable.stylex
  • @stylexjs/stylex
  • react
  • react-resizable-panels

A standalone usage example has not been published for this component yet. Inspect the wrapper source and existing live specimen; do not infer a different API from the upstream component name.

Adoption contract

  1. Start from the ShadCN accessible source primitive; keep upstream keyboard and focus behavior.
  2. Use Thorbis color, type, space, radius, shadow, and motion tokens only.
  3. Design hover, focus, selected, disabled, loading, empty, error, offline, and reduced-motion states where they apply.
  4. Verify desktop and 390px mobile, keyboard order, accessible names, and stable async geometry.
Official ShadCN component directory

Applied bookmark research

Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.

Preserve the place as the collection grows

Large customer, property, and inspiration collections become expensive to navigate when every inspection loses the current place.

Treat filters, selected records, scroll, and Back behavior as part of the task. Loading a child or optional panel should not reset the whole collection. A saved reference includes enough context to be useful when revisited.

Thorbis example. Open a property from a filtered customer list and return to the same filter and position. On the inspiration wall, reserve the media footprint and retain source credit even when the preview is unavailable.

Verify. Try refresh, Back and Forward, a direct record link, an empty result, a failed preview, and a long collection. Check that late data does not overwrite a draft or move the action under the pointer.

Do not import. No unbounded eager media, private information in shareable URLs, or a local-only storage promise borrowed from Copper.

Open the ecosystem skill · Evidence: 7 Principles of Rich Web Applications; Component Architecture for React Server Components; Philosophy; Copper

Keep operational text steady and unambiguous

Changing digits, shifting labels, and brittle wrapping make money and status harder to inspect.

Evaluate numeric alignment where amounts are compared, stable action labels during requests, and wrapping with real content. Treat optical adjustments as controlled system decisions. Keep the existing font families and semantic type roles.

Thorbis example. An invoice comparison aligns changing amounts without hiding their currency or precision. A long property name wraps without displacing the next action. Save remains the action; the adjacent status explains what happened.

Verify. Try zero, negative and large amounts, long names, missing values, fallback fonts, text expansion, and browser zoom. Compare readability at actual size rather than approving a magnified specimen alone.

Do not import. No blanket balanced wrapping on data rows, copied display face, custom page-local type scale, or status copy that claims more than the system knows.

Open the type skill · Evidence: Details that make interfaces feel better; Web Interface Guidelines; Invisible Details

Loading search…

Loading search. You can close this message and keep reading.