# 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`).

```tsx
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`](/serverless-apps/building-app/context/) 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](/serverless-apps/development/troubleshooting/#opening-the-app-directly-in-a-browser).

## Components

The library is built on [shadcn/ui](https://ui.shadcn.com/docs/components) (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 - <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](/serverless-apps/reference/cli-commands/) use Tailwind CSS and import `theme.css` out of the box.