A modern, open source React UI kit for DuckyHQ projects.
Figma design file with components is here.
This is using Next.js, and Storybook. You're gonna wanna use npm run storybook
to start the dev server. All the components are inside the components folder. And the stories are separate, in the stories folder.
This will not be an NPM module. What you have to do is get this source code (clone, or download zip), then copy the Tailwind input file (/app/globals.css), the Tailwind config (tailwind.config.ts), then the entire components folder, all into your own project, replacing the old files. Then just use the components like you normally would, and the Tailwind classes.
The spacing system is literal, so p-32
equals exactly 32 pixels: padding: 32px;
.
Put this code inside your layout.tsx
:
import { Outfit, JetBrains_Mono } from "next/font/google";
const outfit = Outfit({
subsets: ["latin"],
variable: "--font-outfit",
weight: ["400", "500", "600", "700"],
});
const jetBrainsMono = JetBrains_Mono({
subsets: ["latin"],
variable: "--font-jetbrains-mono",
weight: ["400"],
});
And add this className to your main body tag:
className={`${jetBrainsMono.variable} ${outfit.variable} font-sans text-text-1`}
Inside Radix primitive components, like Select, or Dialogs, the font doesn't load correctly. With Next.js, you can import Outfit
from next/font/google
, and use the same method above inside the actual component(this comes default!). Not sure how to fix this with other font providers yet.
You could use Google Fonts, or FontSource, but make sure the fonts work with Tailwind CSS, so they can be used with the fontFamily definitions in the config.