refactor(ui): re-pull label, textarea, separator and skeleton from the registry

[yuneng-berri]

TLDR

Problem this solves:

• Four primitives still wrap their body in React.forwardRef
• The dashboard has been on React 19 since chore(ui): upgrade the dashboard to React 19 #37411, which does not need it
• ref-forwarding.test.tsx never covered Textarea, the one with real ref call sites

How it solves it:

• Re-pull each from base-vega, which drops the wrapper and its displayName
• Picked these four because ref plumbing is their only divergence from upstream
• Add the missing Textarea case to the existing ref test

User Flow

This is a no-op refactor, so the two lists are identical by design. The primitives render the same markup and still hand their ref to the DOM node, so react-hook-form keeps focusing the right field

Before: an admin fills in a form that has a required textarea and leaves it blank

1. They open http://localhost:4000/ui/?page=vector-stores and click Create Vector Store
2. They submit with the description empty and the form scrolls to and focuses that textarea
3. They fill it in and the store is created

After: the same admin sees exactly the same three things

1. They open http://localhost:4000/ui/?page=vector-stores and click Create Vector Store
2. They submit with the description empty and the form scrolls to and focuses that textarea
3. They fill it in and the store is created

Relevant issues

Linear ticket

Pre-Submission checklist

• I have added meaningful tests
• The handful of test files covering my change pass locally
• My PR passes all required CI/CD checks (e.g., lint, schema.d.ts sync check, etc.)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review

Screenshots / Proof of Fix

Setup: start the proxy with python litellm/proxy/proxy_cli.py --config litellm/proxy/dev_config.yaml --detailed_debug --reload, then run npm run dev in ui/litellm-dashboard and sign in at http://localhost:3000

Before (e300822)

Textarea keeps its ref, so a blank required field still gets focused

1. Open http://localhost:3000/?page=vector-stores and click Create Vector Store
2. Submit with the description left empty, and screenshot the textarea taking focus with its error
3. Switch the theme toggle to dark and screenshot the same field

Label, Separator and Skeleton render unchanged

1. Open http://localhost:3000/?page=api-keys and screenshot the table while its skeleton rows are still showing
2. Open any key's detail drawer and screenshot the labels and divider lines

After (d2aea2d)

Textarea keeps its ref, so a blank required field still gets focused

1. Open http://localhost:3000/?page=vector-stores and click Create Vector Store
2. Submit with the description left empty, and screenshot the textarea taking focus with its error
3. Switch the theme toggle to dark and screenshot the same field

Label, Separator and Skeleton render unchanged

1. Open http://localhost:3000/?page=api-keys and screenshot the table while its skeleton rows are still showing
2. Open any key's detail drawer and screenshot the labels and divider lines

Type

🧹 Refactoring

Caveats (if any)

Low

• Seven other primitives still carry forwardRef: avatar, breadcrumb, card, chart, combobox, input, table. Each has also drifted from upstream on its class strings, so re-pulling them is a visual change and belongs in its own PR
• ui/ui-loading-spinner.tsx has one too, but it is not a registry item and is already slated for replacement by a much smaller local Spinner

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR

[greptile-apps]

Greptile Summary

This PR replaces four legacy React.forwardRef wrappers with React 19 ref-as-prop function components while preserving their rendered elements, props, classes, and ref behavior.

• Converts Label, Separator, Skeleton, and Textarea to plain function components.
• Removes obsolete explicit displayName assignments.
• Adds the previously missing Textarea DOM-ref regression test.

Confidence Score: 5/5

The PR appears safe to merge with ref behavior preserved and directly covered for every changed primitive.

The dashboard uses React 19, each component keeps ref in its spread props, and the tests verify that all four refs resolve to their rendered DOM elements.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/ui/label.tsx	Replaces the forwardRef wrapper with a React 19-compatible function while continuing to spread the ref and other props onto the label.
ui/litellm-dashboard/src/components/ui/ref-forwarding.test.tsx	Adds a Textarea case to the existing DOM-ref tests without weakening the Label, Separator, or Skeleton assertions.
ui/litellm-dashboard/src/components/ui/separator.tsx	Converts the Base UI separator wrapper to ref-as-prop while preserving orientation, styling, attributes, and primitive props.
ui/litellm-dashboard/src/components/ui/skeleton.tsx	Simplifies the skeleton to a plain function component while preserving its DOM structure, classes, and prop forwarding.
ui/litellm-dashboard/src/components/ui/textarea.tsx	Converts Textarea to React 19 ref-as-prop semantics while preserving the textarea DOM node and react-hook-form ref contract.

_{Reviews (1): Last reviewed commit: "refactor(ui): re-pull label, textarea, s..." | Re-trigger Greptile}