Getting Started
Blookie is a library of pre-designed UI blocks built using Tailwind CSS and Shadcn UI. This guide shows you how to set up your Shadcn/ui React project so you can start to copy and paste Blookie blocks into your app.
Requirements
Before using Blookie, ensure your project is set up with the Tailwind CSS v4 compatible version of Shadcn. Follow the official guide to set it up.
Note: Blookie can work with Tailwind v3 as well, but it's not officially supported and may require manual tweaks on your part.
Shadcn Configuration
Blookie is designed to work with the default configuration of Shadcn using new-york as the style preference and zinc as the base color.
Here's a sample components.json file for reference:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "",
"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"
}For help check out the Shadcn documentation.
Typography Setup (Optional)
Blookie uses the Inter font for typography. If you want to do the same, update your Tailwind theme as follows:
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>Enable dark mode at block level (optional)
If you want to enable dark mode for specific blocks or sections (as used in some blocks), you can update your CSS base layer to apply the bg-background and text-foreground classes to the dark class as well like so:
@layer base {
* {
@apply border-border outline-ring/50;
}
body,
.dark {
@apply bg-background text-foreground;
}
}That's it! You're ready to start copy-pasting Blookie components into your project.
If something didn't work or you got stuck, feel free to email us at hello@blookie.io. We'd love to help and improve this guide based on your feedback.