INTERFACES.
/// DATA_ATTRIBUTE_ARCHITECTURE
Enterprise-ready components controlled entirely via data-* attributes. No inline CSS. No custom JavaScript. Just markup.
25+
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.
+ MORE COMPONENTS
SuperDropdown, SuperWYSIWYG, Navigation, Actionable Metrics, Calendar, 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.