# UI Components (/docs/ui-components)



`@andibase/ui` is the shared component package available inside the app runtime. It exposes shared components derived from `shadcn/ui`, so workspace apps can reuse the same primitives and patterns instead of redefining UI from scratch.

For the upstream component patterns and usage guidance, see the official [`shadcn/ui` components documentation](https://ui.shadcn.com/docs/components).

You can import either from the package root:

```tsx
import { Button, Card, Input } from "@andibase/ui";
```

Or from subpaths:

```tsx
import { Button } from "@andibase/ui/button";
import { Input } from "@andibase/ui/input";
```

Available components [#available-components]

| Import path                            | Provides                                                             | Notes                                                       |
| -------------------------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------- |
| `@andibase/ui/accordion`               | `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger` | Collapsible content sections                                |
| `@andibase/ui/alert`                   | `Alert`, `AlertDescription`, `AlertTitle`                            | Inline status and notice blocks                             |
| `@andibase/ui/alert-dialog`            | `AlertDialog` family                                                 | Destructive and confirmation dialogs                        |
| `@andibase/ui/aspect-ratio`            | `AspectRatio`                                                        | Fixed-ratio media container                                 |
| `@andibase/ui/avatar`                  | `Avatar`, `AvatarFallback`, `AvatarImage`                            | User and entity avatars                                     |
| `@andibase/ui/badge`                   | `Badge`                                                              | Compact labels and status markers                           |
| `@andibase/ui/breadcrumb`              | `Breadcrumb` family                                                  | Breadcrumb navigation                                       |
| `@andibase/ui/button`                  | `Button`, `buttonVariants`                                           | Primary action control                                      |
| `@andibase/ui/button-group`            | `ButtonGroup`                                                        | Grouped button layouts                                      |
| `@andibase/ui/calendar`                | `Calendar`                                                           | Date picker calendar UI                                     |
| `@andibase/ui/card`                    | `Card` family                                                        | Structured content containers                               |
| `@andibase/ui/carousel`                | `Carousel` family                                                    | Horizontal carousel layouts                                 |
| `@andibase/ui/chart`                   | `ChartContainer` and chart helpers                                   | Shared chart wrappers                                       |
| `@andibase/ui/checkbox`                | `Checkbox`                                                           | Boolean form control                                        |
| `@andibase/ui/collapsible`             | `Collapsible` family                                                 | Expand and collapse content                                 |
| `@andibase/ui/combobox`                | `Combobox`                                                           | Searchable select-style input                               |
| `@andibase/ui/command`                 | `Command` family                                                     | Command palette and searchable lists                        |
| `@andibase/ui/context-menu`            | `ContextMenu` family                                                 | Right-click and contextual menus                            |
| `@andibase/ui/dialog`                  | `Dialog` family                                                      | Modal dialogs                                               |
| `@andibase/ui/drawer`                  | `Drawer` family                                                      | Slide-up or slide-in panels                                 |
| `@andibase/ui/dropdown-menu`           | `DropdownMenu` family                                                | Triggered menu popovers                                     |
| `@andibase/ui/empty`                   | `Empty`                                                              | Empty-state placeholder                                     |
| `@andibase/ui/field`                   | `Field` family                                                       | Form field composition helpers                              |
| `@andibase/ui/file-upload`             | `FileUpload`                                                         | Upload a file to a workspace path or create a new text file |
| `@andibase/ui/hover-card`              | `HoverCard` family                                                   | Rich hover previews                                         |
| `@andibase/ui/input`                   | `Input`                                                              | Single-line text input                                      |
| `@andibase/ui/input-group`             | `InputGroup` family                                                  | Grouped input layouts                                       |
| `@andibase/ui/input-otp`               | `InputOTP` family                                                    | One-time password input                                     |
| `@andibase/ui/item`                    | `Item`                                                               | Reusable item row layout                                    |
| `@andibase/ui/kbd`                     | `Kbd`                                                                | Keyboard shortcut label                                     |
| `@andibase/ui/label`                   | `Label`                                                              | Form labels                                                 |
| `@andibase/ui/link`                    | `Link`                                                               | Styled link component                                       |
| `@andibase/ui/menubar`                 | `Menubar` family                                                     | App-style menu bars                                         |
| `@andibase/ui/navigation-menu`         | `NavigationMenu` family                                              | Structured navigation menus                                 |
| `@andibase/ui/pagination`              | `Pagination` family                                                  | Page navigation controls                                    |
| `@andibase/ui/pagination-bar-skeleton` | `PaginationBarSkeleton`                                              | Loading state for pagination                                |
| `@andibase/ui/popover`                 | `Popover` family                                                     | Floating popover surfaces                                   |
| `@andibase/ui/progress`                | `Progress`                                                           | Progress indicator                                          |
| `@andibase/ui/radio-group`             | `RadioGroup`, `RadioGroupItem`                                       | Single-choice form control                                  |
| `@andibase/ui/resizable`               | `ResizablePanelGroup` family                                         | Resizable panel layouts                                     |
| `@andibase/ui/scroll-area`             | `ScrollArea`, `ScrollBar`                                            | Custom scroll containers                                    |
| `@andibase/ui/select`                  | `Select` family                                                      | Select dropdown input                                       |
| `@andibase/ui/separator`               | `Separator`                                                          | Visual section separator                                    |
| `@andibase/ui/sheet`                   | `Sheet` family                                                       | Side sheets and slide-over panels                           |
| `@andibase/ui/sidebar`                 | `Sidebar` family                                                     | Application sidebar primitives                              |
| `@andibase/ui/skeleton`                | `Skeleton`                                                           | Loading placeholders                                        |
| `@andibase/ui/slider`                  | `Slider`                                                             | Range and value slider                                      |
| `@andibase/ui/sonner`                  | `Toaster`, `toast`                                                   | Toast notifications                                         |
| `@andibase/ui/spinner`                 | `Spinner`                                                            | Loading spinner                                             |
| `@andibase/ui/switch`                  | `Switch`                                                             | Toggle switch control                                       |
| `@andibase/ui/table`                   | `Table` family                                                       | Tabular data layouts                                        |
| `@andibase/ui/table-skeleton`          | `TableSkeleton`                                                      | Loading state for tables                                    |
| `@andibase/ui/tabs`                    | `Tabs`, `TabsContent`, `TabsList`, `TabsTrigger`                     | Tabbed interfaces                                           |
| `@andibase/ui/textarea`                | `Textarea`                                                           | Multiline text input                                        |
| `@andibase/ui/toggle`                  | `Toggle`                                                             | Two-state pressed control                                   |
| `@andibase/ui/toggle-group`            | `ToggleGroup`, `ToggleGroupItem`                                     | Grouped toggles                                             |
| `@andibase/ui/tooltip`                 | `Tooltip` family                                                     | Hover and focus tooltips                                    |

Shared helpers [#shared-helpers]

In addition to UI components, the package also exports shared helpers:

| Import path                     | Provides      | Notes                     |
| ------------------------------- | ------------- | ------------------------- |
| `@andibase/ui/lib/utils`        | `cn`          | Shared class name utility |
| `@andibase/ui/hooks/use-mobile` | `useIsMobile` | Mobile breakpoint hook    |

FileUpload [#fileupload]

`FileUpload` is a ready-to-use workspace file input for embedded apps.

It handles:

* direct file uploads through the workspace file API
* creating a new text or markdown file
* optional fixed paths when the app should save to one exact location
* embedded auth automatically through `window.andibase.fetch(...)`

Import [#import]

```tsx
import { FileUpload } from "@andibase/ui/file-upload";
```

Simplest usage [#simplest-usage]

```tsx
export default function App() {
  return <FileUpload />;
}
```

Common patterns [#common-patterns]

Upload or create:

```tsx
<FileUpload mode="both" />
```

Upload only:

```tsx
<FileUpload mode="upload" />
```

Create only:

```tsx
<FileUpload mode="new" />
```

Fixed workspace path:

```tsx
<FileUpload mode="upload" path="imports/customers.csv" />
```

Default editable path:

```tsx
<FileUpload defaultPath="notes/today.md" />
```

Useful props [#useful-props]

| Prop                    | Type                                | Default                       | Notes                                                                        |
| ----------------------- | ----------------------------------- | ----------------------------- | ---------------------------------------------------------------------------- |
| `mode`                  | `"both" \| "upload" \| "new"`       | `"both"`                      | Simplest way to control which flows are shown                                |
| `path`                  | `string`                            | `undefined`                   | Fixed workspace-relative path. When set, the path input becomes read-only UI |
| `defaultPath`           | `string`                            | `undefined`                   | Initial editable path value                                                  |
| `defaultNewFileContent` | `string`                            | `""`                          | Initial content for the new-file textarea                                    |
| `accept`                | `string`                            | `undefined`                   | Native file input `accept` filter                                            |
| `heading`               | `ReactNode`                         | `"Files"`                     | Card title                                                                   |
| `description`           | `ReactNode`                         | built-in text                 | Card description                                                             |
| `metadata`              | `Record<string, string>`            | `undefined`                   | Extra metadata sent to the file API                                          |
| `onSuccess`             | `(result) => void`                  | `undefined`                   | Called after upload or file creation succeeds                                |
| `onError`               | `(error) => void`                   | `undefined`                   | Called when the request fails                                                |
| `request`               | `(path, init) => Promise<Response>` | embedded app fetch or `fetch` | Override only when using the component outside the embedded app runtime      |

Result object [#result-object]

`onSuccess` receives:

```ts
{
  action: "upload" | "new";
  path: string;
  file: {
    id: string;
    name: string;
    path: string;
    contentType?: string | null;
    sizeBytes?: number | null;
  };
}
```

Outside embedded apps [#outside-embedded-apps]

If you use the component outside the custom app iframe runtime, pass a `request` function that adds the right auth and headers for your environment.

```tsx
<FileUpload
  request={(path, init) =>
    fetch(path, {
      ...init,
      credentials: "include",
      headers: {
        ...init?.headers,
        "x-workspace-handle": workspaceHandle,
      },
    })
  }
/>
```


## Documentation Navigation
Use these paths to traverse the relevant docs and generated API reference files for the app.
- UI Components [current] -> `/docs/ui-components` (source: `content/docs/ui-components.mdx`)
- andibase Overview -> `/docs` (source: `content/docs/index.mdx`)
- Get started (for AI Agents) -> `/docs/agent-get-started` (source: `content/docs/agent-get-started.mdx`)
- Agent Tools -> `/docs/agent-tools` (source: `content/docs/agent-tools.mdx`)
- Agents -> `/docs/agents` (source: `content/docs/agents.mdx`)
- Agent Auth -> `/docs/api-reference/agent-auth`
- Get agent login request -> `/docs/api-reference/agent-auth/get-api-v1-agent-auth-requests-usercode`
- Exchange agent login -> `/docs/api-reference/agent-auth/post-api-v1-agent-auth-exchange`
- Start agent login -> `/docs/api-reference/agent-auth/post-api-v1-agent-auth-requests`
- Approve agent login -> `/docs/api-reference/agent-auth/post-api-v1-agent-auth-requests-usercode-approve`
- Deny agent login -> `/docs/api-reference/agent-auth/post-api-v1-agent-auth-requests-usercode-deny`
- Agents -> `/docs/api-reference/agents`
- Delete workspace agent -> `/docs/api-reference/agents/delete-api-v1-agents-id`
- List workspace agents -> `/docs/api-reference/agents/get-api-v1-agents`
- Get workspace agent -> `/docs/api-reference/agents/get-api-v1-agents-id`
- List agent chats -> `/docs/api-reference/agents/get-api-v1-agents-id-chats`
- Get agent chat -> `/docs/api-reference/agents/get-api-v1-agents-id-chats-chatid`
- Update workspace agent -> `/docs/api-reference/agents/patch-api-v1-agents-id`
- Create workspace agent -> `/docs/api-reference/agents/post-api-v1-agents`
- Send agent message -> `/docs/api-reference/agents/post-api-v1-agents-id-chats-chatid-messages`
- Apps -> `/docs/api-reference/apps`
- Delete app -> `/docs/api-reference/apps/delete-api-v1-apps-id`
- List workspace apps -> `/docs/api-reference/apps/get-api-v1-apps`
- Get app by id -> `/docs/api-reference/apps/get-api-v1-apps-id`
- Update app -> `/docs/api-reference/apps/patch-api-v1-apps-id`
- Create app -> `/docs/api-reference/apps/post-api-v1-apps`
- Automations -> `/docs/api-reference/automations`
- Delete workspace automation -> `/docs/api-reference/automations/delete-api-v1-automations-id`
- List workspace automations -> `/docs/api-reference/automations/get-api-v1-automations`
- Get workspace automation -> `/docs/api-reference/automations/get-api-v1-automations-id`
- List automation runs -> `/docs/api-reference/automations/get-api-v1-automations-id-runs`
- Get automation run -> `/docs/api-reference/automations/get-api-v1-automations-id-runs-runid`
- Update workspace automation -> `/docs/api-reference/automations/patch-api-v1-automations-id`
- Create workspace automation -> `/docs/api-reference/automations/post-api-v1-automations`
- Run automation -> `/docs/api-reference/automations/post-api-v1-automations-id-run`
- Trigger automation webhook -> `/docs/api-reference/automations/post-api-v1-automations-webhooks-publicid-secret`
- Channels -> `/docs/api-reference/channels`
- Delete channel -> `/docs/api-reference/channels/delete-api-v1-channels-channelid`
- List channels -> `/docs/api-reference/channels/get-api-v1-channels`
- Get channel -> `/docs/api-reference/channels/get-api-v1-channels-channelid`
- Update channel -> `/docs/api-reference/channels/patch-api-v1-channels-channelid`
- Create channel -> `/docs/api-reference/channels/post-api-v1-channels`
- Data -> `/docs/api-reference/data`
- Data Definitions -> `/docs/api-reference/data-definitions`
- Delete data definition -> `/docs/api-reference/data-definitions/delete-api-v1-data-definitions-id`
- List data definitions -> `/docs/api-reference/data-definitions/get-api-v1-data-definitions`
- Get data definition -> `/docs/api-reference/data-definitions/get-api-v1-data-definitions-id`
- Update data definition -> `/docs/api-reference/data-definitions/patch-api-v1-data-definitions-id`
- Create data definition -> `/docs/api-reference/data-definitions/post-api-v1-data-definitions`
- Data SQL Query -> `/docs/api-reference/data-sql-query`
- Run SQL query against workspace data -> `/docs/api-reference/data-sql-query/post-api-v1-data-sql-query`
- Get data by id -> `/docs/api-reference/data/get-api-v1-data-definitions-definitionid-data-id`
- Select all data row ids -> `/docs/api-reference/data/get-api-v1-data-definitions-definitionid-data-select-all`
- List data -> `/docs/api-reference/data/get-api-v1-data-definitions-definitionid-query`
- Patch many data rows -> `/docs/api-reference/data/patch-api-v1-data-definitions-definitionid-data-patch-many`
- Delete many data rows -> `/docs/api-reference/data/post-api-v1-data-definitions-definitionid-data-delete-many`
- Upsert many data rows -> `/docs/api-reference/data/post-api-v1-data-definitions-definitionid-data-upsert-many`
- DuckDB Query -> `/docs/api-reference/duckdb-query`
- Run a DuckDB query against registered sources -> `/docs/api-reference/duckdb-query/post-api-v1-duckdb-query`
- Explorer -> `/docs/api-reference/explorer`
- Delete explorer folder -> `/docs/api-reference/explorer/delete-api-v1-workspace-nodes-nodeid`
- List explorer nodes -> `/docs/api-reference/explorer/get-api-v1-workspace-nodes`
- List explorer folders -> `/docs/api-reference/explorer/get-api-v1-workspace-nodes-folders`
- Rename explorer folder -> `/docs/api-reference/explorer/patch-api-v1-workspace-nodes-nodeid-rename`
- Create folder -> `/docs/api-reference/explorer/post-api-v1-workspace-nodes-folders`
- Move explorer node -> `/docs/api-reference/explorer/post-api-v1-workspace-nodes-nodeid-move`
- Files -> `/docs/api-reference/files`
- List workspace files -> `/docs/api-reference/files/get-api-v1-files`
- Read file content -> `/docs/api-reference/files/get-api-v1-files-fileid-content`
- Create file -> `/docs/api-reference/files/post-api-v1-files`
- Complete file upload -> `/docs/api-reference/files/post-api-v1-files-fileid-complete`
- Presign multipart parts -> `/docs/api-reference/files/post-api-v1-files-fileid-parts`
- Update file content -> `/docs/api-reference/files/put-api-v1-files-fileid-content`
- Messages -> `/docs/api-reference/messages`
- List channel messages -> `/docs/api-reference/messages/get-api-v1-channels-channelid-messages`
- List thread messages -> `/docs/api-reference/messages/get-api-v1-channels-channelid-threads-threadid-messages`
- Create channel message -> `/docs/api-reference/messages/post-api-v1-channels-channelid-messages`
- Create thread message -> `/docs/api-reference/messages/post-api-v1-channels-channelid-threads-threadid-messages`
- Notifications -> `/docs/api-reference/notifications`
- List notification devices -> `/docs/api-reference/notifications/get-api-v1-notifications-devices`
- Check Expo notification receipts -> `/docs/api-reference/notifications/post-api-v1-notifications-receipts`
- Send workspace notifications -> `/docs/api-reference/notifications/post-api-v1-notifications-send`
- Runs -> `/docs/api-reference/runs`
- List workspace runs -> `/docs/api-reference/runs/get-api-v1-runs`
- Get workspace run -> `/docs/api-reference/runs/get-api-v1-runs-runid`
- Threads -> `/docs/api-reference/threads`
- List channel threads -> `/docs/api-reference/threads/get-api-v1-channels-channelid-threads`
- Get thread -> `/docs/api-reference/threads/get-api-v1-channels-channelid-threads-threadid`
- Create thread -> `/docs/api-reference/threads/post-api-v1-channels-channelid-threads`
- Workflows -> `/docs/api-reference/workflows`
- Delete workflow definition -> `/docs/api-reference/workflows/delete-api-v1-workflows-id`
- List workflow definitions -> `/docs/api-reference/workflows/get-api-v1-workflows`
- Get workflow definition -> `/docs/api-reference/workflows/get-api-v1-workflows-id`
- Update workflow definition -> `/docs/api-reference/workflows/patch-api-v1-workflows-id`
- Create workflow definition -> `/docs/api-reference/workflows/post-api-v1-workflows`
- Workspaces -> `/docs/api-reference/workspaces`
- Delete workspace API key -> `/docs/api-reference/workspaces/delete-api-v1-workspaces-workspacehandle-api-keys-keyid`
- Delete workspace credential -> `/docs/api-reference/workspaces/delete-api-v1-workspaces-workspacehandle-credentials-credentialid`
- Delete workspace invitation -> `/docs/api-reference/workspaces/delete-api-v1-workspaces-workspacehandle-invitations-invitationid`
- Delete workspace user -> `/docs/api-reference/workspaces/delete-api-v1-workspaces-workspacehandle-users-userid`
- List my workspaces -> `/docs/api-reference/workspaces/get-api-v1-workspaces`
- List workspace API keys -> `/docs/api-reference/workspaces/get-api-v1-workspaces-workspacehandle-api-keys`
- List workspace credentials -> `/docs/api-reference/workspaces/get-api-v1-workspaces-workspacehandle-credentials`
- List workspace credential tools -> `/docs/api-reference/workspaces/get-api-v1-workspaces-workspacehandle-credentials-credentialid-tools`
- List workspace invitations -> `/docs/api-reference/workspaces/get-api-v1-workspaces-workspacehandle-invitations`
- List workspace users -> `/docs/api-reference/workspaces/get-api-v1-workspaces-workspacehandle-users`
- Create workspace -> `/docs/api-reference/workspaces/post-api-v1-workspaces`
- Create workspace API key -> `/docs/api-reference/workspaces/post-api-v1-workspaces-workspacehandle-api-keys`
- Create workspace credential -> `/docs/api-reference/workspaces/post-api-v1-workspaces-workspacehandle-credentials`
- Invite user to workspace -> `/docs/api-reference/workspaces/post-api-v1-workspaces-workspacehandle-invitations`
- Create workspace user -> `/docs/api-reference/workspaces/post-api-v1-workspaces-workspacehandle-users`
- Apps -> `/docs/apps` (source: `content/docs/apps.mdx`)
- Authentication -> `/docs/authentication` (source: `content/docs/authentication.mdx`)
- Building Blocks -> `/docs/building-blocks` (source: `content/docs/building-blocks.mdx`)
- Data Model -> `/docs/data-model` (source: `content/docs/data-model.mdx`)
- Embedded Host Actions -> `/docs/embedded-host-actions` (source: `content/docs/embedded-host-actions.mdx`)
- Introduction -> `/docs/introduction` (source: `content/docs/introduction.mdx`)
- Recipes -> `/docs/receipes` (source: `content/docs/receipes/index.mdx`)
- Construction Site Visit Agent -> `/docs/receipes/construction-site-visit-agent` (source: `content/docs/receipes/construction-site-visit-agent.mdx`)
- Daily Lead Qualification Agent -> `/docs/receipes/daily-lead-qualification-agent` (source: `content/docs/receipes/daily-lead-qualification-agent.mdx`)
- Day Planner Agent -> `/docs/receipes/day-planner-agent` (source: `content/docs/receipes/day-planner-agent.mdx`)
- Expense Tracker -> `/docs/receipes/expense-tracker` (source: `content/docs/receipes/expense-tracker.mdx`)
- Legal Case Tracker -> `/docs/receipes/legal-case-tracker` (source: `content/docs/receipes/legal-case-tracker.mdx`)
- Spare Parts Request Agent -> `/docs/receipes/spare-parts-request-agent` (source: `content/docs/receipes/spare-parts-request-agent.mdx`)
- Weekly Report Email Agent -> `/docs/receipes/weekly-report-email-agent` (source: `content/docs/receipes/weekly-report-email-agent.mdx`)