@diditui/core
v0.0.15
Published
Accessible and customizable components that you can copy and paste into your apps. Free. Open Source. **Use this to build your own component library**.
Readme
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-cssAdd 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>
);
}