# shadszn/ui

> A glass-morphism design system built on Radix UI, Tailwind CSS, and Framer Motion.
> Registry: https://design.szns.dev/r/{name}.json
> Install: npx shadcn@latest add @shadszn/<component>

## Getting Started

- [Introduction](https://design.szns.dev/docs): What is shadszn/ui and why use it.
- [Installation](https://design.szns.dev/docs/installation): Add shadszn/ui to your project.
- [Theming](https://design.szns.dev/docs/theming): Customize colors, dark mode, and design tokens.
- [Design Language](https://design.szns.dev/docs/design-language): Glass morphism, color system, typography, motion.

## Components

- [Button](https://design.szns.dev/docs/components/button): Glass-morphism button with 7 variants.
- [Card](https://design.szns.dev/docs/components/card): Compound card with glass morphism.
- [Input](https://design.szns.dev/docs/components/input): Glass-themed text input.
- [Textarea](https://design.szns.dev/docs/components/textarea): Multi-line text input.
- [Label](https://design.szns.dev/docs/components/label): Form label.
- [Dialog](https://design.szns.dev/docs/components/dialog): Modal dialog with glass overlay.
- [Toast](https://design.szns.dev/docs/components/toast): Notification toasts with variants.
- [Badge](https://design.szns.dev/docs/components/badge): Status badges with semantic colors.
- [Tag](https://design.szns.dev/docs/components/tag): Pill-shaped tag labels.
- [Select](https://design.szns.dev/docs/components/select): Dropdown select menu.
- [Tabs](https://design.szns.dev/docs/components/tabs): Tabbed content panels.
- [Tooltip](https://design.szns.dev/docs/components/tooltip): Hover tooltip.
- [Dropdown Menu](https://design.szns.dev/docs/components/dropdown-menu): Context dropdown menu.
- [Switch](https://design.szns.dev/docs/components/switch): Toggle switch.
- [Separator](https://design.szns.dev/docs/components/separator): Visual divider.
- [Skeleton](https://design.szns.dev/docs/components/skeleton): Loading placeholder.
- [Theme Toggle](https://design.szns.dev/docs/components/theme-toggle): Dark/light mode switcher.
- [Form Field](https://design.szns.dev/docs/components/form-field): Compound form field.
- [Tag Input](https://design.szns.dev/docs/components/tag-input): Multi-value tag entry.

## Blocks

- [Dashboard Layout](https://design.szns.dev/docs/blocks/dashboard-layout): Admin dashboard with stat cards.
- [Login Page](https://design.szns.dev/docs/blocks/login-page): Auth page with gradient orbs.
- [Settings Page](https://design.szns.dev/docs/blocks/settings-page): Tabbed user settings.
- [Data Grid](https://design.szns.dev/docs/blocks/data-grid): Filterable card grid.
- [Detail Page](https://design.szns.dev/docs/blocks/detail-page): Content detail view.
- [Command Palette](https://design.szns.dev/docs/blocks/command-palette): Cmd+K command menu.
- [Navbar](https://design.szns.dev/docs/blocks/navbar): Responsive navigation bar.
- [Footer](https://design.szns.dev/docs/blocks/footer): Page footer.
- [Sidebar](https://design.szns.dev/docs/blocks/sidebar): Collapsible sidebar.
- [Page Shell](https://design.szns.dev/docs/blocks/page-shell): Layout wrapper.

## Utilities

- [cn()](https://design.szns.dev/docs/utilities/cn): Class merging utility.
- [Motion Variants](https://design.szns.dev/docs/utilities/motion): Framer Motion animation presets.
- [useReducedMotion](https://design.szns.dev/docs/utilities/use-reduced-motion): Accessibility motion hook.

## Brand

- [Logos](https://design.szns.dev/docs/brand/logos): SZNS logo assets.
- [Colors](https://design.szns.dev/docs/brand/colors): Brand color palette.
- [Typography](https://design.szns.dev/docs/brand/typography): Font specimens and scale.

## Optional

- [GitHub](https://github.com/szns/shadszn-ui): Source code repository
- [SZNS Solutions](https://szns.solutions): About the team