Zard /ui
A modern, accessible component library built for Angular, bringing the shadcn/ui philosophy to the Angular ecosystem. Designed for developers who value simplicity, exceptional design, and a frictionless developer experience.
- Role
- Founder & Core dev
- Team
- TODO — team size
- Duration
- TODO — e.g. 8 months
- Status
- Active / Beta
- License
- MIT
Overview
My role
TODO — e.g. Architecture and API design for every primitive TODO — e.g. CLI and registry implementation TODO — e.g. Documentation site design and build TODO — e.g. Reviewing community contributions
- Started
- TODO — month/year
- First release
- TODO — month/year
- Current phase
- TODO — e.g. Beta, v0.x
TODO — one or two sentences that frame the whole case: what Zard/ui is, who it is for, and why it needed to exist.
TODO — the origin story. What were you building when you hit the wall? What did you try first, and why did the existing Angular libraries not work for you?
TODO — what the project actually is today: the CLI, the registry, the theming layer, the docs site. Describe the shape of the thing so a reader who has never installed it understands what they would get.
TODO — where it stands now and where it is heading. Adoption, community contributions, the roadmap items that matter most (Blocks, Charts, Themes, MCP server).
The Challenge
The Angular ecosystem needed a component library that brought the shadcn/ui philosophy: components you own and control completely. The main challenge was implementing an extremely simple and practical library, allowing developers to focus on what really matters - the product - without struggling to implement a beautiful design that not all libraries provide.
No Angular equivalent to shadcn/ui's copy-paste component approach Existing Angular UI libraries impose rigid, opinionated design patterns Complex tooling and steep learning curves for adding components
TODO — why full type coverage mattered for a copy-paste library.
TODO — what "production-ready" means here: a11y, keyboard nav, SSR.
TODO — constraint title
TODO — a hard requirement you could not compromise on, e.g. every component had to be keyboard navigable and screen-reader safe from day one.
TODO — constraint title
TODO — another constraint, e.g. components had to work standalone without pulling the whole library as a dependency.
TODO — constraint title
TODO — another constraint, e.g. SSR and hydration had to work out of the box for Angular Universal apps.
Architecture
TODO — one paragraph describing how the pieces fit together: the CLI that writes files into the consumer project, the registry that serves them, and the token layer that themes them.
TODO — key decision
TODO — explain a structural decision a reader would question, and why you chose it.
TODO — key decision
TODO — another one, ideally with the alternative you rejected.
CLI layer
TODO — what it scaffolds
TODO — how files land in the project
TODO — project config resolution
Registry
TODO — how each entry is stored
TODO — resolving nested primitives
TODO — how updates reach users
Component layer
TODO — the reactive pattern used
TODO — class-variance-authority styling
TODO — overlays, a11y, focus traps
Theming layer
TODO — token naming scheme
TODO — how tokens map to utilities
TODO — strategy used
The Process
Building Zard/ui required a methodical approach: from studying shadcn/ui's architecture to designing Angular-native patterns that feel equally intuitive.
- 01
Research & Architecture
TODO — e.g. 3 weeks Deep analysis of shadcn/ui's philosophy, CLI patterns, and how to translate React paradigms into Angular's component model with signals.
Deliverables
TODO — deliverable TODO — deliverable
- 02
Core System
TODO — e.g. 6 weeks Built the CLI tool, theming engine with CSS variables, and foundational primitives that all components extend.
Deliverables
TODO — deliverable TODO — deliverable
- 03
Component Library
TODO — e.g. 4 months Developed 40+ production-ready components with full accessibility, keyboard navigation, and responsive design.
Deliverables
TODO — deliverable TODO — deliverable
- 04
Docs & Launch
TODO — e.g. 5 weeks Created the documentation site inspired by shadcn/ui's design, with live examples and copy-paste code blocks.
Deliverables
TODO — deliverable TODO — deliverable
The Solution
We built a comprehensive component library that implements the shadcn/ui philosophy in the Angular ecosystem. Unlike traditional libraries, Zard/ui adds components directly to your project, giving you full control over the code. The documentation site was inspired by the official shadcn/ui design, bringing a familiar and modern experience.
The library uses Tailwind CSS for styling with a customizable design token system. Each component is built with TypeScript, Angular signals, and accessibility in mind. The intuitive CLI allows you to initialize and add components with a single command, bringing productivity without compromising code quality.
Built with
Two commands and the components live in your own repository.
TODO — decision title
TODO — what you chose, the alternative, and the reason.
TODO — decision title
TODO — another trade-off worth explaining to a technical reader.
In the product
TODO — a line introducing the screens below. Add more entries to this array as you capture new screenshots.
Before & after
TODO — frame the comparison: what installing a traditional Angular UI library costs you versus the copy-paste model.
The Results
Zard/ui quickly gained traction in the Angular community, filling a gap that developers had been requesting for years.
The first Angular library to bring the shadcn/ui philosophy to the ecosystem, enabling developers to own their component code.
What I'd keep, what I'd change
TODO — one line setting up the retrospective.
What worked
TODO — what worked
TODO — the decision or habit that paid off, and the evidence for it.
TODO — what worked
TODO — another one.
Trade-offs
TODO — what you would change
TODO — be specific: what it cost you and what you would do instead.
TODO — what you would change
TODO — another one.
Every tool, and why
TODO — a line about how the stack was picked.
Framework
3- Angular
- TODO — why this version and what it unlocked
- Signals
- TODO — the reactivity model and what it replaced
- TypeScript
- TODO — how strict, and why it matters here
Styling
3- Tailwind CSS
- TODO — why utility-first for a copy-paste library
- CVA
- TODO — how variants are expressed
- CSS variables
- TODO — the theming contract
Tooling
3- CLI
- TODO — what it does and what it is built with
- Registry
- TODO — how components are distributed
- Docs
- TODO — what the documentation site runs on