Sistine

A modern, glassmorphic component library inspired by Apple's design language, built with Next.js 16, React 19, and shadcn-ui registry.

✨ Features

50+ Glass Components - Comprehensive collection of beautiful, glassy UI components
Apple-Inspired Design - Glassmorphism effects following Apple's design standards
OKLCH tint system - Recolor every glass surface from a hue + chroma pair or a built-in preset
Theme Support - Built-in light/dark mode with automatic theme switching
Enhanced Effects - Glow, shimmer, ripple, and gradient animations
Fully Customizable - Per-component glass effect customization
Package Manager Support - Install with pnpm, yarn, npm, or bun
TypeScript - Fully typed components for better developer experience
Accessible - Built on Radix UI primitives for accessibility
Tailwind CSS - Utility-first styling with CSS variables

🚀 Quick Start

Installation

Sistine is a namespaced shadcn 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"
  }
}

Then add any component with the shadcn CLI using your preferred package manager:

pnpm:

pnpm dlx shadcn@latest add @sistine/button

yarn:

yarn dlx shadcn@latest add @sistine/button

npm:

npx shadcn@latest add @sistine/button

bun:

bunx shadcn@latest add @sistine/button

Usage

After installation, import and use components in your project:

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function Example() {
  return (
    <div>
      <Button effect="glow">
        Click me
      </Button>
      <Card material="frosted" border gradient>
        <CardHeader>
          <CardTitle>Beautiful Card</CardTitle>
        </CardHeader>
        <CardContent>Your content here</CardContent>
      </Card>
    </div>
  )
}

Note: The import path depends on your project's component directory configuration. By default, shadcn CLI installs components to @/components/ui/.

📚 Documentation

Visit the full documentation for:

Complete component reference
Installation guides
Customization examples
Theme configuration
Glass effect customization

🎨 Interactive Playground

Explore and test components interactively with Storybook:

# Start Storybook
pnpm storybook

# Build Storybook (static)
pnpm build-storybook

Storybook provides:

✨ Live component previews
🎛️ Interactive controls for all props
📖 Auto-generated documentation
♿ Accessibility testing
🌓 Theme switching
📱 Responsive viewport testing

Visit http://localhost:6006 after starting Storybook.

🏗️ Architecture

Every component lives in a single tree — components/ui/[name].tsx (published under registry/ui/) — and draws its surface from the material system in lib/material.ts:

Four materials — glass, frosted, crystal, opaque — via the material prop. Leave it off and the surface is adaptive: it follows the page's data-glass style; an explicit material pins the element under any page style.
Orthogonal axes — border, veil, diffuse, gradient, glow, sheen — layered on top of any material. Booleans with typed refinements: border="rim" | "frame" (2px / 4px), diffuse="stained" (dyed glass), glow="lg".
Hover effects — effect="glow | shimmer | ripple | lift | scale" from lib/hover-effects.ts.
Accessibility from Radix UI primitives, fully typed, and themed through CSS tokens.

Components call materialSurface() from lib/material.ts instead of hardcoding recipe class strings, so the material → markup mapping lives in one place.

🎨 Customization

Retint all glass

Every color is authored in oklch in app/theme/ (aggregated by app/globals.css; full reference: docs/color-tokens.md). The whole glass system is driven by the tint variables — change them, or set a preset on <html data-glass-tint="…">, to recolor every surface, border, and accent at once:

:root {
  --glass-tint-h: 250; /* hue 0–360 */
  --glass-tint-c: 0.018; /* chroma — the "how colorful" master (0 = neutral) */
}

Built-in presets ship as [data-glass-tint] blocks: jewels (single hue — neutral, rose, carnelian, amber, bone, peridot, emerald, turquoise, aquamarine, sapphire, amethyst, tourmaline) and frescoes (multi-hue — sistine, muse, aurora, gloaming). Switch the surface treatment with data-glass on <html>: glass (default), frosted, crystal, opaque. Components also take a glow axis prop — a tint-tracking colored halo, documented in docs/glow.md.

Presets are turnkey, pure CSS. Set the attribute and toggle .dark (e.g. next-themes) — every preset and fresco carries its own day + night values, the scene backgrounds flip with the mode, and static text baselines keep all four materials legible with no JavaScript. Optionally install and mount <AutoForeground /> (once, in your root layout) to upgrade those baselines to exact APCA-solved foregrounds that re-band live as the tint, mode, or surface knobs change — it refines, it is never required.

Per-Component Customization

Pass CSS-variable overrides through the glassVars helper (the successor to the old glass={{…}} prop — it emits --glass-* / --srf-* custom properties that route through the token system):

import { glassVars } from "@/lib/material"

<Card style={glassVars({ tintH: 293, blur: 30, opacity: 0.3 })}>
  Content
</Card>

📦 Available Components

Form Components

Button, Input, Textarea, Label
Checkbox, Switch, Radio Group
Select, Input OTP

Display Components

Card, Badge, Avatar, Alert
Skeleton, Separator, Table

Overlay Components

Dialog, Alert Dialog, Popover
Tooltip, Hover Card, Sheet
Drawer, Sidebar

Navigation Components

Tabs, Accordion, Breadcrumb
Dropdown Menu, Navigation Menu
Pagination, Scroll Area

Data Display

Calendar, Chart, Command
Slider, Toggle, Toggle Group

And more! See the full component list.

🛠️ Development

Prerequisites

Node.js 18+
pnpm, yarn, npm, or bun

Setup

# Clone the repository
git clone https://github.com/Weekendsuperhero-io/sistine.git
cd sistine

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Start Storybook (interactive playground)
pnpm storybook

# Build the project
pnpm build

# Build the registry
pnpm registry:build

Project Structure

sistine/
├── app/                    # Next.js app directory
├── components/             # Shared components
├── lib/                    # Utilities and helpers
├── public/                 # Static assets
├── registry/
│   └── ui/                # Components (one tree, material system)
├── stories/               # Storybook stories
└── registry.json          # Component registry

🚀 Deployment

Deploy to Vercel

Deploy both the documentation site and Storybook to Vercel:

Quick Start:

Deploy main site: Import your repo at vercel.com/new
Deploy Storybook: Import the same repo again with these settings:
- Build Command: pnpm build-storybook
- Output Directory: storybook-static
Set environment variable NEXT_PUBLIC_STORYBOOK_URL in main site
Redeploy main site

Both deploy from the same repo — the main site (default settings) and Storybook (build command pnpm build-storybook, output storybook-static).

Build Commands

# Build main site
pnpm build

# Build Storybook
pnpm build-storybook

# Test builds locally
pnpm start  # Serves main site on http://localhost:3000
npx http-server storybook-static  # Serves Storybook on http://localhost:8080

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

📄 License

This project is licensed under the MIT License.

🔗 Links

🙏 Acknowledgments

Built with shadcn/ui
Powered by Radix UI
Inspired by Apple's design language

Made with ❤️ by Weekend Superhero LLC · Based on Glass UI by Crenspire Technologies (MIT)

Name		Name	Last commit message	Last commit date
Latest commit History 51 Commits
.github		.github
.idea		.idea
.storybook		.storybook
app		app
components		components
docs		docs
hooks		hooks
lib		lib
public		public
registry		registry
scripts		scripts
stories		stories
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
CREDITS.md		CREDITS.md
LICENSE		LICENSE
NOTICE		NOTICE
README.md		README.md
biome.json		biome.json
components.json		components.json
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
postcss.config.mjs		postcss.config.mjs
registry.json		registry.json
tsconfig.json		tsconfig.json
vercel.json		vercel.json

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

Sistine

✨ Features

🚀 Quick Start

Installation

Usage

📚 Documentation

🎨 Interactive Playground

🏗️ Architecture

🎨 Customization

Retint all glass

Per-Component Customization

📦 Available Components

Form Components

Display Components

Overlay Components

Navigation Components

Data Display

🛠️ Development

Prerequisites

Setup

Project Structure

🚀 Deployment

Deploy to Vercel

Build Commands

🤝 Contributing

📄 License

🔗 Links

🙏 Acknowledgments

About

Topics

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Packages