INTERFACES.
/// DATA_ATTRIBUTE_ARCHITECTURE
Enterprise-ready components controlled entirely via data-* attributes. No inline CSS. No custom JavaScript. Just markup.
30+
Components
<50KB
Bundle Size
98+
Lighthouse
A11y
WCAG 2.1
Powerful Components for Every Need
From basic buttons to complex data tables, our component library provides everything you need to build modern, responsive web applications.
SuperTable
Feature-rich data tables with sorting, filtering, pagination, bulk actions, and HTMX integration for server-rendered content.
SuperModal
Accessible modal dialogs with smooth animations, focus trapping, keyboard navigation, and flexible sizing options.
SuperForm
Advanced form controls with validation, custom styling, floating labels, and seamless integration with any backend.
SuperGrid
Flexible grid layouts with responsive breakpoints, masonry support, and intelligent auto-placement algorithms.
SuperToaster
Toast notifications with stacking, positioning, auto-dismiss, and support for custom content and actions.
SuperUpload
Drag-and-drop file uploads with progress tracking, previews, validation, and support for multiple files.
SuperWYSIWYG
Rich-text editor with a formatting toolbar, image embeds, sanitized HTML output, and two-way form sync.
SuperDropdown
Accessible dropdown menus with keyboard navigation, smart positioning, multi-select, and search filtering.
SuperStepper
Multi-step wizards with progress indicators, per-step validation, and branching flows.
SuperQuiz
Interactive quizzes and assessments with scoring, timers, question banks, and instant results.
SuperSettings
Settings panels with grouped sections, live preview, and persisted user preferences.
SuperOnboarding
Guided product tours with spotlight steps, tooltips, and progress tracking.
SuperOrgChart
Interactive org charts with collapsible nodes, zoom, and drag-to-pan navigation.
SuperPreview
Live content and document previews with zoom, pagination, and print-ready output.
SuperFab
Floating action buttons with expandable speed-dial actions and contextual menus.
Calendar
Full calendar with month, week, and agenda views, events, and drag-to-schedule.
Charts
Lightweight, responsive charts — line, bar, pie and more — driven entirely by data attributes.
Document Designer
Drag-and-drop document and report builder with data binding, system fields, and export.
Search Bar
Command-style search with instant results, keyboard shortcuts, and scoped filters.
+ MORE COMPONENTS
Plus Navigation, Actionable Metrics, Dashboard, Bento layouts, Tabbed Workbench, Page Headers, Hero sections, Buttons, Cards, Badges, Alerts, Progress Bars, Spinners, Tooltips, Tabs, Accordions, and many more utilities.
Built for Modern Development
AZ UI Kit combines cutting-edge technology with developer experience to help you build exceptional applications.
Dark Mode Support
Built-in dark theme with automatic system preference detection.
WCAG 2.1 Compliant
Full accessibility with keyboard navigation and ARIA labels.
Blazing Fast
Optimized bundle sizes with tree-shaking and lazy loading.
Mobile First
Responsive design with touch gesture support.
Easy Customization
CSS custom properties and SCSS variables for theming.
Modern Architecture
ES6+ modules and component registry pattern.
Security Built-in
Advanced input sanitization and XSS protection.
HTMX Integration
Seamless server-rendered components with client interactivity.
Everything via Data Attributes
No inline styles. No custom JavaScript. Super Components handle all behavior through declarative data-* attributes.
Traditional Approach
Scattered inline styles, custom CSS files, and JavaScript initialization code for every component.
<!-- Inline styles everywhere --> <table style="width:100%; border-collapse:collapse;"> <thead style="background:#1a1a1a;">...</thead> </table> <!-- Custom CSS file --> .my-table { ... } .my-table-header { ... } .my-table-row:hover { ... } <!-- JavaScript init --> <script> new DataTable('#myTable', { sortable: true, filterable: true, pageSize: 25 }); </script>
AZ UI Kit Approach
One line of markup. Data attributes declare all behavior. Zero custom code required.
<!-- That's it. Just markup. --> <table data-az-component="super-table" data-az-sortable="true" data-az-filterable="true" data-az-page-size="25" data-az-theme="dark" data-az-bulk-actions="true"> <thead>...</thead> <tbody>...</tbody> </table> <!-- No CSS. No JS. Auto-initialized. -->
TABLES
data-az-component="super-table"
data-az-sortable="column:name"
data-az-export="csv,excel"
MODALS
data-az-component="super-modal"
data-az-size="lg"
data-az-backdrop="blur"
FORMS
data-az-component="super-form"
data-az-validate="realtime"
data-az-submit="htmx"
Why AZ UI Kit Stands Out
See how AZ UI Kit compares to other popular frameworks.
| Feature | AZ UI Kit | Bootstrap | MDB | Tailwind |
|---|---|---|---|---|
| Built-in Dark Mode | ✓ | ✕ | ✓ | ✕ |
| Advanced Data Tables | ✓ | ✕ | ✓ | ✕ |
| HTMX Integration | ✓ | ✕ | ✕ | ✕ |
| WCAG 2.1 Compliant | ✓ | ✓ | ✓ | ✕ |
| Touch Gestures | ✓ | ✕ | ✕ | ✕ |
| Component Registry | ✓ | ✕ | ✕ | ✕ |
| File Upload Component | ✓ | ✕ | ✓ | ✕ |
Ready to Build Something Amazing?
Get started with AZ UI Kit and ship beautiful, accessible, and performant web applications in record time. No custom CSS or JavaScript required.