Files
supabase/packages/ui
kemal.earth 93e1631f19 fix: class name for text on infoicon (#47933)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Class name was bodged on `InfoIcon`. It was
`text-background-surface-200`, think after recent update it should be
`text-background-200`.

| Before | After |
|--------|--------|
| <img width="371" height="67" alt="Screenshot 2026-07-14 at 16 46 42"
src="https://github.com/user-attachments/assets/813ef5c8-98d1-4889-99b3-8bd885a48139"
/> | <img width="366" height="64" alt="Screenshot 2026-07-14 at 16 47
53"
src="https://github.com/user-attachments/assets/e76c120a-70c8-451a-a7a9-48814978cfd3"
/> |


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

* **Style**
* Updated the Info icon’s background-visible styling to use the correct
background color for improved visual consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-15 13:51:52 +01:00
..
2026-07-08 12:30:42 +10:00
2023-06-26 01:08:20 +08:00
2026-07-03 15:00:43 +10: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' // clsx + tailwind-merge

// copy-to-clipboard helper

Styling conventions

  • Tailwind only — no inline styles or CSS modules.
  • Use shadcn semantic pairs (bg-card text-card-foreground, bg-muted text-muted-foreground, bg-tertiary text-tertiary-foreground) rather than hardcoded colors. Legacy utilities such as text-foreground-light and border-default are compatibility aliases only.
  • 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.