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

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.