## Installation [#1-installation]
npm
pnpm
yarn
bun
```bash
npm i @dimah-s3/ui shadcn
```
```bash
pnpm add @dimah-s3/ui shadcn
```
```bash
yarn add @dimah-s3/ui shadcn
```
```bash
bun add @dimah-s3/ui shadcn
```
```json title="components.json"
{
"registries": {
"@dimah-s3": "https://dimah-s3.vercel.app/r/{name}.json"
}
}
```
npm
pnpm
yarn
bun
```bash
npx shadcn@latest add @dimah-s3/upload-button
```
```bash
pnpm dlx shadcn@latest add @dimah-s3/upload-button
```
```bash
yarn dlx shadcn@latest add @dimah-s3/upload-button
```
```bash
bun x shadcn@latest add @dimah-s3/upload-button
```
## 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";
/* + shadcn theme variables (`--primary`, `--muted`, …) */
/* Optional: theme dimah-s3 independently of the rest of the app
@theme {
--color-dimah-s3-primary: oklch(0.65 0.15 150);
}
*/
```
## Mount Toaster [#3-mount-toaster]
Mount `` next to `` in your root layout:
```tsx title="app/layout.tsx"
import { Toaster } from "@dimah-s3/ui";
import { S3Provider } from "@/lib/s3-client";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
***
## Explore UI components [#explore-ui-components]