UI Kit

The @crowdin/serverless-apps-sdk/ui entry point ships a React component library styled to match the Crowdin UI (it also re-exports everything from /react).

import { AppUiProvider, Button, Card } from "@crowdin/serverless-apps-sdk/ui";

function App() {
  return (
    <AppUiProvider>
      <Card>
        <Button>Save</Button>
      </Card>
    </AppUiProvider>
  );
}

Wrap your app in AppUiProvider so the components pick up the host theme: dark mode and Crowdin’s CSS variables are applied automatically. Like the rest of the SDK, this works only inside the Crowdin host - there is no standalone preview outside it.

Components

The library is built on shadcn/ui (the “new-york” style), re-themed with Crowdin’s design tokens. Each component keeps its upstream API, so the shadcn/ui docs are the reference for props, composition, and examples - import from @crowdin/serverless-apps-sdk/ui instead of your own components/ui folder.

The full set (~55 components):

accordion, alert, alert-dialog, aspect-ratio, avatar, badge, breadcrumb, button, button-group, card, carousel, chart, checkbox, collapsible, combobox, command, context-menu, dialog, direction, drawer, dropdown-menu, empty, field, form, hover-card, input, input-group, input-otp, item, kbd, label, menubar, native-select, navigation-menu, pagination, popover, progress, radio-group, resizable, scroll-area, select, separator, sheet, sidebar, skeleton, slider, sonner, spinner, switch, table, tabs, textarea, toggle, toggle-group, tooltip

Render errors

AppUiProvider wraps its children in an error boundary. If the app throws while rendering, the boundary shows the error message in a themed alert instead of leaving a blank iframe. The boundary itself does not log - React reports every caught error to the app’s console on its own, so the error appears there exactly once.

To take over the presentation, render your own AppErrorBoundary closer to the failing subtree, optionally with a custom fallback:

import { AppErrorBoundary } from "@crowdin/serverless-apps-sdk/ui";

<AppErrorBoundary fallback={(error) => <p>Could not load: {error.message}</p>}>
  <ReportTable />
</AppErrorBoundary>

The default fallback is deliberately not localized: a boundary that depends on i18n can fail for the same reason it is catching.

Styles

Two stylesheets ship with the SDK - import exactly one of them:

Import	When to use
@crowdin/serverless-apps-sdk/ui/theme.css	Tailwind theme source - for apps that run Tailwind CSS themselves (CLI-built apps do)
@crowdin/serverless-apps-sdk/ui/styles.css	Prebuilt stylesheet - for apps that do not use Tailwind

Apps scaffolded with the CLI use Tailwind CSS and import theme.css out of the box.