Supabase UI

https://github.com/supabase/ui
Admin
Supabase UI is an open-source React component library built with Tailwind CSS, designed to help...
Tokens:35,041
Snippets:358
Trust Score:9.5
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Quick Start Component Usage

Source: https://github.com/supabase/ui/blob/master/_autodocs/overview.md

Basic implementation example showing how to import and use Supabase UI components like Card, Alert, Input, and Button.

```typescript
import React from 'react'
import { Button, Input, Card, Space, Alert } from '@supabase/ui'

export default function App() {
  const [email, setEmail] = React.useState('')

  return (
    <Card title="Welcome">
      <Space direction="vertical" size={3}>
        <Alert title="Get started" variant="info" withIcon>
          Enter your email to begin
        </Alert>
        
        <Input
          label="Email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="your@email.com"
        />
        
        <Space justify="flex-end">
          <Button type="primary">Submit</Button>
        </Space>
      </Space>
    </Card>
  )
}
```

--------------------------------

### Install Supabase UI

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Install the library using npm or yarn.

```bash
npm install @supabase/ui
```

```bash
yarn add @supabase/ui
```

--------------------------------

### Install Supabase Client

Source: https://github.com/supabase/ui/blob/master/README.md

Command to install the required Supabase JavaScript client.

```cli
npm install @supabase/supabase-js
```

--------------------------------

### Import and Use Components

Source: https://github.com/supabase/ui/blob/master/README.md

Basic example of importing and rendering a Supabase UI component.

```js
import { Button } from '@supabase/ui'

//...

return <Button>I am a Supabase UI button</Button>
```

--------------------------------

### Install Peer Dependencies

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Install required React and React DOM packages.

```bash
npm install react react-dom
```

--------------------------------

### Install Supabase UI

Source: https://github.com/supabase/ui/blob/master/README.md

Command to install the Supabase UI package via npm.

```cli
npm install @supabase/ui
```

--------------------------------

### Run Storybook locally

Source: https://github.com/supabase/ui/blob/master/development.md

Start the Storybook development server to view components in the docs explorer.

```cli
npm run storybook
```

--------------------------------

### Apply Lead Paragraph Styling

Source: https://github.com/supabase/ui/blob/master/src/lib/MarkdownSample.md

Example of using the lead class for introductory paragraph styling.

```html
<p class="lead">
  Until now, trying to style an article, document, or blog post with Tailwind has been a tedious
  task that required a keen eye for typography and a lot of complex custom CSS.
</p>
```

--------------------------------

### Import CSS Modules

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Example of importing CSS modules for scoped component styling.

```typescript
// Internal import (example)
// import ButtonStyles from './Button.module.css'
```

--------------------------------

### Normalize CSS

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Install and import modern-normalize for consistent styling.

```bash
npm install modern-normalize
```

```typescript
import 'modern-normalize'
```

--------------------------------

### Form with Toggles

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/toggle.md

A practical example of using multiple toggles within a form structure.

```typescript
import { Toggle, Space, Button, Card } from '@supabase/ui'
import { useState } from 'react'

export default function ToggleForm() {
  const [settings, setSettings] = useState({
    notifications: true,
    marketing: false,
    updates: true,
  })

  const handleChange = (key: string, value: boolean) => {
    setSettings(prev => ({ ...prev, [key]: value }))
  }

  const handleSave = () => {
    console.log('Saving settings:', settings)
  }

  return (
    <Card title="Preferences">
      <Space direction="vertical">
        <Toggle
          label="Email Notifications"
          checked={settings.notifications}
          onChange={(v) => handleChange('notifications', v)}
        />
        <Toggle
          label="Marketing Emails"
          checked={settings.marketing}
          onChange={(v) => handleChange('marketing', v)}
        />
        <Toggle
          label="Product Updates"
          checked={settings.updates}
          onChange={(v) => handleChange('updates', v)}
        />
        <Button type="primary" onClick={handleSave}>
          Save Preferences
        </Button>
      </Space>
    </Card>
  )
}
```

--------------------------------

### Create Supabase Client

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Initialize the Supabase client with project credentials.

```typescript
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  'https://YOUR_PROJECT.supabase.co',
  'YOUR_PUBLIC_ANON_KEY'
)
```

--------------------------------

### Running Storybook commands

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Commands for launching the interactive component documentation or building the static Storybook site.

```bash
npm run storybook
```

```bash
npm run build-storybook
```

--------------------------------

### Run development watch mode

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Enables continuous building during the development process.

```bash
npm run build-watch
```

--------------------------------

### Project File Structure

Source: https://github.com/supabase/ui/blob/master/_autodocs/overview.md

Visual representation of the source directory layout for the Supabase UI library.

```text
src/
├── components/
│   ├── Button/
│   ├── Input/
│   ├── Modal/
│   ├── Card/
│   ├── Alert/
│   ├── Badge/
│   ├── Tabs/
│   ├── Select/
│   ├── Checkbox/
│   ├── Toggle/
│   ├── Space/
│   ├── Typography/
│   ├── Icon/
│   │   └── icons/
│   │       ├── IconActivity/
│   │       ├── IconMail/
│   │       └── ... (280+ icons)
│   ├── Auth/
│   ├── Menu/
│   ├── Dropdown/
│   ├── ContextMenu/
│   ├── Popover/
│   ├── SidePanel/
│   ├── Loading/
│   ├── Divider/
│   ├── Radio/
│   ├── InputNumber/
│   ├── Upload/
│   ├── Listbox/
│   ├── Accordion/
│   └── Image/
├── lib/
│   └── Layout/
│       ├── FormLayout.tsx
│       ├── InputErrorIcon.tsx
│       └── InputIconContainer.tsx
├── types/
└── index.tsx (main entry point)
```

--------------------------------

### Configure Package.json Build Settings

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Standard configuration for ESM and CommonJS distribution paths.

```json
{
  "main": "./dist/cjs/index.js",
  "module": "./dist/esm/index.js",
  "source": "src/index.tsx",
  "sideEffects": false
}
```

--------------------------------

### Import Components

Source: https://github.com/supabase/ui/blob/master/_autodocs/INDEX.md

Standard import syntax for accessing UI components.

```typescript
import { Button, Input, Card, ... } from '@supabase/ui'
```

--------------------------------

### Generate icon files

Source: https://github.com/supabase/ui/blob/master/development.md

Execute the script to generate new icon files and configure them for individual export.

```cli
npm run build:icons
```

--------------------------------

### Use Icons

Source: https://github.com/supabase/ui/blob/master/README.md

Import and use Feather icons by prepending 'Icon' to the icon name.

```js
import { IconMail } from '@supabase/ui'

//...

return <IconMail size="small" />
```

--------------------------------

### Implement Auth Widget

Source: https://github.com/supabase/ui/blob/master/README.md

Integrate the Auth component with a Supabase client and user context provider.

```js
import { Auth, Typography, Button } from "@supabase/ui";
import { createClient } from "@supabase/supabase-js";

const { Text } = Typography

// Create a single supabase client for interacting with your database
const supabase = createClient(
  "https://xyzcompany.supabase.co",
  "public-anon-key"
);

const Container = (props) => {
  const { user } = Auth.useUser();
  if (user)
    return (
      <>
        <Text>Signed in: {user.email}</Text>
        <Button block onClick={() => props.supabaseClient.auth.signOut()}>
          Sign out
        </Button>
      </>
    );
  return props.children;
};

export default function Home() {
  return (
    <Auth.UserContextProvider supabaseClient={supabase}>
      <Container supabaseClient={supabase}>
        <Auth providers={['facebook', 'github']} supabaseClient={supabase}/>
      </Container>
    </Auth.UserContextProvider>
  );
};
```

--------------------------------

### Navigate to Supabase UI directory

Source: https://github.com/supabase/ui/blob/master/development.md

Change the current working directory to the supabase-ui folder.

```cli
cd supabase-ui
```

--------------------------------

### Project File Organization

Source: https://github.com/supabase/ui/blob/master/_autodocs/INDEX.md

Displays the directory structure of the workspace.

```text
/workspace/home/output/
├── INDEX.md (this file)
├── README.md (navigation guide)
├── overview.md (architecture)
├── types.md (type definitions)
├── configuration.md (setup guide)
└── api-reference/
    ├── alert.md
    ├── badge.md
    ├── button.md
    ├── card.md
    ├── checkbox.md
    ├── divider.md
    ├── dropdown.md
    ├── input.md
    ├── modal.md
    ├── radio.md
    ├── select.md
    ├── space.md
    ├── tabs.md
    ├── toggle.md
    └── typography.md
```

--------------------------------

### Implement a basic dropdown

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/dropdown.md

A standard dropdown menu using the Dropdown and Button components.

```typescript
import { Dropdown, Button } from '@supabase/ui'

export default function BasicDropdown() {
  return (
    <Dropdown
      overlay={
        <>
          <Dropdown.Item onClick={() => console.log('Edit')}>
            Edit
          </Dropdown.Item>
          <Dropdown.Item onClick={() => console.log('Delete')}>
            Delete
          </Dropdown.Item>
        </>
      }
    >
      <Button>Actions</Button>
    </Dropdown>
  )
}
```

--------------------------------

### Create a basic card with a title

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/card.md

Use the Card component to wrap content with a simple header title.

```typescript
import { Card } from '@supabase/ui'

export default function BasicCard() {
  return (
    <Card title="Card Title">
      This is the card content
    </Card>
  )
}
```

--------------------------------

### Implement fully featured input

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/input.md

Input component demonstrating multiple configuration options including icons, optional labels, and layout settings.

```typescript
import { Input, IconSearch } from '@supabase/ui'

export default function FullFeaturedInput() {
  return (
    <Input
      label="Search"
      placeholder="Type to search..."
      icon={<IconSearch />}
      descriptionText="Search across all tables"
      labelOptional="optional"
      size="medium"
      layout="vertical"
    />
  )
}
```

--------------------------------

### Build for production

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Generates ESM and CommonJS versions in the dist directory.

```bash
npm run build
```

--------------------------------

### Defining browser support

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Configure target browsers for production and development environments using the browserslist specification.

```json
{
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
```

--------------------------------

### Execute test suite

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Runs tests using React Testing Library and Jest.

```bash
npm test
```

--------------------------------

### Create a Document Layout

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/typography.md

Use the tag prop to define the semantic HTML element and combine with other components like Card.

```typescript
import { Typography, Card } from '@supabase/ui'

export default function Document() {
  return (
    <Card title="Article" style={{ maxWidth: '600px' }}>
      <Typography tag="article">
        <Typography.Title level={1}>Document Title</Typography.Title>
        
        <Typography.Title level={2}>Introduction</Typography.Title>
        <Typography.Text>
          This is the introduction paragraph with important information.
        </Typography.Text>

        <Typography.Title level={2}>Main Section</Typography.Title>
        <Typography.Text>
          Here we discuss the main topic with regular body text. You can
          have <Typography.Link href="#">links inline</Typography.Link> or{' '}
          <strong>bold text</strong>.
        </Typography.Text>

        <Typography.Title level={3}>Subsection</Typography.Title>
        <Typography.Text type="secondary">
          This is secondary text for additional context.
        </Typography.Text>

        <Typography.Title level={3}>Code Example</Typography.Title>
        <Typography.Text>
          Use <Typography.Text code>const x = 42</Typography.Text> for code.
        </Typography.Text>
      </Typography>
    </Card>
  )
}
```

--------------------------------

### Space Sizes

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/space.md

Demonstrates different spacing intervals using the size prop.

```typescript
import { Space, Button } from '@supabase/ui'

export default function SpaceSizes() {
  return (
    <Space direction="vertical" size={4}>
      <Space size={1}>
        <Button size="tiny">Tight</Button>
        <Button size="tiny">Spacing</Button>
      </Space>
      <Space size={3}>
        <Button size="tiny">Medium</Button>
        <Button size="tiny">Spacing</Button>
      </Space>
      <Space size={6}>
        <Button size="tiny">Large</Button>
        <Button size="tiny">Spacing</Button>
      </Space>
    </Space>
  )
}
```

--------------------------------

### Auth Configuration Interface

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Reference for available configuration options for the Auth component.

```typescript
interface AuthProps {
  supabaseClient: SupabaseClient    // Required: Supabase client instance
  className?: string                // Optional: CSS classes
  style?: React.CSSProperties       // Optional: inline styles
  socialLayout?: 'horizontal' | 'vertical'  // Default: 'vertical'
  socialColors?: boolean            // Show provider brand colors
  socialButtonSize?: Size           // Default: 'medium'
  providers?: Provider[]            // Social providers: 'github', 'google', etc.
  view?: ViewType                   // Initial view: 'sign_in', 'sign_up', etc.
  redirectTo?: string               // Redirect URL after auth
  onlyThirdPartyProviders?: boolean // Hide email/password auth
  magicLink?: boolean               // Enable magic link auth
}
```

--------------------------------

### Different size variants

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/button.md

Demonstration of available size options for the button component.

```typescript
import { Button } from '@supabase/ui'

export default function AllSizes() {
  const sizes = ['tiny', 'small', 'medium', 'large', 'xlarge'] as const

  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      {sizes.map(size => (
        <Button key={size} size={size} type="primary">
          {size}
        </Button>
      ))}
    </div>
  )
}
```

--------------------------------

### Implement Basic Typography

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/typography.md

Use the Typography component as a wrapper for Title and Text elements.

```typescript
import { Typography } from '@supabase/ui'

export default function BasicTypography() {
  return (
    <Typography>
      <Typography.Title>Main Heading</Typography.Title>
      <Typography.Text>
        This is body text content that describes something.
      </Typography.Text>
    </Typography>
  )
}
```

--------------------------------

### Import Components

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Import specific components from the library.

```typescript
import { Button, Input, Card } from '@supabase/ui'
```

--------------------------------

### Toggle Sizes

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/toggle.md

Demonstrates the available size variants for the toggle component.

```typescript
import { Toggle, Space } from '@supabase/ui'

export default function ToggleSizes() {
  const sizes = ['tiny', 'small', 'medium', 'large', 'xlarge'] as const

  return (
    <Space direction="vertical">
      {sizes.map(size => (
        <Toggle
          key={size}
          label={`${size} toggle`}
          size={size}
          defaultChecked
        />
      ))}
    </Space>
  )
}
```

--------------------------------

### Form Building Pattern

Source: https://github.com/supabase/ui/blob/master/_autodocs/INDEX.md

Utilizes Space, Input, Toggle, and Button components to construct a standard sign-in form layout.

```typescript
<Space direction="vertical" size={3}>
  <Input label="Email" type="email" />
  <Input label="Password" type="password" />
  <Toggle label="Remember me" />
  <Button type="primary">Sign In</Button>
</Space>
```

--------------------------------

### Configure Badge Sizes

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/badge.md

Apply small, default, or large sizes to the Badge component.

```typescript
import { Badge, Space } from '@supabase/ui'

export default function BadgeSizes() {
  return (
    <Space direction="vertical">
      <Space>
        <Badge size="small" color="blue">Small</Badge>
        <Badge size="small" color="green">Small</Badge>
      </Space>
      <Space>
        <Badge color="blue">Default</Badge>
        <Badge color="green">Default</Badge>
      </Space>
      <Space>
        <Badge size="large" color="blue">Large</Badge>
        <Badge size="large" color="green">Large</Badge>
      </Space>
    </Space>
  )
}
```

--------------------------------

### Implement Basic Badge

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/badge.md

Standard usage of the Badge component with a specified color.

```typescript
import { Badge } from '@supabase/ui'

export default function BasicBadge() {
  return <Badge color="blue">New</Badge>
}
```

--------------------------------

### Implement Basic Select

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/select.md

Standard implementation of a Select component with individual options.

```typescript
import { Select } from '@supabase/ui'
import { useState } from 'react'

export default function BasicSelect() {
  const [value, setValue] = useState('')

  return (
    <Select
      label="Choose a color"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    >
      <Select.Option value="red">Red</Select.Option>
      <Select.Option value="green">Green</Select.Option>
      <Select.Option value="blue">Blue</Select.Option>
    </Select>
  )
}
```

--------------------------------

### Implement Feather Icons

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Import and use Feather icons by prepending 'Icon' to the icon name.

```typescript
import {
  IconMail,
  IconHome,
  IconSettings,
  IconChevronDown,
} from '@supabase/ui'

export default function Icons() {
  return (
    <>
      <IconMail size="small" />
      <IconHome size="medium" />
      <IconSettings size="large" />
      <IconChevronDown size="xlarge" />
    </>
  )
}
```

--------------------------------

### Implement Modal with multiple sizes in TypeScript

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/modal.md

Demonstrates how to toggle a modal's visibility and change its size dynamically using React state.

```typescript
import { Modal, Button, Space } from '@supabase/ui'
import { useState } from 'react'

export default function AllModalSizes() {
  const [visible, setVisible] = useState(false)
  const [size, setSize] = useState('large' as const)

  const sizes = ['tiny', 'small', 'medium', 'large'] as const

  return (
    <>
      <Space>
        {sizes.map(s => (
          <Button
            key={s}
            onClick={() => {
              setSize(s)
              setVisible(true)
            }}
          >
            {s}
          </Button>
        ))}
      </Space>

      <Modal
        visible={visible}
        size={size}
        title={`${size} Modal`}
        onConfirm={() => setVisible(false)}
        onCancel={() => setVisible(false)}
      >
        This is a {size} modal
      </Modal>
    </>
  )
}
```

--------------------------------

### All button types

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/button.md

Displaying all available button type variants.

```typescript
import { Button } from '@supabase/ui'

export default function AllTypes() {
  const types = ['primary', 'default', 'secondary', 'outline', 'dashed', 'link', 'text'] as const

  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      {types.map(type => (
        <Button key={type} type={type}>
          {type}
        </Button>
      ))}
    </div>
  )
}
```

--------------------------------

### Implement Tabs with Add-on Elements

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/tabs.md

Tabs featuring custom elements before or after the tab list using addOnBefore and addOnAfter props.

```typescript
import { Tabs, Button } from '@supabase/ui'

export default function TabsWithAddOn() {
  return (
    <Tabs
      defaultActiveId="tab1"
      addOnBefore={<span style={{ marginRight: '8px' }}>Filter:</span>}
      addOnAfter={<Button size="tiny">+ New Tab</Button>}
    >
      <Tabs.Panel id="tab1" label="Active">
        Active items
      </Tabs.Panel>
      <Tabs.Panel id="tab2" label="Archived">
        Archived items
      </Tabs.Panel>
    </Tabs>
  )
}
```

--------------------------------

### Basic button with click handler

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/button.md

Standard button implementation using an onClick event handler.

```typescript
import { Button } from '@supabase/ui'

export default function MyComponent() {
  const handleClick = () => {
    console.log('Button clicked')
  }

  return <Button onClick={handleClick}>Click Me</Button>
}
```

--------------------------------

### Apply Text Styling

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/typography.md

Use boolean props to apply formatting like bold, underline, strikethrough, code, or mark.

```typescript
import { Typography } from '@supabase/ui'

export default function TextStyling() {
  return (
    <Typography>
      <Typography.Text strong>Bold text</Typography.Text>
      <Typography.Text underline>Underlined text</Typography.Text>
      <Typography.Text delete>Strikethrough text</Typography.Text>
      <Typography.Text code>Monospace code</Typography.Text>
      <Typography.Text mark>Highlighted text</Typography.Text>
    </Typography>
  )
}
```

--------------------------------

### Multiple Alerts

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/alert.md

Shows how to render a list of alerts using the Space component for layout.

```typescript
import { Alert, Space } from '@supabase/ui'

export default function MultipleAlerts() {
  const alerts = [
    { variant: 'success' as const, title: 'Success', message: 'Operation completed' },
    { variant: 'info' as const, title: 'Info', message: 'Please review your settings' },
    { variant: 'warning' as const, title: 'Warning', message: 'Check your usage' },
    { variant: 'danger' as const, title: 'Error', message: 'Something failed' },
  ]

  return (
    <Space direction="vertical">
      {alerts.map((alert) => (
        <Alert
          key={alert.variant}
          title={alert.title}
          variant={alert.variant}
          withIcon
          closable
        >
          {alert.message}
        </Alert>
      ))}
    </Space>
  )
}
```

--------------------------------

### Use Auth Component

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Integrate the Auth component with the Supabase client.

```typescript
import { Auth } from '@supabase/ui'
import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  'https://YOUR_PROJECT.supabase.co',
  'YOUR_PUBLIC_ANON_KEY'
)

export default function LoginPage() {
  return (
    <Auth
      supabaseClient={supabase}
      providers={['github', 'google']}
    />
  )
}
```

--------------------------------

### Handle dropdown actions

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/dropdown.md

Define callback functions to execute logic when specific menu items are clicked.

```typescript
import { Dropdown, Button } from '@supabase/ui'

export default function DropdownActions() {
  const handleEdit = () => console.log('Edit clicked')
  const handleShare = () => console.log('Share clicked')
  const handleDelete = () => console.log('Delete clicked')

  return (
    <Dropdown
      overlay={
        <>
          <Dropdown.Item onClick={handleEdit}>Edit</Dropdown.Item>
          <Dropdown.Item onClick={handleShare}>Share</Dropdown.Item>
          <Dropdown.Item onClick={handleDelete}>Delete</Dropdown.Item>
        </>
      }
    >
      <Button>Actions</Button>
    </Dropdown>
  )
}
```

--------------------------------

### Implement basic text input

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/input.md

Standard usage of the Input component for basic text entry.

```typescript
import { Input } from '@supabase/ui'

export default function BasicInput() {
  return (
    <Input
      label="Email"
      type="email"
      placeholder="user@example.com"
    />
  )
}
```

--------------------------------

### Import Icons

Source: https://github.com/supabase/ui/blob/master/_autodocs/INDEX.md

Syntax for importing specific Feather icons from the library.

```typescript
import { IconMail, IconHome, IconSettings } from '@supabase/ui'
```

--------------------------------

### List with Metadata Pattern

Source: https://github.com/supabase/ui/blob/master/_autodocs/INDEX.md

Renders a list of items using Card and Card.Meta components to display structured metadata.

```typescript
<Space direction="vertical">
  {items.map(item => (
    <Card key={item.id} title={item.title}>
      <Card.Meta title="Author" description={item.author} />
      <Card.Meta title="Status" description={item.status} />
    </Card>
  ))}
</Space>
```

--------------------------------

### Use Components

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Basic usage of a component within a React function.

```typescript
import { Button } from '@supabase/ui'

export default function MyComponent() {
  return <Button>Click me</Button>
}
```

--------------------------------

### Standard Component Prop Patterns

Source: https://github.com/supabase/ui/blob/master/_autodocs/overview.md

Commonly used props across most UI components for sizing, layout, styling, events, state, labels, and help text.

```typescript
// Sizing
size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'

// Layout
layout?: 'horizontal' | 'vertical'

// Styling
className?: string
style?: React.CSSProperties

// Events
onChange?: (value) => void
onClick?: (event) => void
onBlur?: (event) => void
onFocus?: (event) => void

// State
disabled?: boolean
loading?: boolean
error?: string

// Labels
label?: string
labelOptional?: string
beforeLabel?: string
afterLabel?: string

// Help text
descriptionText?: string
```

--------------------------------

### Input Component Props

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/input.md

The Input component accepts various props to configure its appearance, behavior, and state.

```APIDOC
## Input Component

### Description
A text input component that supports labels, icons, error messages, and utility actions like copy and reveal.

### Props
- **autoComplete** (string) - Optional - HTML autocomplete attribute
- **autoFocus** (boolean) - Optional - Auto focus on mount
- **copy** (boolean) - Optional - Show copy button (Default: false)
- **defaultValue** (string | number) - Optional - Initial input value
- **descriptionText** (string) - Optional - Helper text below input
- **disabled** (boolean) - Optional - Disable the input
- **error** (string) - Optional - Error message to display
- **icon** (React.ReactNode) - Optional - Icon to display inside input
- **inputRef** (string) - Optional - Ref for input element
- **label** (string) - Optional - Label text above input
- **afterLabel** (string) - Optional - Text after label
- **beforeLabel** (string) - Optional - Text before label
- **labelOptional** (string) - Optional - Optional label indicator text
- **layout** ('horizontal' | 'vertical') - Optional - Layout mode (Default: 'vertical')
- **name** (string) - Optional - Input name attribute
- **onChange** (function) - Optional - Change event handler
- **onBlur** (function) - Optional - Blur event handler
- **onFocus** (function) - Optional - Focus event handler
- **onKeyDown** (function) - Optional - Key down event handler
- **placeholder** (string) - Optional - Placeholder text
- **reveal** (boolean) - Optional - Hide/reveal sensitive text with button (Default: false)
- **actions** (React.ReactNode) - Optional - Custom action elements after input
- **size** ('tiny' | 'small' | 'medium' | 'large' | 'xlarge') - Optional - Input size (Default: 'medium')
- **borderless** (boolean) - Optional - Remove border styling (Default: false)
- **type** (string) - Optional - HTML input type (Default: 'text')
- **value** (string) - Optional - Controlled input value
- **style** (object) - Optional - Inline styles
- **className** (string) - Optional - CSS class names
```

--------------------------------

### Basic Confirmation Modal

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/modal.md

A standard modal implementation using visible state to toggle display.

```typescript
import { Modal, Button } from '@supabase/ui'
import { useState } from 'react'

export default function ConfirmModal() {
  const [visible, setVisible] = useState(false)

  const handleConfirm = () => {
    console.log('Confirmed!')
    setVisible(false)
  }

  return (
    <>
      <Button onClick={() => setVisible(true)}>Open Modal</Button>
      
      <Modal
        visible={visible}
        title="Confirm Action"
        description="Are you sure you want to proceed?"
        onConfirm={handleConfirm}
        onCancel={() => setVisible(false)}
      />
    </>
  )
}
```

--------------------------------

### Implement TextArea component

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/input.md

Usage of the Input.TextArea sub-component for multi-line text input with character limits.

```typescript
import { Input } from '@supabase/ui'
import { useState } from 'react'

export default function TextAreaExample() {
  const [text, setText] = useState('')

  return (
    <Input.TextArea
      label="Message"
      placeholder="Type your message..."
      value={text}
      onChange={(e) => setText(e.target.value)}
      rows={5}
      limit={500}
    />
  )
}
```

--------------------------------

### Implement Common Component Props

Source: https://github.com/supabase/ui/blob/master/_autodocs/README.md

Standardized interface for sizing, state, events, and labeling across most UI components.

```typescript
// Sizing & Display
size?: 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
className?: string
style?: React.CSSProperties

// State
disabled?: boolean
loading?: boolean
error?: string

// Events
onChange?: (event) => void
onClick?: (event) => void
onBlur?: (event) => void
onFocus?: (event) => void

// Labels & Help
label?: string
labelOptional?: string
descriptionText?: string
beforeLabel?: string
afterLabel?: string
```

--------------------------------

### Implement input with validation

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/input.md

Input component configured with error state and description text for validation feedback.

```typescript
import { Input } from '@supabase/ui'
import { useState } from 'react'

export default function InputWithValidation() {
  const [value, setValue] = useState('')
  const [error, setError] = useState('')

  const handleChange = (e) => {
    setValue(e.target.value)
    if (e.target.value && !e.target.value.includes('@')) {
      setError('Invalid email format')
    } else {
      setError('')
    }
  }

  return (
    <Input
      label="Email"
      type="email"
      value={value}
      onChange={handleChange}
      error={error}
      descriptionText="We'll send you a confirmation"
    />
  )
}
```

--------------------------------

### Implement Select with Option Groups

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/select.md

Organize options into categories using the OptGroup sub-component.

```typescript
import { Select } from '@supabase/ui'
import { useState } from 'react'

export default function SelectWithGroups() {
  const [value, setValue] = useState('')

  return (
    <Select
      label="Choose a country"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    >
      <Select.OptGroup label="North America">
        <Select.Option value="us">United States</Select.Option>
        <Select.Option value="ca">Canada</Select.Option>
        <Select.Option value="mx">Mexico</Select.Option>
      </Select.OptGroup>
      <Select.OptGroup label="Europe">
        <Select.Option value="gb">United Kingdom</Select.Option>
        <Select.Option value="fr">France</Select.Option>
        <Select.Option value="de">Germany</Select.Option>
      </Select.OptGroup>
    </Select>
  )
}
```

--------------------------------

### Standard React Props Extension

Source: https://github.com/supabase/ui/blob/master/_autodocs/types.md

Shows how components extend standard React HTML attributes.

```typescript
// Button extends React.HTMLAttributes<HTMLButtonElement>
// Input extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>
// Select extends Omit<React.InputHTMLAttributes<HTMLSelectElement>, 'size'>
```

--------------------------------

### Display structured data with Card.Meta

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/card.md

Use the Card.Meta sub-component to display key-value pairs or structured profile information.

```typescript
import { Card } from '@supabase/ui'

export default function CardWithMeta() {
  return (
    <Card title="User Profile">
      <Card.Meta
        title="John Doe"
        description="Senior Software Engineer"
      />
      <Card.Meta
        title="Email"
        description="john@example.com"
        style={{ marginTop: '16px' }}
      />
      <Card.Meta
        title="Location"
        description="San Francisco, CA"
        style={{ marginTop: '16px' }}
      />
    </Card>
  )
}
```

--------------------------------

### Use Auth Hook

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Access the authenticated user using the Auth context provider.

```typescript
import { Auth } from '@supabase/ui'
import { createClient } from '@supabase/supabase-js'

const supabase = createClient('...', '...')

function Container() {
  const { user } = Auth.useUser()
  
  if (!user) return <p>Not logged in</p>
  return <p>Welcome {user.email}</p>
}

export default function App() {
  return (
    <Auth.UserContextProvider supabaseClient={supabase}>
      <Container />
    </Auth.UserContextProvider>
  )
}
```

--------------------------------

### Toggle with Description

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/toggle.md

Adds a descriptive text below the toggle label to provide additional context.

```typescript
import { Toggle } from '@supabase/ui'
import { useState } from 'react'

export default function ToggleWithDescription() {
  const [enabled, setEnabled] = useState(false)

  return (
    <Toggle
      label="Allow analytics"
      descriptionText="Help us improve by sharing anonymous usage data"
      checked={enabled}
      onChange={setEnabled}
    />
  )
}
```

--------------------------------

### Create a survey form with radio groups

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/radio.md

Demonstrates grouping multiple radio sets within a card layout for form submission.

```typescript
import { Radio, Space, Button, Card } from '@supabase/ui'
import { useState } from 'react'

export default function SurveyForm() {
  const [responses, setResponses] = useState({
    q1: 'yes',
    q2: 'good',
  })

  const handleSubmit = () => {
    console.log('Survey responses:', responses)
  }

  return (
    <Card title="Quick Survey">
      <Space direction="vertical" size={4}>
        <div>
          <h4>Would you recommend us?</h4>
          <Radio
            name="q1"
            label="Yes"
            value="yes"
            checked={responses.q1 === 'yes'}
            onChange={(e) => setResponses({...responses, q1: e.target.value})}
          />
          <Radio
            name="q1"
            label="No"
            value="no"
            checked={responses.q1 === 'no'}
            onChange={(e) => setResponses({...responses, q1: e.target.value})}
          />
        </div>

        <div>
          <h4>How was your experience?</h4>
          <Radio
            name="q2"
            label="Excellent"
            value="excellent"
            checked={responses.q2 === 'excellent'}
            onChange={(e) => setResponses({...responses, q2: e.target.value})}
          />
          <Radio
            name="q2"
            label="Good"
            value="good"
            checked={responses.q2 === 'good'}
            onChange={(e) => setResponses({...responses, q2: e.target.value})}
          />
          <Radio
            name="q2"
            label="Average"
            value="average"
            checked={responses.q2 === 'average'}
            onChange={(e) => setResponses({...responses, q2: e.target.value})}
          />
        </div>

        <Button type="primary" onClick={handleSubmit}>
          Submit Survey
        </Button>
      </Space>
    </Card>
  )
}
```

--------------------------------

### Implement Select with Icon

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/select.md

Add visual indicators to the Select component using the icon prop.

```typescript
import { Select, IconChevronDown } from '@supabase/ui'
import { useState } from 'react'

export default function SelectWithIcon() {
  const [value, setValue] = useState('')

  return (
    <Select
      label="Priority"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      icon={<IconChevronDown size="small" />}
    >
      <Select.Option value="low">Low</Select.Option>
      <Select.Option value="medium">Medium</Select.Option>
      <Select.Option value="high">High</Select.Option>
    </Select>
  )
}
```

--------------------------------

### Implement input with icon

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/input.md

Input component displaying an icon within the field.

```typescript
import { Input, IconMail } from '@supabase/ui'

export default function InputWithIcon() {
  return (
    <Input
      label="Email"
      type="email"
      icon={<IconMail />}
      placeholder="user@example.com"
    />
  )
}
```

--------------------------------

### Render Badge List

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/badge.md

Display a collection of tags using the Badge component.

```typescript
import { Badge, Typography } from '@supabase/ui'

export default function BadgeList() {
  const tags = ['important', 'urgent', 'feature', 'bug']

  return (
    <Typography>
      <Typography.Title level={4}>Tags</Typography.Title>
      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
        {tags.map((tag) => (
          <Badge key={tag} color="blue">
            #{tag}
          </Badge>
        ))}
      </div>
    </Typography>
  )
}
```

--------------------------------

### Display All Badge Colors

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/badge.md

Iterate through the available color palette to display all badge variations.

```typescript
import { Badge, Space } from '@supabase/ui'

export default function AllColorBadges() {
  const colors = ['gray', 'red', 'yellow', 'green', 'blue', 'indigo', 'purple', 'pink'] as const

  return (
    <Space>
      {colors.map((color) => (
        <Badge key={color} color={color}>
          {color}
        </Badge>
      ))}
    </Space>
  )
}
```

--------------------------------

### CSS Module BEM Naming Convention

Source: https://github.com/supabase/ui/blob/master/_autodocs/overview.md

Follow the BEM-style naming structure for custom component styling.

```css
.sbui-{component}
.sbui-{component}--{variant}
.sbui-{component}--{state}
.sbui-{component}__{subcomponent}
.sbui-{component}__element--{state}
```

--------------------------------

### Display Heading Levels

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/typography.md

Use the level prop to define heading hierarchy from 1 to 5.

```typescript
import { Typography } from '@supabase/ui'

export default function HeadingLevels() {
  return (
    <Typography>
      <Typography.Title level={1}>Level 1 Heading</Typography.Title>
      <Typography.Title level={2}>Level 2 Heading</Typography.Title>
      <Typography.Title level={3}>Level 3 Heading</Typography.Title>
      <Typography.Title level={4}>Level 4 Heading</Typography.Title>
      <Typography.Title level={5}>Level 5 Heading</Typography.Title>
    </Typography>
  )
}
```

--------------------------------

### Define Component Header

Source: https://github.com/supabase/ui/blob/master/_autodocs/INDEX.md

Standard format for the header section of an API reference document.

```text
# Component Name
Brief description
Module: @supabase/ui
Source: src/components/...
```

--------------------------------

### Implement Tabs with Icons

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/tabs.md

Tabs displaying icons alongside labels using the icon prop on Tabs.Panel.

```typescript
import { Tabs, IconHome, IconSettings, IconHelpCircle } from '@supabase/ui'

export default function TabsWithIcons() {
  return (
    <Tabs defaultActiveId="tab1">
      <Tabs.Panel id="tab1" label="Home" icon={<IconHome />}>
        Home content
      </Tabs.Panel>
      <Tabs.Panel id="tab2" label="Settings" icon={<IconSettings />}>
        Settings content
      </Tabs.Panel>
      <Tabs.Panel id="tab3" label="Help" icon={<IconHelpCircle />}>
        Help content
      </Tabs.Panel>
    </Tabs>
  )
}
```

--------------------------------

### Basic Component Usage

Source: https://github.com/supabase/ui/blob/master/_autodocs/README.md

Import components from the library and use them within a React functional component.

```typescript
import { Button, Input, Card } from '@supabase/ui'

export default function MyComponent() {
  return (
    <Card title="Form">
      <Input label="Email" type="email" />
      <Button type="primary">Submit</Button>
    </Card>
  )
}
```

--------------------------------

### Button as link

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/button.md

Button rendered as an anchor tag using the as prop.

```typescript
import { Button } from '@supabase/ui'

export default function LinkButton() {
  return (
    <Button as="a" href="/docs" type="link">
      Read Documentation
    </Button>
  )
}
```

--------------------------------

### Enable dropdown arrow

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/dropdown.md

Use the arrow prop to display a visual pointer on the dropdown menu.

```typescript
import { Dropdown, Button } from '@supabase/ui'

export default function DropdownWithArrow() {
  return (
    <Dropdown
      arrow
      overlay={
        <>
          <Dropdown.Item>Option 1</Dropdown.Item>
          <Dropdown.Item>Option 2</Dropdown.Item>
        </>
      }
    >
      <Button>Click me</Button>
    </Dropdown>
  )
}
```

--------------------------------

### Configure Tailwind CSS

Source: https://github.com/supabase/ui/blob/master/src/lib/MarkdownSample.md

Default configuration file for a Tailwind CSS project.

```js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}
```

--------------------------------

### Define Icon Size Types

Source: https://github.com/supabase/ui/blob/master/_autodocs/configuration.md

Available size variants for icon components.

```typescript
type IconSize = 'tiny' | 'small' | 'medium' | 'large' | 'xlarge'
```

--------------------------------

### Alert with Complex Content

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/alert.md

Demonstrates embedding other components like Typography inside an alert.

```typescript
import { Alert, Typography } from '@supabase/ui'

export default function AlertWithContent() {
  return (
    <Alert
      title="Account Verification"
      variant="warning"
      withIcon
      closable
    >
      <Typography.Text>
        Your account needs verification.{' '}
        <Typography.Link href="/verify">
          Click here to verify now
        </Typography.Link>
      </Typography.Text>
    </Alert>
  )
}
```

--------------------------------

### Apply different radio sizes

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/radio.md

Supports multiple size variants including tiny, small, medium, large, and xlarge.

```typescript
import { Radio, Space } from '@supabase/ui'

export default function RadioSizes() {
  const sizes = ['tiny', 'small', 'medium', 'large', 'xlarge'] as const

  return (
    <Space direction="vertical">
      {sizes.map((size) => (
        <Radio
          key={size}
          name={size}
          label={`${size} radio`}
          value={size}
          size={size}
          defaultChecked={size === 'medium'}
        />
      ))}
    </Space>
  )
}
```

--------------------------------

### Complex Select Component with Groups

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/select.md

Demonstrates a Select component with grouped options using Select.OptGroup and individual Select.Option elements.

```typescript
import { Select } from '@supabase/ui'
import { useState } from 'react'

export default function ComplexSelect() {
  const [value, setValue] = useState('')

  return (
    <Select
      label="Database Type"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      descriptionText="Select the type of database you want to use"
      required
    >
      <Select.Option value="">-- Please select --</Select.Option>
      <Select.OptGroup label="Relational">
        <Select.Option value="postgres">PostgreSQL</Select.Option>
        <Select.Option value="mysql">MySQL</Select.Option>
        <Select.Option value="mariadb">MariaDB</Select.Option>
      </Select.OptGroup>
      <Select.OptGroup label="NoSQL">
        <Select.Option value="mongodb">MongoDB</Select.Option>
        <Select.Option value="firestore">Firestore</Select.Option>
      </Select.OptGroup>
    </Select>
  )
}
```

--------------------------------

### Implement Basic Tabs

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/tabs.md

Standard uncontrolled tabs using defaultActiveId to set the initial selection.

```typescript
import { Tabs } from '@supabase/ui'
import { useState } from 'react'

export default function BasicTabs() {
  return (
    <Tabs defaultActiveId="tab1">
      <Tabs.Panel id="tab1" label="Home">
        <p>Home content here</p>
      </Tabs.Panel>
      <Tabs.Panel id="tab2" label="Settings">
        <p>Settings content here</p>
      </Tabs.Panel>
      <Tabs.Panel id="tab3" label="Help">
        <p>Help content here</p>
      </Tabs.Panel>
    </Tabs>
  )
}
```

--------------------------------

### Dropdown RootProps Interface

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/dropdown.md

Defines the configuration options for the main Dropdown component, including positioning and state management.

```typescript
interface RootProps {
  open?: boolean
  arrow?: boolean
  onOpenChange?: DropdownMenuProps['onOpenChange']
  side?: DropdownMenuContentProps['side']
  align?: DropdownMenuContentProps['align']
  sideOffset?: DropdownMenuContentProps['sideOffset']
  overlay?: React.ReactNode
  children?: React.ReactNode
  className?: string
  style?: React.CSSProperties
  isNested?: Boolean
}
```

--------------------------------

### Complex Layout with Space

Source: https://github.com/supabase/ui/blob/master/_autodocs/api-reference/space.md

Combines multiple Space components to create a structured dashboard layout.

```typescript
import { Space, Button, Card, Typography } from '@supabase/ui'

export default function ComplexLayout() {
  return (
    <Card title="Dashboard">
      <Space direction="vertical" size={4} style={{ width: '100%' }}>
        <Space justify="space-between" style={{ width: '100%' }}>
          <Typography.Title level={4}>Users</Typography.Title>
          <Button type="primary" size="small">Add User</Button>
        </Space>
        
        <Space wrap>
          <Card style={{ flex: 1, minWidth: '200px' }}>
            <Typography.Title level={5}>Total</Typography.Title>
            <Typography.Text strong>1,234</Typography.Text>
          </Card>
          <Card style={{ flex: 1, minWidth: '200px' }}>
            <Typography.Title level={5}>Active</Typography.Title>
            <Typography.Text strong>567</Typography.Text>
          </Card>
        </Space>
      </Space>
    </Card>
  )
}
```

--------------------------------

### Display an image with a caption using HTML

Source: https://github.com/supabase/ui/blob/master/src/lib/MarkdownSample.md

Use this structure to embed images with associated descriptive text in a figure element.

```html
<figure>
  <img
    src="https://images.unsplash.com/photo-1556740758-90de374c12ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
    alt=""
  />
  <figcaption>
    Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
    classical Latin literature from 45 BC, making it over 2000 years old.
  </figcaption>
</figure>
```

--------------------------------

### Dialog Pattern

Source: https://github.com/supabase/ui/blob/master/_autodocs/INDEX.md

Implements a modal dialog with confirmation and cancellation handlers.

```typescript
<Modal
  visible={open}
  title="Confirm Action"
  onConfirm={handleConfirm}
  onCancel={() => setOpen(false)}
/>
```
Tokens:
Raw