tanaComponentsTemplatesDocsGitHub
Components Explore the full library of Ztana components Example Pages Real layouts built entirely from Ztana components. Start from one of these. Marketing landingHero, carousel, FAQ, footer — ~12 components.Admin dashboardTabs, virtual list, modal, skeleton — ~14 components.User settingsForms with every input type — ~12 components.All examples →Browse the gallery.Featured Components Experience our most impressive components with live, interactive demos. CarouselSmooth, touch-enabled image carousel with autoplay and navigation controls.Skeleton LoadersBeautiful loading placeholders that improve perceived performance.Profile CardArticle PreviewChat MessageAccordionCollapsible content sections with smooth animations and keyboard navigation.ModalFully accessible modal dialogs with focus trapping and keyboard navigation. Open Modal Welcome to ZtanaThis is a fully accessible modal with focus trapping and keyboard navigation.Press Escape to close, or click outside the modal.Focus TrappingTab key cycles through focusable elementsKeyboard SupportFull keyboard navigation supportScreen ReaderARIA labels and live regionsCancelGot it!Date PickerIntuitive date selection with native browser support and custom calendar option.Basic ComponentsButtonsPrimarySecondaryOutlineGhostInputsAlertsThis is an info alertThis is a success alertThis is a warning alertThis is an error alertCheckbox & SwitchTabsContent for tab 1Content for tab 2Content for tab 3LoadingAll ComponentsCore<z-button>Buttons with variants, sizes, and loading states<z-typography>Text components with semantic variantsForms<z-input>Text inputs with validation and icons<z-checkbox>Checkboxes with indeterminate state<z-switch>Toggle switches<z-select-dropdown>Dropdown select menus<z-textarea>Multi-line text inputs<z-slider>Range sliders<z-search-bar>Search input with suggestions<z-date-picker>Date and time selectionFeedback<z-alert>Alert messages with types<z-toast-notification>Toast notifications<z-loading-spinner>Loading indicators<z-skeleton-loader>Content placeholdersNavigation<z-navbar>Responsive navigation bar<z-tabs>Tabbed navigation<z-breadcrumb>Breadcrumb navigation<z-pagination>Pagination controls<z-dropdown-menu>Dropdown menusLayout<z-container>Responsive container<z-footer>Page footerOverlays<z-modal>Modal dialogs<z-tooltip>Tooltips on hover<z-popover>Popover contentData Display<z-accordion>Collapsible content sections<z-table>Data tables<z-list>List displays<z-carousel>Image carouselsMedia<z-image>Optimized images with lazy loading<z-video>Video player<z-audio>Audio player
Ztana Framework-agnostic web components for modern web development. DocumentationGetting StartedComponentsThemingCommunityGitHubIssuesnpm © 2026 Ztana. Built with ❤️ using Ztana components.