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.

You can import either from the package root:

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

Or from subpaths:

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

Available components

Shared helpers

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

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 { FileUpload } from "@andibase/ui/file-upload";

Simplest usage

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

Common patterns

Upload or create:

<FileUpload mode="both" />

Upload only:

<FileUpload mode="upload" />

Create only:

<FileUpload mode="new" />

Fixed workspace path:

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

Default editable path:

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

Useful props

Result object

onSuccess receives:

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

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.

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