Blookie is a collection of UI blocks and templates built with Shadcn UI and Tailwind CSS. Copy and paste them directly into your React projects.
You'll need a React project already set up with Shadcn UI. If you don't have one, follow the official Shadcn docs to get started.
Blookie uses the default Shadcn configuration with new-york as the style and zinc as the base color. Here's a reference components.json:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
"css": "resources/css/app.css",
"baseColor": "zinc",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}Feel free to adjust these settings to match your project.
Blookie uses the Inter font. To match the look, add it to your project:
app.css (your main css file)
@theme inline {
--font-sans: "Inter", sans-serif;
}And include the font in your project (for example using a CDN):
index.html (depends on framework)
<head>
<link rel="preconnect" href="https://fonts.bunny.net" />
<link
href="https://fonts.bunny.net/css?family=inter:400,500,600,700"
rel="stylesheet"
/>
</head>Some blocks support dark mode at the section level. Add this to your global CSS so the .dark class applies background and text colors:
@layer base {
.dark {
@apply bg-background text-foreground;
}
}That's it!