Files
supabase/packages/ui
kemal.earth 864cca6cda fix(design-system): update border radius for menu items (#50973)
## Problem

Border radiuses for inner items of dropdowns, menus etc. didn't keep up
with recent changes.

## Solution

Adds a token/variable to help keep this consistent across our apps and
components. One caveat is this modifies shadcn components, so I'm open
to alternative ways of doing this.

| Before | After |
|--------|--------|
| <img width="293" height="206" alt="Screenshot 2026-09-28 at 12 00 27"
src="https://github.com/user-attachments/assets/cd5e0708-0223-43ac-9893-a33ce5acd1ca"
/> | <img width="335" height="231" alt="Screenshot 2026-09-28 at 12 00
41"
src="https://github.com/user-attachments/assets/dc993b09-1410-4596-ae8f-4e78e6739fa6"
/> |



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Style**
* Standardized corner rounding across command items, context menus,
dropdown menus, menubars, select options, and multi-select options.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-29 09:50:15 +01:00
..
2023-06-26 01:08:20 +08:00

packages/ui

Supabase's shared React component library. Built on Radix UI primitives and shadcn/ui, styled with Tailwind CSS, and used across all Supabase apps.

Usage

Import from the 'ui' package alias:

import { Badge, Button, Input } from 'ui'

Some of the components have the _Shadcn_ suffix. These components should be preferred, they're in a process of replacing the other ones.

Utilities

// deep object merge (used for themes)
import { clipboard, cn, mergeDeep } from 'ui' // Tailwind class merging (shadcn-ui/cn)

// copy-to-clipboard helper

Styling conventions

  • Tailwind only — no inline styles or CSS modules.
  • Prefer shadcn semantic pairs (bg-card text-card-foreground, bg-muted text-muted-foreground, bg-tertiary text-tertiary-foreground) over hardcoded colors. Legacy utilities such as text-foreground-light and border-default are compatibility aliases only.
  • Control surface roles (bg-field, bg-control-raised, border-control-hover; CSS --control aliases raised) live in build/css/source/semantic.css. Prefer those over inventing fills. Legacy bg-control is still the accent wash alias.
  • Themes set the core --hue (or the split --surface-hue / --primary-hue), --chroma, --surface, --foreground-lightness, and --contrast inputs, plus their --muted-foreground-level and --tertiary-foreground-level hierarchy. Semantic colors are derived from them in OKLCH; --contrast: 1 is the baseline and the supported adjustment range is 0.75 to 1.25.
  • The workspace root owns the actual tailwind.config.js. The file in this package is a stub for IntelliSense only.