Supabase UI

Storybook is a tool used to build UI components in isolation from your application's business logic, data, and context. This isolation allows you to develop hard-to-reach component states easily.

Key concepts:

• Stories: Saved UI states that you can revisit during development, testing, or QA.
• Component-driven development: A recommended process of building UIs starting from atomic components and progressing toward full pages.

To learn how to implement specific component patterns, you can examine the example stories located in the src/storybook-examples directory.

If you want to customize the introductory documentation or the welcome message in your Storybook instance, you can edit the Markdown file located at:

src/storybook-examples/welcome.mdx

When using Tailwind CSS, default browser styling is removed from elements like h1, p, and ul. To style blocks of vanilla HTML content (such as content from a CMS or a Markdown file) without disabling Tailwind's base styles, use the @tailwindcss/typography plugin.

Applying the prose class to a container element will automatically apply beautiful, well-formatted typography to all nested HTML elements within that container.

<article class="prose">
  <h1>Garlic bread with cheese: What the science tells us</h1>
  <p>
    For years parents have espoused the health benefits of eating garlic bread with cheese to their
    children...
  </p>
</article>

Supabase UI uses Storybook to develop and organize components. You can view components locally in the Storybook docs explorer. Ensure you are in the supabase-ui directory before running the commands.

Storybook runs by default on http://localhost:6006/.

cd supabase-ui
npm install
npm run storybook

To test Supabase UI components in the context of another local project, you must use npm link. This allows your target application to use the local version of the library instead of the published version.

For general guidance on the linking process, refer to the NPM Linking and Unlinking instructions.

The @supabase/ui library provides a comprehensive set of React components categorized by their functional role. You can import these components directly from the main entrypoint.

General

• Button
• Typography
• Icon
• Image

Displays

• Card
• Badge
• Tabs
• Alert
• Accordion

Navigation

• Menu

Overlays

• Modal
• SidePanel
• Dropdown
• ContextMenu
• Popover

Utilities

• Space
• Loading
• Divider

Data Entry

• Select
• Listbox
• Checkbox
• Input
• InputNumber
• Radio
• Toggle
• Upload

Auth

• Auth

A common issue when testing the library locally is having multiple versions of React running simultaneously. To resolve this, you can link the React instance from your target application into the supabase-ui library so that both use the same single copy of React.

Follow these steps:

1. In your target application's directory, run: npm link inside /your-app/node_modules/react to create a global link for that specific React version.
2. In the supabase-ui directory, run: npm link react to make the library use the application's React copy.
3. In your target application's directory, run: npm link @supabase/ui to link the library into your app.

Use the icon generation script to create new icon files and set them up for individual export.

npm run build:icons

The @supabase/ui library provides a collection of icon components based on react-feather. Each icon is a React component that accepts standard SVG attributes along with specific color and size props for easy styling.

IconProps

When using an icon, you can pass the following props:

• color (string): The color of the icon.
• size (string | number): The size of the icon.
• SVGAttributes<SVGElement>: Any standard SVG attributes (e.g., className, style, onClick).