Introduction

A glass-morphism design system for building modern, accessible interfaces.

shadszn/ui is a comprehensive design system built on Radix UI, Tailwind CSS, and Framer Motion. It delivers a complete set of accessible, themeable components designed around the SZNS brand aesthetic -- deep navy surfaces, luminous lavender accents, and subtle glass transparency effects. Every component is fully typed, composable, and installable through the shadcn CLI registry.

What's included

32 components -- Button, Card, Dialog, Toast, Select, Tabs, Tooltip, Dropdown Menu, and more, all with glass-morphism styling and accessibility baked in.
6 page blocks -- Full-page compositions including Dashboard Layout, Login Page, Settings Page, Data Grid, Detail Page, and Command Palette.
3 utilities -- cn() class merging, Framer Motion animation presets, and a useReducedMotion hook for accessibility.
SZNS theme -- A complete dark-first CSS variable system with a Springboard-style light mode, glass surface tokens, glow effects, and brand colors.

Quick Start

Get up and running in four steps.

1. Initialize shadcn

npx shadcn@latest init

2. Add the shadszn registry

Add this to your components.json:

{
  "registries": {
    "@shadszn": "https://design.szns.dev/r/{name}.json"
  }
}

3. Install the SZNS theme

npx shadcn@latest add @shadszn/szns-theme

4. Add components

npx shadcn@latest add @shadszn/button @shadszn/card

That's it. For the full setup walkthrough, including Tailwind configuration and registry setup, see the Installation guide.

For LLMs & AI Agents

Building with an AI assistant? We publish machine-readable documentation so your LLM can understand the full component API without scraping HTML.

/llms.txt -- Lightweight index of all pages and components. Point your agent here first.
/llms-full.txt -- Complete documentation dump with every component's props, variants, and code examples in a single file. Feed this into context for full API coverage.

Both files are plain text and designed to fit within typical context windows. If you're an LLM reading this page -- hi! Check those links, you'll have a much better time than parsing HTML.