What is Sim UI?

Sim UI is a free, open-source component library for Angular applications, inspired by the philosophy of shadcn/ui. Instead of installing a package, you copy components directly into your project — giving you full ownership over the code, styles, and behavior.

Built on top of Spartan UI (headless primitives) and powered by Tailwind CSS v4, every component is crafted to be:

• Accessible — built on Spartan's WAI-ARIA-compliant headless primitives
• Customizable — own the code, tweak anything without fighting a library's API
• Beautiful by default — polished visual design that works out of the box
• Angular-native — fully compatible with Angular 20+, standalone components, SSR, and signals

✨ Highlights

• 500+ component variants across 21 categories — from simple badges to complex data tables
• 43 low-level UI primitives (accordion, dialog, command palette, date picker, and more)
• Tailwind CSS v4 with backward compatibility for v3
• Angular 20 with standalone components, SSR, and signals-ready architecture
• Built-in Theme Editor — visually customize your color palette at simui.dev/theme-editor
• Multiple icon sets — Lucide, Remix Icons, and Tabler Icons via @ng-icons
• Copy-paste model — no lock-in, no black boxes, full ownership

📦 Components

Browse all components and copy the source code at simui.dev.

🚀 Getting Started

Sim UI follows a copy-paste model — there is no npm package to install. Components are built on top of Spartan UI primitives.

Prerequisites

• Angular 19+
• Tailwind CSS 4.x (install guide)

1. Set up Spartan UI

Follow the official Spartan UI installation guide to add the headless primitives to your project:

https://spartan.ng/documentation/installation

2. Browse & copy a component

Visit simui.dev, pick a component variant you like, and click "Copy" to grab its source code. Paste it anywhere in your project.

3. Import and use

// Import the component you copied
import { SimButtonComponent } from './ui/button/sim-button.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SimButtonComponent],
  template: `
    <sim-button variant="default">Get started</sim-button>
    <sim-button variant="outline">Learn more</sim-button>
    <sim-button variant="ghost">Cancel</sim-button>
  `,
})
export class AppComponent {}

Tip: Because you own the component code, you can rename, extend, or restyle anything freely — no API constraints.

Tailwind v4: Sim UI is built with Tailwind CSS v4, while maintaining backward compatibility with v3 for most components.

🖥️ Local Development

Want to run the docs site locally or contribute new components?

# 1. Clone the repository
git clone https://github.com/dofu-lab/simui.git
cd simui

# 2. Install dependencies
pnpm install

# 3. Set up environment variables
cp .env.example .env
# Edit .env and fill in your values

# 4. Start the dev server
pnpm start

The app will be available at http://localhost:4200.

NG_APP_BASE_URL=...
NG_APP_API_URL=...
NG_APP_GOOGLE_CLIENT_ID=...

Useful Commands

🛠️ Tech Stack

🤝 Contributing

Contributions are what make open source great. All contributions are welcome — whether it's a new component variant, a bug fix, a documentation improvement, or a feature request.

1. Fork the repository
2. Create your branch: git checkout -b feat/my-new-component
3. Commit your changes: git commit -m 'feat: add new button variant'
4. Push to the branch: git push origin feat/my-new-component
5. Open a Pull Request

Please read CONTRIBUTING.md for details on coding standards and the contribution process.

🙏 Acknowledgments

Sim UI stands on the shoulders of great open-source projects:

• Spartan UI — the headless primitives powering every component
• shadcn/ui — the inspiration for the copy-paste component model
• Tailwind CSS — the utility-first CSS engine
• Angular — the framework that makes it all possible

📄 License

Licensed under the MIT License. Copyright © 2025 Phuong Tran Dong.