Introduction

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

shadszn/ui was built so that internal SZNS engineers could create projects with a consistent design language — deep navy surfaces, luminous lavender accents, and subtle glass transparency effects — without starting from scratch every time.

We chose the shadcn registry model over a traditional npm package because we wanted maximum flexibility. When you install a component, the source code is copied directly into your project — you own it and can edit it freely. There's no import { Button } from "shadszn" dependency to manage or version-lock against. Just your code, in your repo, styled to the SZNS brand.

Components are built on Radix UI, Tailwind CSS, and Framer Motion. Every component is fully typed, composable, and accessible out of the box.

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.