Didit/ui

Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. Use this to build your own component library.

Installation

Add Tailwind CSS 4

Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.

Follow the Tailwind CSS installation instructions to get started.

Add dependencies

Add the following dependencies to your project:

pnpm add  @diditui/icons-react @diditui/core tw-animate-css

Add Inter font

Next js

Use next/font module to add the font in your nextjs app

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}

Google Font css @import

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
@import "tailwindcss";
@import "tw-animate-css";
@import "@diditui/core/theme.css";
...

Configure styles

Add the following to your styles/globals.css file.

@import "tailwindcss";
@import "tw-animate-css";
@import "@diditui/core/theme.css";

@custom-variant dark (&:is(.dark *));

@layer base {
  body {
    @apply font-inter bg-neutral-white text-neutral-black;
  }
}

@layer components {
  .gradient-gray-100-900 {
    background: var(--gradient-gray-100-900);
  }

  .gradient-gray-100-300 {
    background: var(--gradient-gray-100-300);
  }

  .gradient-gray-600-500 {
    background: var(--gradient-gray-600-500);
  }

  .gradient-gray-700-500 {
    background: var(--gradient-gray-700-500);
  }

  .gradient-gray-900-800 {
    background: var(--gradient-gray-900-800);
  }

  .gradient-brand-custom {
    background: var(--gradient-brand-custom);
  }
  .gradient-brand-custom-2 {
    background: var(--gradient-brand-custom-2);
  }

  .gradient-brand-100-300 {
    background: var(--gradient-brand-100-300);
  }

  .gradient-brand-600-500 {
    background: var(--gradient-brand-600-500);
  }

  .gradient-brand-700-500 {
    background: var(--gradient-brand-700-500);
  }

  .gradient-brand-900-800 {
    background: var(--gradient-brand-900-800);
  }
}

That's it

You can now start adding components to your project.

import { Button } from "diditui/core";

export default function Page() {
  return (
    <div>
      <Button variant="primary" size="md"> Create App </Buttom>
    </div>
  );
}