@dimah-s3/ui provides accessible, theme-ready UI controls built on top of shadcn design tokens and @dimah-s3/react hooks.

Installation

npm i @dimah-s3/ui shadcn

Import CSS stylesheet

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

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

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

app/layout.tsx

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>
  );
}