# Zard UI > Zard UI is a collection of beautifully-designed, accessible Angular components built with TypeScript, TailwindCSS v4, and Class Variance Authority (CVA). Inspired by shadcn/ui, it provides a modern component library with signal-based inputs, OnPush change detection, and type-safe styling variants. Open Source. Open Code. AI-Ready. ## Overview - [Get Started](https://zardui.com/docs/introduction): Core principles, architecture overview, and getting started with Zard UI. - [Components](https://zardui.com/docs/components): Browse all available components in the Zard UI library. - [Roadmap](https://zardui.com/docs/roadmap): Public roadmap showing our vision, current progress, and future goals. - [Changelog](https://zardui.com/docs/changelog): Release notes, version history, and updates. ## Get Started - [Installation](https://zardui.com/docs/installation): Step-by-step guide to install Zard UI in your Angular project. - [components.json](https://zardui.com/docs/components-json): Configuration file for customizing the CLI and component installation. - [Theming](https://zardui.com/docs/theming): Guide to customizing colors, typography, and design tokens with TailwindCSS v4. - [Dark Mode](https://zardui.com/docs/dark-mode): Implementing dark mode in your Angular application. - [CLI](https://zardui.com/docs/cli): Command-line tool for installing and managing Zard UI components. - [Blocks](https://zardui.com/docs/blocks): Documentation and guides for Zard UI. - [Pre processors](https://zardui.com/docs/pre-processors): Understanding SCSS/Sass integration with Tailwind v4 - risks, limitations, and alternatives. - [Figma](https://zardui.com/docs/figma): Figma design resources and component library. - [llms.txt](https://zardui.com/llms.txt): LLM-optimized documentation format for AI assistants. - [About & Credits](https://zardui.com/docs/about): Credits, project information, and acknowledgments. ## Components ### Form & Input - [Button](https://zardui.com/docs/components/button): Button component for Angular applications. - [Calendar](https://zardui.com/docs/components/calendar): Calendar component for Angular applications. - [Checkbox](https://zardui.com/docs/components/checkbox): Checkbox component for Angular applications. - [Combobox](https://zardui.com/docs/components/combobox): Combobox component for Angular applications. - [Date Picker](https://zardui.com/docs/components/date-picker): Date Picker component for Angular applications. - [Form](https://zardui.com/docs/components/form): Form component for Angular applications. - [Input](https://zardui.com/docs/components/input): Input component for Angular applications. - [Input Group](https://zardui.com/docs/components/input-group): Input Group component for Angular applications. - [Radio](https://zardui.com/docs/components/radio): Radio component for Angular applications. - [Select](https://zardui.com/docs/components/select): Select component for Angular applications. - [Slider](https://zardui.com/docs/components/slider): Slider component for Angular applications. - [Switch](https://zardui.com/docs/components/switch): Switch component for Angular applications. ### Layout & Navigation - [Accordion](https://zardui.com/docs/components/accordion): Accordion component for Angular applications. - [Breadcrumb](https://zardui.com/docs/components/breadcrumb): Breadcrumb component for Angular applications. - [Divider](https://zardui.com/docs/components/divider): Divider component for Angular applications. - [Menu](https://zardui.com/docs/components/menu): Menu component for Angular applications. - [Resizable](https://zardui.com/docs/components/resizable): Resizable component for Angular applications. - [Tabs](https://zardui.com/docs/components/tabs): Tabs component for Angular applications. ### Overlays & Dialogs - [Alert Dialog](https://zardui.com/docs/components/alert-dialog): Alert Dialog component for Angular applications. - [Command](https://zardui.com/docs/components/command): Command component for Angular applications. - [Dialog](https://zardui.com/docs/components/dialog): Dialog component for Angular applications. - [Dropdown](https://zardui.com/docs/components/dropdown): Dropdown component for Angular applications. - [Popover](https://zardui.com/docs/components/popover): Popover component for Angular applications. - [Sheet](https://zardui.com/docs/components/sheet): Sheet component for Angular applications. - [Tooltip](https://zardui.com/docs/components/tooltip): Tooltip component for Angular applications. ### Feedback & Status - [Alert](https://zardui.com/docs/components/alert): Alert component for Angular applications. - [Badge](https://zardui.com/docs/components/badge): Badge component for Angular applications. - [Empty](https://zardui.com/docs/components/empty): Empty component for Angular applications. - [Loader](https://zardui.com/docs/components/loader): Loader component for Angular applications. - [Progress Bar](https://zardui.com/docs/components/progress-bar): Progress Bar component for Angular applications. - [Skeleton](https://zardui.com/docs/components/skeleton): Skeleton component for Angular applications. - [Toast](https://zardui.com/docs/components/toast): Toast component for Angular applications. ### Display & Media - [Avatar](https://zardui.com/docs/components/avatar): Avatar component for Angular applications. - [Card](https://zardui.com/docs/components/card): Card component for Angular applications. - [Icon](https://zardui.com/docs/components/icon): Icon component for Angular applications. - [Table](https://zardui.com/docs/components/table): Table component for Angular applications. ### Misc - [Button Group](https://zardui.com/docs/components/button-group): Button Group component for Angular applications. - [Carousel](https://zardui.com/docs/components/carousel): Carousel component for Angular applications. - [Kbd](https://zardui.com/docs/components/kbd): Kbd component for Angular applications. - [Layout](https://zardui.com/docs/components/layout): Layout component for Angular applications. - [Pagination](https://zardui.com/docs/components/pagination): Pagination component for Angular applications. - [Segmented](https://zardui.com/docs/components/segmented): Segmented component for Angular applications. - [Toggle](https://zardui.com/docs/components/toggle): Toggle component for Angular applications. - [Toggle Group](https://zardui.com/docs/components/toggle-group): Toggle Group component for Angular applications.