Sistine

Getting Started

Get up and running with Sistine in minutes

Installation
Install Sistine components using the shadcn CLI

1. Initialize your project

Make sure you have a Next.js project set up with Tailwind CSS configured.

2. Add the Sistine registry

Add the @sistine namespace to your project's components.json once:

{
  "registries": {
    "@sistine": "https://raw.githubusercontent.com/Weekendsuperhero-io/sistine/main/public/r/{name}.json"
  }
}

3. Install components

Use the shadcn CLI to add components from the Sistine registry with your preferred package manager:

bunx shadcn@latest add @sistine/button

4. Start building

Import and use components in your application. All components default to adaptive glass.

MCP (Model Context Protocol) Setup
Configure MCP to use Sistine components with AI assistants

What is MCP?

MCP allows AI assistants to access and use Sistine components directly. This enables seamless integration with tools like Claude, ChatGPT, and other MCP-compatible assistants.

Setup Instructions

Add the following configuration to your MCP settings file (usually ~/.config/mcp.json or similar):

{
  "mcpServers": {
    "sistine": {
      "command": "npx",
      "args": [
        "-y",
        "@shadcn/mcp-server",
        "--registry",
        "https://raw.githubusercontent.com/Weekendsuperhero-io/sistine/main/public/r/registry.json"
      ]
    }
  }
}

Usage

Once configured, you can ask your AI assistant to add Sistine components to your project, and it will automatically use the correct registry URL and component paths.

Basic Usage
Example of using Sistine components
Glass Card
This is a card with glass effect

Card content goes here

Customizing Glass Effects
Override transparency, blur, and other glass properties globally or per-component

Global CSS Variables

All Sistine components automatically use CSS variables for glass effects. You can override these in your global CSS file to change the appearance of all components at once. Changes take effect immediately.

Shared knobs (both modes)

/* In your globals.css, after the Sistine theme import — defaults shown */
:root {
  /* Tint: hue + chroma (the "how colorful" master; 0 = neutral).
     Or set a preset: <html data-glass-tint="sapphire">. */
  --glass-tint-h: 250;
  --glass-tint-c: 0.018;

  /* Blur ladder (glass material; frosted/crystal pin their own) */
  --blur: 2px;          /* base glass */
  --blur-sm: 1px;       /* small controls */
  --blur-lg: 8px;       /* overlays */
  --blur-xl: 12px;      /* heaviest glass tier */
  --blur-frosted: 25px; /* the frosted material */

  /* Veil floor solidity — menus / tooltips / toasts (0–1) */
  --glass-solid-a: 0.65;
}

Mode knobs (light values on :root, dark twins on .dark)

/* Single-number dials the engine composes per mode — defaults shown */
:root {
  --glass-sheet-a: 0.11;  /* glass sheet alpha (how much body) */
  --glass-border-a: 0.16; /* edge alpha */
  --glass-opaque-l: 90;   /* opaque floor lightness */
}

.dark {
  --glass-sheet-a: 0.05;
  --glass-border-a: 0.15;
  --glass-opaque-l: 32;
}

Example: Custom Transparency & Blur

Heavier, milkier glass (or sheerer, barely-there glass) in a few dials:

/* Heavier, milkier glass */
:root {
  --blur: 6px;           /* base glass blur (default 2px) */
  --glass-sheet-a: 0.18; /* more body (default 0.11 / 0.05 dark) */
}

/* Sheerer, barely-there glass */
:root {
  --blur: 1px;
  --glass-sheet-a: 0.06;
}

How It Works

Every glass surface is composed from these tokens:

  • The tint vars (--glass-tint-h / -c) compose the surface sheet (--glass-bg, a gradient), the border color (--glass-border), and the accents: one hue + chroma recolors everything
  • The material's backdrop-filter blurs at its ladder value (--blur for base glass), raised to the diffuse floor when a surface opts in
  • Shadows come from the --glass-shadow twins (mode-aware)

Because components only reference tokens, changing a variable restyles everything at once, globally on :root, or scoped on any wrapper.

Per-Component Customization

To customize an individual component, use the glassVars helper from @/lib/material. It returns a style object of CSS custom properties (tintH → --glass-tint-h, blur → --srf-blur, opacity → --glass-opacity, …), so the overrides route through the token system and can't fight a material, page style, or the theme:

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { glassVars } from "@/lib/material"

export function CustomGlassCard() {
  return (
    <Card style={glassVars({ tintH: 292, blur: 40, opacity: 0.3 })}>
      <CardHeader>
        <CardTitle>Custom Glass Card</CardTitle>
      </CardHeader>
      <CardContent>
        This card has custom glass properties that override the global defaults.
      </CardContent>
    </Card>
  )
}

Calibrated defaults

Tuned for restraint: enough blur and depth to read as glass, never so much that it fogs what is behind it:

  • Blur ladder: base glass 2px (sm 1px · lg 8px · xl 12px), frosted 25px, crystal 2px, opaque none
  • Sheet alpha: 0.11 light / 0.05 dark (--glass-sheet-a)
  • Subtle borders and shadows for depth
  • Only the standard backdrop-filter is authored (no -webkit- twins) and no mix-blend-mode anywhere: the veil floor is free; blur cost scales with area × radius × motion

You can adjust these values to match your design needs while maintaining the glass aesthetic.