Docs

Use a block

Quarry blocks are source you own after you paste them. They are styled with Tailwind utilities and the shadcn/ui token names. There is no Quarry runtime.

1. Tokens

A project that already ran shadcn init has these tokens. Otherwise paste this into the global CSS. It targets Tailwind v4.

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-ring: var(--ring);
}

:root {
  --background: #ffffff;
  --foreground: #18181b;
  --card: #ffffff;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --border: #e4e4e7;
  --primary: #18181b;
  --primary-foreground: #fafafa;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --accent: #f4f4f5;
  --accent-foreground: #18181b;
  --ring: #18181b;
  color-scheme: light;
}

.dark {
  --background: #09090b;
  --foreground: #fafafa;
  --card: #09090b;
  --muted: #27272a;
  --muted-foreground: #a1a1aa;
  --border: #3f3f46;
  --primary: #fafafa;
  --primary-foreground: #18181b;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --accent: #27272a;
  --accent-foreground: #fafafa;
  --ring: #d4d4d8;
  color-scheme: dark;
}

2. Frameworks

Next.js

The Next.js tab is a file tree. Copy each file to the path shown: a page under app/quarry/ and components under components/quarry/. Install lucide-react if a file imports it. Files that handle a submit already include use client.

Or add the running app as a shadcn registry. In components.json:

{
  "registries": {
    "@quarry": {
      "url": "https://quarry.bitscorp.co/r/{name}.json",
      "headers": {
        "Authorization": "Bearer ${QUARRY_TOKEN}"
      }
    }
  }
}

Set QUARRY_TOKEN from your account page, then run npx shadcn@latest add @quarry/hero-01. Demo blocks also accept the block URL with no token. The command is on each open block. The registry installs the page and its components. Vue and Angular stay on the copy button.

React

Same components, with the Next.js directive removed. src/App.tsx renders the block. Drop the folder into Vite or any client tree that already has Tailwind and, when needed, lucide-react.

Vue

Copy the .vue files. Each component is its own single-file component, with Tailwind classes and inline SVG icons, so you do not add an icon package. Forms use @submit.prevent.

Angular

Copy the standalone components. Each template is inline, and the parent lists the pieces it renders. Forms call preventDefault on submit. The block selector stays quarry-hero-01 and the same pattern for every other block.

3. What you are copying

Sample content is a fictional product named Northline. Replace the words.
Links point at hashes so a preview does not leave the page. Point them at your routes.
Mobile navigation uses the native details element, so it works without a script.
Dark mode follows the .dark class on an ancestor, the same way shadcn does.