Blookie
Login

Updated apr 23, 2025

Blookie Setup Guide

Blookie is a library of pre-designed, copy-and-paste UI blocks built for the Shadcn UI Component Library using Tailwind CSS v4. These blocks are designed to accelerate your development workflow by providing ready-to-use, customizable UI sections that integrate seamlessly into your project.

Note: Blookie is compatible only with the Tailwind CSS v4 version of Shadcn. While it may theoretically work with Tailwind v3, this is not officially supported and may require manual modifications.

Requirements

Before using Blookie, ensure your project is set up with the Tailwind CSS v4-compatible version of Shadcn. Follow the official guide here to configure your project accordingly.

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.

{
  "$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"
}

Base Layer Utility Classes

To ensure consistency across blocks and allow for centralized layout adjustments, Blookie introduces three base utility classes:

Add the following to your main CSS file:

@layer base {
    .bk-section {
        @apply relative overflow-hidden py-12 md:py-24;
    }

    .bk-container {
        @apply mx-auto w-full max-w-7xl px-6;
    }
}
  • .bk-section: Controls vertical padding.
  • .bk-container: Controls horizontal padding and max-width.

These classes help standardize layouts and simplify future design changes.

Optional Component Adjustments

Blookie includes minor adjustments to default Shadcn components, for example the Card component. You can either:

  1. Modify the Shadcn components directly, or
  2. Add the following data-slot overrides to your CSS:
[data-slot='card'] {
    @apply gap-8 py-8;
}

[data-slot='card-title'] {
    @apply text-lg tracking-tight;
}

[data-slot='card-description'] {
    @apply text-sm/6;
}

[data-slot='card-header'],
[data-slot='card-content'],
[data-slot='card-footer'] {
    @apply px-8;
}

[data-slot='card-footer'] {
    @apply gap-2;
}

Typography

Blookie uses the Inter font for typography. To match the intended design, update your Tailwind theme as follows:

  1. Add Inter to Tailwind Theme
@theme inline {
    --font-sans: 'Inter', sans-serif;
}
  1. Include Inter Font via CDN
<link rel="preconnect" href="https://fonts.bunny.net" />
<link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700,800,900" rel="stylesheet" />

Support

If you encounter any issues or need assistance, contact us at:

hello@blookie.io