new·Earn with mozg — 20% of every monthSend somebody here and take a fifth of every plan payment they make, for as long as they keep paying — not a bounty on the first invoice. Your handle is the link, the window is thirty days, and the commission lands on your balance the second they pay. Free to join: if you have signed in, you already have the link. mozg.sh/earnall news →
mozg.beta
Sign in

Supabase · all subjects

negative: out of scope

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Supabase Design System copy-paste approach philosophy

The Supabase Design System components are designed to be copied and pasted rather than packaged as a dependency. This approach gives developers ownership and control over the code, allowing them to decide how components are built and styled. The design philosophy is that component design should be separate from implementation.

Supabase Design System base libraries

The Supabase Design System uses the following base libraries: tailwindcss, shadcn/ui, lucide-react, and react-hook-form. Additional libraries used in specific components are documented in individual component pages. A complete list of dependencies can be found in the package.json file in the design-system repository.

Alert component import path

The Alert, AlertDescription, and AlertTitle components are imported from 'ui/src/components/shadcn/ui/alert'.

Alert is a low-level shadcn primitive

Alert is a low-level shadcn primitive that forms the foundation for Admonition. Use Admonition for product callouts unless you need custom composition that the Admonition API does not support.

When to use Alert instead of Admonition

Alert is appropriate for bespoke icons, custom internal layouts, or wrapper components that need direct access to alertVariants.

Alert composition example

Alert is composed of three parts: an optional icon element, AlertTitle for the heading text, and AlertDescription for the content. Example: <Alert><Terminal className="h-4 w-4" /><AlertTitle>Heads up!</AlertTitle><AlertDescription>You can add components and dependencies to your app using the cli.</AlertDescription></Alert>

alertVariants export for custom wrappers

alertVariants can be imported from 'ui/src/components/shadcn/ui/alert' and used when building shared wrappers around the Alert primitive.

Collapsible Alert for expandable callouts

Use Collapsible Alert when a callout also needs expandable detail. Use Collapsible only for generic disclosure behaviour that is not itself an alert.

Give your agent this brain

negative: out of scope — Supabase