# NA-Kit UI > Enterprise-grade Web Components library built with Lit 3 & TypeScript — framework-agnostic, accessible, and tree-shakeable. [![npm](https://img.shields.io/npm/v/@na-kit/ui)](https://www.npmjs.com/package/@na-kit/ui) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE) [![Tests](https://img.shields.io/badge/tests-1409%20passing-brightgreen)]() [![a11y](https://img.shields.io/badge/WCAG-2.2%20AA-green)]() ## Highlights - **74 components** — forms, data display, navigation, feedback, charts, marketing, and more - **Framework-agnostic** — works with React, Vue, Angular, Svelte, or vanilla HTML - **Accessible** — WCAG 2.2 AA compliant with full keyboard + screen reader support - **Tree-shakeable** — import only the components you use (~147 KB gzipped full bundle) - **Dark mode** — built-in light/dark theming via CSS custom properties - **Enterprise utilities** — validation, i18n (8 locales + RTL), security, virtual scroll, data export - **Type-safe** — full TypeScript definitions for every component ## Installation ```bash npm install @na-kit/ui lit ``` ### CDN ```html ``` Or via jsDelivr: ```html ``` ## Quick Start ```html

Hello NA-Kit

Get Started

``` ### Individual Component Imports Import only what you need for smaller bundles: ```js import '@na-kit/ui/components/button/button.js'; import '@na-kit/ui/components/input/input.js'; ``` ## Components (74) ### Foundation | Component | Tag | Description | |-----------|-----|-------------| | Button | `` | Primary, secondary, outlined, text, icon variants | | Icon | `` | SVG icon system with semantic/decorative modes | | Typography | `` | h1–h6, body, caption, overline, code | | Theme Provider | `` | Light/dark mode with CSS custom properties | ### Layout | Component | Tag | Description | |-----------|-----|-------------| | Container | `` | Responsive max-width container | | Grid / Row / Col | `` `` | 12-column responsive grid | | Stack / Flex | `` `` | Flexbox layout helpers | | Card | `` | Content card with header/footer slots | | Divider | `` | Horizontal/vertical dividers | | App Shell | `` | Full page layout with header, sidebar, footer | ### Forms | Component | Tag | Description | |-----------|-----|-------------| | Input | `` | Text, email, password, number, search, tel | | Select | `` | Dropdown select with search and groups | | Checkbox | `` | Checkbox with indeterminate state | | Radio | `` | Radio button group | | Switch | `` | Toggle switch | | Autocomplete | `` | Search with async suggestions | | Multi-Select | `` | Tag-based multi-selection | | Date Picker | `` | Calendar date picker with i18n | | Color Picker | `` | HEX/RGB/HSL color picker | | File Upload | `` | Drag-and-drop with previews | | Range Slider | `` | Single and dual-thumb slider | | Rating | `` | Star/custom icon rating | | Number Input | `` | Numeric stepper input | | Rich Text Editor | `` | WYSIWYG with markdown and source view | ### Data Display | Component | Tag | Description | |-----------|-----|-------------| | Table | `` | Sortable, resizable, expandable rows, sticky columns | | Data Grid | `` | Virtual scroll, inline edit, grouping, export | | Avatar | `` | Image or initials with status | | Avatar Group | `` | Stacked avatars with overflow | | Badge | `` | Status indicators and counters | | Chip | `` | Tags with remove action | | List | `` | Ordered/unordered with icons | | Timeline | `` | Vertical/horizontal timeline | | Tree View | `` | Hierarchical tree with checkboxes | | Image | `` | Lazy-loading responsive image | | Blockquote | `` | Styled quotation | | Code Block | `` | Syntax highlighted code | | Kbd | `` | Keyboard shortcut display | ### Feedback & Overlays | Component | Tag | Description | |-----------|-----|-------------| | Alert | `` | Info, success, warning, error alerts | | Modal | `` | Dialog with focus trap | | Drawer | `` | Slide-in side panel | | Tooltip | `` | Hover/focus tooltip | | Popover | `` | Rich content popover | | Toast / Feedback | `` | Toast notifications with queue | | Progress | `` | Linear/circular progress | | Spinner | `` | Loading spinner | | Skeleton | `` | Content placeholder loading | | Empty State | `` | Zero-data state | | Announcement Bar | `` | Dismissible site-wide banner | | Cookie Consent | `` | GDPR cookie consent banner | ### Navigation | Component | Tag | Description | |-----------|-----|-------------| | Accordion | `` | Collapsible content panels | | Breadcrumbs | `` | Navigation breadcrumb trail | | Tabs | `` | Tabbed interface with overflow scroll | | Stepper | `` | Step-by-step workflow | | Pagination | `` | Page navigation | | Menu | `` | Dropdown and context menus | | Dropdown | `` | Trigger-based dropdown | | Link | `` | Styled anchor with variants | | Scroll to Top | `` | Floating scroll button | | Command Palette | `` | Cmd+K fuzzy search | ### Data Visualization | Component | Tag | Description | |-----------|-----|-------------| | Chart | `` | Line, bar, pie, doughnut, area, scatter | | Gauge | `` | Radial gauge meter | | Sparkline | `` | Inline mini charts | | Heatmap | `` | Grid-based heatmap | ### Marketing & Website | Component | Tag | Description | |-----------|-----|-------------| | Hero Section | `` | Full-width hero banners | | CTA Section | `` | Call-to-action blocks | | Carousel | `` | Image/content slider | | Testimonial | `` | Customer quotes and reviews | | Pricing Table | `` | Plan comparison tables | | Stats Counter | `` | Animated metric counters | | FAQ | `` | FAQ accordion with JSON-LD | | Blog Card | `` | Article preview cards | | Social Share | `` | Social media share buttons | | Countdown | `` | Event countdown timer | | Logo Cloud | `` | Partner/client logo marquee | | Feature Grid | `` | Benefits grid with icons | | Lightbox | `` | Full-screen image gallery | | Video Player | `` | Custom video controls | | Image Comparison | `` | Before/after slider | ## Enterprise Utilities ```js // Validators — 15+ built-in (email, url, phone, pattern, custom, async...) import { validators, composeValidators } from '@na-kit/ui'; // i18n — 8 locales, RTL, date/number/currency formatting import { LocaleProvider } from '@na-kit/ui'; // Security — XSS protection, CSP, HTML/URL sanitization import { sanitizeHTML, generateCSP } from '@na-kit/ui'; // Data Export — CSV, Excel, JSON, clipboard, print import { exportToCSV, exportToExcel } from '@na-kit/ui'; // Performance — debounce, throttle, memoize, virtual scroll import { VirtualScrollController } from '@na-kit/ui'; ``` ## Theming ### CSS Custom Properties ```css :root { --ui-color-primary: #6366f1; --ui-color-success: #10b981; --ui-color-danger: #ef4444; --ui-spacing-md: 16px; --ui-radius-md: 8px; --ui-font-family: system-ui, -apple-system, sans-serif; } ``` ### Dark Mode ```html ``` ### CSS Parts All components expose `::part()` for deep styling: ```css ui-button::part(button) { border-radius: 9999px; } ui-input::part(input) { font-size: 18px; } ui-card::part(card) { box-shadow: none; } ``` ### Base Styles (Optional) ```js import '@na-kit/ui/styles'; // All styles import '@na-kit/ui/styles/reset.css'; // CSS reset only import '@na-kit/ui/styles/dark-mode.css'; ``` ## Framework Integration ### React ```jsx function App() { return ( alert('Clicked!')}> Click Me ); } ``` ### Vue ```vue ``` ### Angular ```typescript // app.module.ts import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; @NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppModule {} ``` ```html Click Me ``` ## Examples ### Login Form ```html

``` ### Data Dashboard ```html

``` ## Browser Support - Chrome / Edge 90+ - Firefox 90+ - Safari 15+ ## Development ```bash npm install # Install dependencies npm run build # Build the library npm test # Run 1409 tests npm run test:coverage # Coverage report npm run storybook # Launch Storybook (788 stories) npm run dev # Build + dev server ``` ## Contributing See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines. ## License [MIT](LICENSE) --- Built with [Lit](https://lit.dev) ❤️