Introducing KtUI

Introducing KtUI – A New Open Source UI Library for Tailwind CSS & Vanilla JS

We’re excited to introduce KtUI – open-source UI component library built with Tailwind CSS and Vanilla JavaScript. It draws inspiration from the elegant and accessible design philosophy of shadcn/ui, but is designed to work without a JavaScript framework.

KtUI helps developers build polished user interfaces quickly using just HTML, Tailwind CSS, and plain JavaScript — no frameworks, no build tools, just clean components that work out of the box.

Why KTUI?

shadcn/ui offers a fantastic design system but is tailored specifically for React. KTUI brings similar design principles to developers who want to build using pure HTML and JavaScript. It’s an ideal solution for those looking for a lightweight, framework-agnostic approach.

KTUI delivers composable, accessible components with full control over styling through Tailwind utility classes.

What’s Included?

KTUI includes a comprehensive and growing set of UI components. Below is a selection of what’s currently available:

Base Components

Avatar – User image or placeholder initials.
Alert – Dismissible alerts with optional icons.
Badge – Status indicators and tags.
Breadcrumbs – Navigation hierarchy indicators.
Button – Multiple styles, states, and icons.
Skeleton – Placeholder elements for loading states.
Card – Structured content containers.
Kbd – Inline keyboard key display.
Link – Styled anchor elements.
Pagination – Page navigation controls.
Progress – Visual indicators for loading or steps.
Separator – Horizontal or vertical dividers.

Interactive Elements

Input Fields – Text inputs with validation and styling.
Textarea – Multiline input with Tailwind support.
Switch – Toggle switches with accessibility features.
Checkboxes & Radios – Custom-styled, accessible inputs.
Accordion – Expandable/collapsible sections.
Modal – Dialogs with transitions and focus trapping.
Toast – Temporary notification messages.
Select – Custom dropdowns with search and keyboard nav.
Drawer – Off-canvas panels for side content.
Dropdown – Toggleable action menus.
Tabs – Content panels with switchable navigation.
Tooltip – Contextual popups for hints or info.
ScrollTo – Smooth scroll behavior on click.
ScrollSpy – Auto-highlight sections in view.
Toggle Password – Show/hide password functionality.
Sticky – Elements that stick to the viewport.
ReParent – Dynamically move DOM elements between containers.
Dismiss – Close any element on trigger.
Collapse – Simple content toggling.
Datatable – Interactive tables with sorting, filtering, and pagination.
Stepper – Multi-step form navigation and progress tracking.

Getting Started

KTUI offers multiple ways to integrate into your project. You can use CDN links, install via npm, or include with Tailwind CLI.

Refer to the official installation guide for full setup instructions:

https://ktui.io/docs/installation

Explore the Documentation

Browse components, examples, and usage tips:

https://ktui.io/docs

Used By Metronic

KTUI powers Metronic, the world’s most popular Bootstrap, Tailwind, HTML, React, Next.js admin dashboard template, trusted by over 117,000 developers. If you're building complex UIs like dashboards or admin panels, Metronic shows the full potential of KtUI in production environments.