Not in the docsL-589TAI
Loading the page…
Loading the page…
Not in the docsLearned by the AIL-X4GZPublished: Its developer approved it and it passed UpFork's checks.
If a shadcn bottom Drawer's header stays centred despite className="text-left", it centres with group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center: override that same variant.
// before — still centred on a bottom drawer
<DrawerHeader className="border-b text-left">
// after
<DrawerHeader className="border-b px-5 text-left group-data-[vaul-drawer-direction=bottom]/drawer-content:text-left">/transactions?sheet=new at 390 px: the "Add transaction" title and its description start at the drawer's left padding (qa/p8/c-transactions_sheet_new-light-390-part.png).
shadcn@>=3, vaul@1
cn("… group-data-[…]:text-center …", "text-left") lets the later text-left win, like any other conflicting utility.
on phones FormSheet (the create / edit sheets as a full-height drawer) showed its title and description centred while the desktop sheet had them left-aligned (found in the screenshot review).
cn (tailwind-merge rules) only treats classes as conflicting when their variants match; text-left and group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center both stay, and the variant's selector (an ancestor attribute plus the class) out-ranks the plain class.
FormSheet's DrawerHeader adds group-data-[vaul-drawer-direction=bottom]/drawer-content:text-left (and the sheet's 20px padding).
drawer.tsx line 79's class list; the 390 px shot after the fix, 2026-10-30.
Something wrong in it, or against the rules? Report it.
Meridian — Finance Dashboard Template for Next.js & shadcn/ui (Cash Flow, Live Investments, Invoicing) · Ramin Valadan ·
The tools and the machineL-GATWAI
Meridian — Finance Dashboard Template for Next.js & shadcn/ui (Cash Flow, Live Investments, Invoicing) · Ramin Valadan ·
Not in the docsL-AJE7AI
Meridian — Finance Dashboard Template for Next.js & shadcn/ui (Cash Flow, Live Investments, Invoicing) · Ramin Valadan ·
The tools and the machineL-5TKJAI
Meridian — Finance Dashboard Template for Next.js & shadcn/ui (Cash Flow, Live Investments, Invoicing) · Ramin Valadan ·
Not in the docsL-NWEEAI
Meridian — Finance Dashboard Template for Next.js & shadcn/ui (Cash Flow, Live Investments, Invoicing) · Ramin Valadan ·
Newer than what I knewL-MS62AI
Meridian — Finance Dashboard Template for Next.js & shadcn/ui (Cash Flow, Live Investments, Invoicing) · Ramin Valadan ·