# NGXSMK UI Kit > Angular-first, MIT-licensed UI ecosystem: 258+ signals-native, zoneless > standalone components with a universal design-token engine (CSS variables, > SCSS, Tailwind, StyleX, Tokens Studio export). MIT licensed, no paid tiers. > Current version: 2.0.0. Supports Angular 17.3 through 22. Packages: `@ngxsmk/core` (components, one secondary entry point per component, e.g. `@ngxsmk/core/button`), `@ngxsmk/theme` (design tokens + theme engine), `@ngxsmk/cdk` (behavior primitives), `@ngxsmk/mcp` (MCP server for coding agents). Usage rules for generated code: - All components are standalone; import the class and add it to the `imports` array. - APIs are signal-based: inputs are `input()` signals (bind with `[prop]`), outputs are `output()` (bind with `(event)`), `model()` inputs support `[(prop)]`. - Style via `--ngxsmk-*` CSS custom properties, never by overriding internal classes. - Import theme styles once: `@import '@ngxsmk/theme/css';` and toggle dark mode by adding the `dark` class to ``. ## Docs - Full component API reference: /llms-full.txt - Website & docs: https://ngxsmk.github.io/ngxsmk-ui-kit - Packages on npm: https://www.npmjs.com/org/ngxsmk ## Components - NgxsmkAccordion (`ngxsmk-accordion`) — @ngxsmk/core/accordion — Expandable section container - NgxsmkAccordionItem (`ngxsmk-accordion-item`) — @ngxsmk/core/accordion - NgxsmkAgentCard (`ngxsmk-agent-card`) — @ngxsmk/core/agent-card - NgxsmkAiChat (`ngxsmk-ai-chat`) — @ngxsmk/core/ai-chat - NgxsmkAiThinkingIndicator (`ngxsmk-ai-thinking-indicator`) — @ngxsmk/core/ai-thinking-indicator — Animated glowing orb, pulse wave, and skeleton indicator for active AI reasoning - NgxsmkAlert (`ngxsmk-alert`) — @ngxsmk/core/alert — Inline notification - NgxsmkAlertDialog (`ngxsmk-alert-dialog`) — @ngxsmk/core/alert-dialog - NgxsmkAnimate (`[ngxsmkAnimate]`) — @ngxsmk/core/animation — Plays an enter animation on the host element once it is rendered - NgxsmkDrag (`[ngxsmkDrag]`) — @ngxsmk/core/animation — Enables drag gestures on the host element using `motion`'s drag system - NgxsmkHover (`[ngxsmkHover]`) — @ngxsmk/core/animation — Animates the host element on hover using `motion.hover()` - NgxsmkMarquee (`[ngxsmkMarquee]`) — @ngxsmk/core/animation — Creates a continuous scrolling marquee animation from the host element's content - NgxsmkNumberTicker (`[ngxsmkNumberTicker]`) — @ngxsmk/core/animation — Animates the host element's text content from a start number to a target number - NgxsmkPresence (`[ngxsmkPresence]`) — @ngxsmk/core/animation — Structural directive that mounts its template and plays an enter animation, then plays an exit animation before detaching when the `show` input flips to `false` - NgxsmkPress (`[ngxsmkPress]`) — @ngxsmk/core/animation — Animates the host element on press (pointer down) using `motion.press()` - NgxsmkScrollLinked (`[ngxsmkScrollLinked]`) — @ngxsmk/core/animation — Links animation progress to scroll position using `motion.scroll()` - NgxsmkScrollReveal (`[ngxsmkScrollReveal]`) — @ngxsmk/core/animation — Animates an element when it enters the viewport - NgxsmkTextReveal (`[ngxsmkTextReveal]`) — @ngxsmk/core/animation — Splits the host element's text content into words or letters and staggers an animation on each unit - NgxsmkTiltCard (`[ngxsmkTiltCard]`) — @ngxsmk/core/animation — Applies a 3D tilt transform to the host element based on the pointer position - NgxsmkAppShell (`ngxsmk-app-shell`) — @ngxsmk/core/app-shell - NgxsmkAspectRatio (`ngxsmk-aspect-ratio`) — @ngxsmk/core/aspect-ratio - NgxsmkAudioPlayer (`ngxsmk-audio-player`) — @ngxsmk/core/audio-player - NgxsmkAudioVisualizer (`ngxsmk-audio-visualizer`) — @ngxsmk/core/audio-visualizer — Animated real-time spectrum bar and wave audio visualizer component for AI voice streams, active dictation, and media players - NgxsmkAutocomplete (`ngxsmk-autocomplete`) — @ngxsmk/core/autocomplete - NgxsmkAvatar (`ngxsmk-avatar`) — @ngxsmk/core/avatar — User avatar with automatic initials fallback when no image is available or the image fails to load - NgxsmkAvatarGroupOverflow (`ngxsmk-avatar-group-overflow`) — @ngxsmk/core/avatar-group-overflow - NgxsmkAvatarStatusDot (`ngxsmk-avatar-status-dot`) — @ngxsmk/core/avatar-status-dot - NgxsmkBadge (`ngxsmk-badge`) — @ngxsmk/core/badge — Small status descriptor for counts and labels - NgxsmkBanner (`ngxsmk-banner`) — @ngxsmk/core/banner - NgxsmkBlockquote (`ngxsmk-blockquote`) — @ngxsmk/core/blockquote - NgxsmkBreadcrumbItem (`ngxsmk-breadcrumb-item`) — @ngxsmk/core/breadcrumb-item - NgxsmkButton (`button[ngxsmk-button], a[ngxsmk-button]`) — @ngxsmk/core/button — Button applied to native `