mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
Ali Waseem
8d49701cb0
When multiple toasts stack up, Sonner compresses background toasts. The text content in these collapsed toasts was overflowing past the boundary and leaking into the page layout. This adds `data-[expanded=false]:overflow-hidden` to clip the overflowing text. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated toast notification styling to better handle content overflow behavior when toasts are in a collapsed state. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
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 semantic tokens (
bg-muted,text-foreground-light,border-default) rather than hardcoded colors. - The workspace root owns the actual
tailwind.config.js. The file in this package is a stub for IntelliSense only.