refactor(ui): install the shadcn alert primitive

[yuneng-berri]

TLDR

Problem this solves:

• shared/Alert.tsx is base-vega's alert.tsx copied in by hand
• npx shadcn add cannot reach it, so it drifts from upstream
• It still wraps every part in forwardRef, which React 19 dropped the need for

How it solves it:

• Install the primitive into components/ui/ where the CLI owns it
• Reduce the shared file to a wrapper adding four status variants
• Rendered classes stay byte-identical, so no call site moves

User Flow

This is a no-op refactor, so the two lists are identical by design. An admin sees the same alerts, in the same colours, on the same routes, before and after

Before: an admin loads the dashboard and sees the standard alerts

1. They open http://localhost:4000/ui/?page=api-keys with the proxy started under --detailed_debug and see an amber "Performance Warning: Detailed Debug Mode Active" banner across the top
2. They switch the theme toggle to dark and the banner stays amber on the dark surface
3. They open http://localhost:4000/ui/?page=admin-settings, pick SCIM, and see a blue "Using SCIM" notice

After: the same admin sees exactly the same three things

1. They open http://localhost:4000/ui/?page=api-keys with the proxy started under --detailed_debug and see an amber "Performance Warning: Detailed Debug Mode Active" banner across the top
2. They switch the theme toggle to dark and the banner stays amber on the dark surface
3. They open http://localhost:4000/ui/?page=admin-settings, pick SCIM, and see a blue "Using SCIM" notice

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 (3e2927d)

Warning alert, both themes

1. Open http://localhost:3000/?page=api-keys and screenshot the amber debug banner at the top of the page
2. Click the theme toggle in the top bar to switch to dark, and screenshot the same banner

Info alert, both themes

1. Open http://localhost:3000/?page=admin-settings, select SCIM, and screenshot the blue "Using SCIM" notice
2. Switch the theme toggle to dark and screenshot the same notice

After (a5b6f31)

Warning alert, both themes

1. Open http://localhost:3000/?page=api-keys and screenshot the amber debug banner at the top of the page
2. Click the theme toggle in the top bar to switch to dark, and screenshot the same banner

Info alert, both themes

1. Open http://localhost:3000/?page=admin-settings, select SCIM, and screenshot the blue "Using SCIM" notice
2. Switch the theme toggle to dark and screenshot the same notice

Type

🧹 Refactoring

Caveats (if any)

Low

• Upstream's alertVariants is not exported, so the wrapper appends its status classes and leans on twMerge to settle the overlap
• ui/alert.tsx takes the same filename-pascal-case suppression every other CLI-managed primitive carries
• No new test: shared/Alert.test.tsx already covers all six variants and is the gate here, kept unedited. It fails when a status variant loses its token colour, checked by mutating the info variant and watching it go red

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 moves the base alert primitive into the CLI-managed UI directory and reduces the shared alert component to a wrapper for the dashboard’s four additional status variants.

• Adds the shadcn-compatible alert primitive under components/ui/.
• Preserves the shared alert API and status-specific styling.
• Adds the standard filename lint suppression for the generated primitive.

Confidence Score: 5/5

The PR appears safe to merge with no actionable regressions identified.

The wrapper preserves the existing variants, data attributes, accessibility role, prop forwarding, and merged styling, while React 19 supports the new ref-as-prop component form.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/shared/Alert.tsx	Replaces the copied primitive with a typed wrapper that preserves status variants and delegates base behavior to the new UI component.
ui/litellm-dashboard/src/components/ui/alert.tsx	Adds the shadcn alert primitive with the same structural, accessibility, and base styling behavior.
ui/litellm-dashboard/eslint-suppressions.json	Adds the expected filename-case suppression for the CLI-managed lowercase component file.

_{Reviews (1): Last reviewed commit: "refactor(ui): install the shadcn alert p..." | Re-trigger Greptile}