Stackable

Reference

Components

Components provide the building blocks for your extension UI. Access them via the ui.* namespace after importing from the SDK, and use only the attributes documented for each component.

import { ui } from '@stackable-labs/sdk-extension-react'

39 available components — only use the attributes listed below for each component.

Layout

<ui.Card>

Allowed attributes: className, onClick

Card Header
Card content goes here
import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Card>
  <ui.CardHeader>Card Header</ui.CardHeader>
  <ui.CardContent>Card content goes here</ui.CardContent>
</ui.Card>
Card Header
Card content goes here

<ui.CardContent>

Allowed attributes: className

<ui.CardHeader>

Allowed attributes: className

<ui.Inline>

Allowed attributes: gap, className

Inline
import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Inline>Inline</ui.Inline>
Inline
gap="0"
Inline
gap="1"
Inline
gap="2"
Inline
gap="3"
Inline
gap="4"
Inline
gap="5"
Inline
gap="6"
Inline
gap="8"
Inline
gap="10"
Inline
gap="12"

<ui.ScrollArea>

Allowed attributes: className

ScrollArea
import { ui } from '@stackable-labs/sdk-extension-react'

<ui.ScrollArea className="h-32">Scrollable content</ui.ScrollArea>
ScrollArea

<ui.Separator>

Allowed attributes: className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Separator />

<ui.Stack>

Allowed attributes: gap, direction, className

Stack
import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Stack>Stack</ui.Stack>
Stack
direction="row"
Stack
direction="column"

Text

<ui.Badge>

Allowed attributes: variant, hue, tone, className

Badge
import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Badge variant="default">Badge</ui.Badge>
Badge
variant="default"
Badge
variant="secondary"
Badge
variant="destructive"
Badge
variant="outline"
Badge
variant="ghost"
Badge
variant="link"

<ui.Heading>

Allowed attributes: level, className

Heading

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Heading level="2">Heading</ui.Heading>

Heading

level="1"

Heading

level="2"

Heading

level="3"

Heading

level="4"
Heading
level="5"
Heading
level="6"

<ui.Text>

Allowed attributes: className, tone

Text

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Text>Text content</ui.Text>

Text

tone="default"

Text

tone="muted"

Text

tone="destructive"

Input

<ui.Button>

Allowed attributes: variant, size, disabled, onClick, type, className, title

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Button variant="default">Button</ui.Button>
variant="default"
variant="destructive"
variant="outline"
variant="secondary"
variant="ghost"
variant="link"

<ui.Checkbox>

Allowed attributes: checked, onChange, disabled, className, id

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Checkbox />

<ui.Input>

Allowed attributes: type, placeholder, value, onChange, disabled, className, id

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Input placeholder="Enter text..." />

<ui.Label>

Allowed attributes: htmlFor, className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Label>Label</ui.Label>

<ui.RadioGroup>

Allowed attributes: value, defaultValue, onChange, className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.RadioGroup defaultValue="option1">
  <ui.Inline gap={2}>
    <ui.RadioGroupItem value="option1" id="r1" />
    <ui.Label htmlFor="r1">Option 1</ui.Label>
  </ui.Inline>
  <ui.Inline gap={2}>
    <ui.RadioGroupItem value="option2" id="r2" />
    <ui.Label htmlFor="r2">Option 2</ui.Label>
  </ui.Inline>
</ui.RadioGroup>

<ui.RadioGroupItem>

Allowed attributes: value, disabled, className, id

<ui.Select>

Allowed attributes: value, defaultValue, onChange, placeholder, disabled, className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Select placeholder="Select an option">
  <ui.SelectOption value="option1">Option 1</ui.SelectOption>
  <ui.SelectOption value="option2">Option 2</ui.SelectOption>
</ui.Select>

<ui.SelectOption>

Allowed attributes: value, disabled, className

<ui.Switch>

Allowed attributes: checked, onChange, disabled, size, className, id

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Switch />
size="sm"
size="default"

<ui.Textarea>

Allowed attributes: placeholder, value, onChange, disabled, rows, className, id

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Textarea placeholder="Enter text..." rows={3} />

Allowed attributes: href, target, rel, className

Link
import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Link href="#">Link text</ui.Link>
Link

<ui.Menu>

Allowed attributes: title, className

Menu

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Menu title="Menu">
  <ui.MenuItem label="Item 1" description="Description" />
  <ui.MenuItem label="Item 2" description="Description" />
</ui.Menu>

Menu

<ui.MenuItem>

Allowed attributes: icon, label, description, onClick, className

<ui.Tabs>

Allowed attributes: defaultValue, className

Content for Tab 1
import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Tabs defaultValue="tab1">
  <ui.TabsList>
    <ui.TabsTrigger value="tab1">Tab 1</ui.TabsTrigger>
    <ui.TabsTrigger value="tab2">Tab 2</ui.TabsTrigger>
  </ui.TabsList>
  <ui.TabsContent value="tab1">Content for Tab 1</ui.TabsContent>
  <ui.TabsContent value="tab2">Content for Tab 2</ui.TabsContent>
</ui.Tabs>
Content for Tab 1

<ui.TabsContent>

Allowed attributes: value, className

<ui.TabsList>

Allowed attributes: className

<ui.TabsTrigger>

Allowed attributes: value, className

Feedback

<ui.Alert>

Allowed attributes: variant, title, className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Alert variant="default" title="Alert">Alert message</ui.Alert>
variant="default"
variant="destructive"

<ui.Progress>

Allowed attributes: value, className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Progress value={60} />

<ui.Skeleton>

Allowed attributes: width, height, className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Skeleton width="200px" height="20px" />

<ui.Tooltip>

Allowed attributes: content, className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Tooltip content="Tooltip text">
  <ui.Button variant="outline">Hover me</ui.Button>
</ui.Tooltip>

Composite

<ui.Avatar>

Allowed attributes: src, alt, className

U
import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Avatar alt="User" />
U

<ui.Collapsible>

Allowed attributes: defaultOpen, className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Collapsible>
  <ui.CollapsibleTrigger>Toggle</ui.CollapsibleTrigger>
  <ui.CollapsibleContent>Content here</ui.CollapsibleContent>
</ui.Collapsible>

<ui.CollapsibleContent>

Allowed attributes: className

<ui.CollapsibleTrigger>

Allowed attributes: className

<ui.Icon>

Allowed attributes: name, size, className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Icon name="info" size="md" />
size="sm"
size="md"
size="lg"

<ui.Image>

Allowed attributes: src, alt, loading, width, height, className

Placeholder
import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Image src="https://placehold.co/300x150/png" alt="Placeholder" />
Placeholder
loading="lazy"
Placeholder
loading="eager"

<ui.QRCode>

Allowed attributes: value, size, variant, level, alt, className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.QRCode value="https://stackablelabs.com" alt="Scan to open Stackable Labs" />
size="sm"
size="md"
size="lg"

<ui.Video>

Allowed attributes: videoId, autoPlay, showControls, allowTracking, shape, title, className

import { ui } from '@stackable-labs/sdk-extension-react'

<ui.Video videoId="dQw4w9WgXcQ" />
shape="horizontal"
shape="vertical"
shape="square"
shape="auto"

Available Icons (31)

Use with <ui.Icon name="icon-name" />. Valid icon names:

name="arrow-left"
name="calendar"
name="check-circle-2"
name="chevron-left"
name="chevron-right"
name="clock"
name="credit-card"
name="external-link"
name="help-circle"
name="info"
name="loader-2"
name="mail"
name="map-pin"
name="message-circle"
name="message-square"
name="package"
name="phone"
name="search"
name="shopping-bag"
name="sparkles"
name="truck"
name="user"
name="video"
name="x-circle"
name="alert-circle"
name="book-open"
name="qr-code"
name="image"
name="image-off"
name="circle-play"
name="tv-minimal-play"

Auto-generated from Stackable Extension SDK. Questions/Issues? developers@stackablelabs.com

Previous
Project Structure
Next
Tailwind Utilities
Components | Stackable Labs :. Dev Documentation