mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 03:15:06 +03:00
Gildas Garcia
4b7cb27ba9
## Problem Now that `docs` is the only place where we use the deprecated `ui/Tabs`, we can move this component and the related HOC from `ui-patterns` in `docs` ## Solution - Move `ui/Tabs`, `ui-patterns/ComplexTabs/withQueryParams` and `ui-patterns/ComplexTabs/withSticky` to `docs` - Refactor `ui-patterns/ComplexTabs/withQueryParams` and `ui-patterns/ComplexTabs/withSticky` HOCs as hooks to make them easier to understand - Refactor `Tabs` accordingly No visual nor functional changes. ## How to test On https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/auth/passwords (Tabs are driven by URL and the flow tabs should have sticky headers even though there's a CSS bug already reported) - check that by default, the first tab in each tabs is active - change the tabs in different groups and validate it works - refresh the page and check that previously selected tabs are active (URL based selection) - In a new tab, visit https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/auth/passwords again and check that previously selected tabs are active (LocalStorage based selection) Do the same on https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/database/database-advisors (This one is driven by URL but does not have sticky tab headers) Do the same on https://docs-git-chore-refactor-docs-tabs-supabase.vercel.app/docs/guides/deployment/terraform/reference (this one is not driven by URL nor has sticky tab headers) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Docs tabs now persist and restore the active tab via URL query parameters. * Added optional “sticky” tab behavior that keeps the active panel in view. * Enhanced keyboard interaction for selecting tabs. * **Bug Fixes** * Improved active-tab initialization and synchronization when the URL query changes. * **Chores** * Refreshed the tabs UI implementation and styling to improve consistency and remove deprecated tab exports from shared UI packages. <!-- 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 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 astext-foreground-lightandborder-defaultare compatibility aliases only. - Themes set the core
--hue(or the split--surface-hue/--primary-hue),--chroma,--surface,--foreground-lightness, and--contrastinputs, plus their--muted-foreground-leveland--tertiary-foreground-levelhierarchy. Semantic colors are derived from them in OKLCH;--contrast: 1is the baseline and the supported adjustment range is0.75to1.25. - The workspace root owns the actual
tailwind.config.js. The file in this package is a stub for IntelliSense only.