UI Setup

InstallationCopy Anchor Link

npm i @dimah-s3/ui@beta @dimah-s3/core@beta @dimah-s3/react@beta @fuma-translate/react shadcn

Import CSS stylesheetCopy Anchor Link

Import the UI stylesheet in your global CSS to enable animations and design tokens:

@import "shadcn/tailwind.css";
@import "@dimah-s3/ui/styles.css"; 

/* shadcn theme variables (`--primary`, `--muted`, …) */

Mount ToasterCopy Anchor Link

Mount one <Toaster /> next to <S3Provider> in your root layout:

import { Toaster } from "@dimah-s3/ui"; 
import { S3Provider } from "@/lib/s3-client";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <S3Provider>{children}</S3Provider>
        <Toaster />
      </body>
    </html>
  );
}

Render a componentCopy Anchor Link

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.

"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 (
    <>
      <Upload upload={upload}>
        <UploadTrigger />
        <UploadStatus />
      </Upload>
      <UploadToasts upload={upload} />
    </>
  );
}

Components never toast on their own. A second toast owner for the same hook renders nothing and warns in development.