# UI Setup (https://v1.s3.dimah.dev/docs/react/ui)
[`@dimah-s3/ui`](https://www.npmjs.com/package/@dimah-s3/ui) provides accessible, theme-ready UI controls built on top of [shadcn](https://ui.shadcn.com) design tokens and `@dimah-s3/react` hooks.
## 1. Installation [#1-installation]
```npm
npm i @dimah-s3/ui shadcn
```
```json title="components.json"
{
"registries": {
"@dimah-s3": "https://v1.s3.dimah.dev/r/{name}.json" // [!code ++]
}
}
```
```npm
npx shadcn@latest add @dimah-s3/upload-button
```
## 2. Import CSS stylesheet [#2-import-css-stylesheet]
Import the UI stylesheet in your global CSS to enable animations and design tokens:
```css title="app/globals.css"
@import "shadcn/tailwind.css";
@import "@dimah-s3/ui/styles.css"; /* [!code ++] */
/* shadcn theme variables (`--primary`, `--muted`, …) */
```
## 3. Mount Toaster [#3-mount-toaster]
Mount `` next to `` in your root layout:
```tsx title="app/layout.tsx"
import { Toaster } from "@dimah-s3/ui"; // [!code ++]
import { S3Provider } from "@/lib/s3-client";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
{/* [!code ++] */}
);
}
```
---
## Explore UI components [#explore-ui-components]
## Frequently asked questions [#frequently-asked-questions]
Yes. Use the shadcn registry command (`npx shadcn@latest add @dimah-s3/upload-button`) to copy component source directly into your codebase.