# @letsprogram/ng-oat > Signal-first Angular UI component library built on Oat CSS. 40+ standalone components, directive wrappers, Signal Forms integration, CVA adapters, 87 design tokens, and 12 ready-made recipe layouts. Requires Angular 21 and above. Docs: https://ng-oat.letsprogram.in npm: https://www.npmjs.com/package/@letsprogram/ng-oat Source: https://github.com/yshashi/ng-oat-workspace ## Guides - [Introduction](https://ng-oat.letsprogram.in/guides/introduction): What ng-oat is and why it exists - [Get Started](https://ng-oat.letsprogram.in/guides/get-started): Install & configure in under 2 minutes - [Styling](https://ng-oat.letsprogram.in/guides/styling): Design tokens, CSS custom properties, theming - [Usage Patterns](https://ng-oat.letsprogram.in/guides/usage): Standalone imports, signal inputs, best practices - [Typography](https://ng-oat.letsprogram.in/semantic): Semantic HTML typography & token reference ## Components - [Button](https://ng-oat.letsprogram.in/components/button): `ng-oat-button` : variant, btnStyle, size, icon, disabled - [Badge](https://ng-oat.letsprogram.in/components/badge): `ng-oat-badge` : variant (default/secondary/outline/danger/success) - [Alert](https://ng-oat.letsprogram.in/components/alert): `ng-oat-alert` : variant, size, dismissible - [Card](https://ng-oat.letsprogram.in/components/card): `ng-oat-card`, `ng-oat-card-header`, `ng-oat-card-footer` - [Accordion](https://ng-oat.letsprogram.in/components/accordion): `ng-oat-accordion` : items, group - [Table](https://ng-oat.letsprogram.in/components/table): `ng-oat-table` : columns, data, striped, clickable, scrollX/Y - [Breadcrumb](https://ng-oat.letsprogram.in/components/breadcrumb): `ng-oat-breadcrumb` : items, content-projected icons - [Pagination](https://ng-oat.letsprogram.in/components/pagination): `ng-oat-pagination` : totalPages, currentPage, maxVisible - [Progress](https://ng-oat.letsprogram.in/components/progress): `ng-oat-progress` : value, max - [Meter](https://ng-oat.letsprogram.in/components/meter): `ng-oat-meter` : value, min, max, low, high, optimum - [Spinner](https://ng-oat.letsprogram.in/components/spinner): `ng-oat-spinner` : size, overlay - [Switch](https://ng-oat.letsprogram.in/components/switch): `ng-oat-switch` : label, checked (two-way), Signal Forms compatible - [Skeleton](https://ng-oat.letsprogram.in/components/skeleton): `ng-oat-skeleton` : type (line/box), width - [Split Button](https://ng-oat.letsprogram.in/components/button): `ng-oat-split-button` : label, variant, popover menu - [Avatar](https://ng-oat.letsprogram.in/components/avatar): `ng-oat-avatar` : src, alt, initials, size - [Separator](https://ng-oat.letsprogram.in/components/separator): `ng-oat-separator` : orientation, label - [Carousel](https://ng-oat.letsprogram.in/components/carousel): `ng-oat-carousel` : slides, autoplay, loop, aspect ratio - [Card Carousel](https://ng-oat.letsprogram.in/components/carousel): `ng-oat-card-carousel` : items, heading - [Toolbar](https://ng-oat.letsprogram.in/components/toolbar): `ng-oat-toolbar` : color, dense, fixed - [Theme Selector](https://ng-oat.letsprogram.in/components/theme-selector): `ng-oat-theme-selector` : mode, themes - [Toggle](https://ng-oat.letsprogram.in/components/toggle-demo): `ng-oat-toggle` : variant, size, pressed (two-way) - [Toggle Group](https://ng-oat.letsprogram.in/components/toggle-group): `ng-oat-toggle-group` : multiple, value (two-way) - [Chip](https://ng-oat.letsprogram.in/components/chips): `ng-oat-chip` : variant, removable, selectable - [Chip Group](https://ng-oat.letsprogram.in/components/chips): `ng-oat-chip-group` : multiple, value (two-way) - [Chip Input](https://ng-oat.letsprogram.in/components/chips): `ng-oat-chip-input` : maxChips, chips (two-way) - [File Upload](https://ng-oat.letsprogram.in/components/file-upload): `ng-oat-file-upload` : accept, multiple, maxSize - [Search Input](https://ng-oat.letsprogram.in/components/search-input): `ng-oat-search-input` : debounceMs, shortcut - [Input OTP](https://ng-oat.letsprogram.in/components/input-otp-demo): `ng-oat-input-otp` : length, separator, mask ## Directive Wrappers - [Dropdown](https://ng-oat.letsprogram.in/components/dropdown): `ng-oat-dropdown` : trigger + menuitem content projection - [Tooltip](https://ng-oat.letsprogram.in/components/tooltip): `ng-oat-tooltip` : text, template, position, delay - [Sidebar](https://ng-oat.letsprogram.in/components/sidebar): `ng-oat-sidebar` : mode (fixed/overlay), scrollLock - [Tabs](https://ng-oat.letsprogram.in/components/tabs): `ng-oat-tabs` : tabs array, tab panel content projection - [Dialog](https://ng-oat.letsprogram.in/components/dialog): `ng-oat-dialog` : header/footer slots, showModal()/close() ## Signal Forms - [Input](https://ng-oat.letsprogram.in/components/forms): `ng-oat-input` : label, type, placeholder, validation - [Textarea](https://ng-oat.letsprogram.in/components/forms): `ng-oat-textarea` : label, rows, validation - [Select](https://ng-oat.letsprogram.in/components/forms): `ng-oat-select` : label, options, validation - [Checkbox](https://ng-oat.letsprogram.in/components/forms): `ng-oat-checkbox` : label, checked (two-way) - [Radio Group](https://ng-oat.letsprogram.in/components/forms): `ng-oat-radio-group` : label, options, validation - [Form Error](https://ng-oat.letsprogram.in/components/forms): `ng-oat-form-error` : control or errors+show ## Recipes - [Login](https://ng-oat.letsprogram.in/recipes/login): Authentication form with validation - [Registration](https://ng-oat.letsprogram.in/recipes/registration): Multi-field signup form - [Dashboard](https://ng-oat.letsprogram.in/recipes/dashboard): Admin dashboard layout with sidebar - [Blog](https://ng-oat.letsprogram.in/recipes/blog): Blog listing and article layout - [Comments](https://ng-oat.letsprogram.in/recipes/comments): Threaded comment section - [Contact](https://ng-oat.letsprogram.in/recipes/contact): Contact form page - [Pricing](https://ng-oat.letsprogram.in/recipes/pricing): Pricing cards layout - [Profile](https://ng-oat.letsprogram.in/recipes/profile): User profile page - [File Manager](https://ng-oat.letsprogram.in/recipes/file-manager): File browser UI - [Settings](https://ng-oat.letsprogram.in/recipes/settings): Settings panel with forms - [Notifications](https://ng-oat.letsprogram.in/recipes/notifications): Notification center layout - [Search Results](https://ng-oat.letsprogram.in/recipes/search-results): Search results page ## Optional - [Full API Reference](https://ng-oat.letsprogram.in/llms-full.txt): Complete component signatures inlined for LLM consumption - [Utilities](https://ng-oat.letsprogram.in/utilities): CSS utility classes : spacing, text, display, flex, grid - [Theme Page](https://ng-oat.letsprogram.in/theme): Live theme token playground - [Grid](https://ng-oat.letsprogram.in/grid): Responsive grid system (CSS custom properties)