Sanring UI

Headless Angular UI components — copy and paste into your project.

Built with Angular 22, Tailwind CSS v4, and @angular/aria for accessibility.

---

Usage

# Add a component to your project
npx @sanring/cli@latest add accordion

# List all available components
npx @sanring/cli@latest list

Works with any package manager:

pnpm dlx @sanring/cli@latest add accordion
yarn dlx @sanring/cli@latest add accordion
bunx @sanring/cli@latest add accordion

Components are copied directly into your source code — you own them and can modify them freely.

---

Available Components

accordion · alert · alert-dialog · aspect-ratio · avatar · badge · breadcrumb · button · calendar · card · carousel · checkbox · collapsible · color-picker · combobox · command · context-menu · date-picker · dialog · divider · dropdown-menu · field · file-upload · hover-card · input · label · link · navigation-menu · otp-input · pagination · popover · progress · radio · resizable · scroll-area · select · sheet · sidebar · skeleton · slider · sortable · spinner · stepper · switch · table · tabs · tag · textarea · timeline · toast · toggle · tooltip · transfer · tree

---

How it works

This is a copy-paste component library, not a traditional npm package.

When you run npx @sanring/cli@latest add accordion:

1. CLI fetches the component source from this repository
2. Files are written directly into your project (src/app/components/ui/)
3. You own the code — modify it however you need

---

Monorepo Structure

sanring-ui/
├── apps/docs/        ← Documentation site
├── packages/ui/      ← Component source (development only)
├── packages/cli/     ← @sanring/cli published to npm
└── registry/         ← Component templates fetched by CLI

---

Tech Stack

Framework	Angular 22
Styling	Tailwind CSS v4
Accessibility	@angular/aria + @angular/cdk
Icons	@lucide/angular
Package Manager	pnpm
Versioning	Changesets

---

License

MIT © 2026 sanring