# UI Setup (https://v2.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]
`@dimah-s3/core`, `@dimah-s3/react`, and `@fuma-translate/react` are peer
dependencies. Install them with the package:
```npm
npm i @dimah-s3/ui@beta @dimah-s3/core@beta @dimah-s3/react@beta @fuma-translate/react shadcn
```
```json title="components.json"
{
"registries": {
"@dimah-s3": "https://v2.s3.dimah.dev/r/{name}.json" // [!code ++]
}
}
```
```npm
npx shadcn@latest add @dimah-s3/upload
```
The registry copies the component source into your project and installs the
packages it needs.
## 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 one `` 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 ++] */}
);
}
```
## 4. Render a component [#4-render-a-component]
Each family has a root that holds one hook, and parts that read it. Toasts
are separate: mount `UploadToasts`, `DownloadToasts`, or `DeleteToasts` once
per hook.
```tsx title="components/avatar-uploader.tsx"
"use client";
import { useUpload } from "@dimah-s3/react";
import {
Upload,
UploadToasts,
UploadTrigger,
UploadStatus,
} from "@dimah-s3/ui";
export function AvatarUploader() {
const upload = useUpload({ route: "avatar" });
return (
<>
);
}
```
Components never toast on their own. A second toast owner for the same hook
renders nothing and warns in development.
---
## Explore UI components [#explore-ui-components]
### Upload [#upload]
### Download and delete [#download-and-delete]
### Files [#files]
### Customization [#customization]
## Frequently asked questions [#frequently-asked-questions]
Yes. Add items from the shadcn registry to copy their source into your
codebase. The items are `upload`, `upload-field`, `avatar-upload`,
`object-image`, `object-card`, `download`, `delete`, `object-list`, and
`file-attachment`:
```npm
npx shadcn@latest add @dimah-s3/upload @dimah-s3/delete
```
The components read their strings through `@fuma-translate/react`. See
[Internationalization](https://v2.s3.dimah.dev/docs/i18n).