A modern, accessible, and themeable UI component library built with Vue 3 and TypeScript. Designed for building professional applications with a focus on flexibility, performance, and developer experience.
- ✨ Modern Vue 3 Components: Built with Vue 3 and Composition API
- 🎨 Themeable: Seamless light, dark, and high-contrast themes
- ♿ Accessible: WCAG 2.1 compliant components with proper ARIA attributes
- 🔍 Type-Safe: Full TypeScript support with detailed type definitions
- 🧩 Composable: Modular components designed for composition
- 📱 Responsive: Adapts to all screen sizes and device types
- 🚀 Performance: Optimized for minimal bundle size and runtime performance
# npm
npm install alt-ui
# yarn
yarn add alt-ui
# pnpm
pnpm add alt-ui<script setup>
import { AltButton, AltInput, themeProvider } from 'alt-ui';
import 'alt-ui/styles';
// Apply a theme
themeProvider.applyTheme('light'); // 'light', 'dark', 'contrast', or 'system'
</script>
<template>
<div>
<AltInput label="Username" placeholder="Enter your username" />
<AltButton variant="primary">Submit</AltButton>
</div>
</template>AltButton: Versatile button component with various styles and statesAltCarousel: Content carousel with customizable navigationAltCollapsableBox: Expandable hint text containerAltDialog: Modal dialog with customizable contentAltEditableTable: Interactive table with editable cellsAltEditableText: Text field that can be toggled between view and edit modesAltHoverCard: Rich content card that appears on hoverAltIcon: Flexible icon component supporting various icon librariesAltMenu: Dropdown menu with customizable itemsAltSegmentGroup: Segmented control for selecting from mutually exclusive optionsAltSpinner: Loading spinner with customizable size and colorAltTable: Data table with sorting and customization optionsAltTabs: Tab container for organizing contentAltTabsTrigger: Individual tab trigger componentAltToaster: Toast notification systemAltToggleGroup: Button group for toggling between options
AltCheckbox: Checkbox input with label and indeterminate stateAltCombobox: Combobox input with autocomplete supportAltInput: Text input with various states and validationAltRadioGroup: Radio button group with customizable itemsAltSelect: Select dropdown with customizable optionsAltSwitch: Toggle switch with labelFormField: Container for form elements with label and description
ThemeProvider: Theme management systemThemeToggle: UI component for switching between themes
Alt-UI uses CSS variables for consistent styling and theming:
// Apply a theme programmatically
import { themeProvider } from 'alt-ui';
themeProvider.applyTheme('dark');
// Or use the ThemeToggle component for UI-based switching
import { ThemeToggle } from 'alt-ui';Alt-UI is built with TypeScript and provides comprehensive type definitions:
import type { ButtonProps, TableColumn } from 'alt-ui';
// Type-safe component props
const buttonProps: ButtonProps = {
variant: 'primary',
size: 'md',
disabled: false,
};For full documentation and examples, visit our documentation site:
# Install dependencies
pnpm install
# Start development server
pnpm dev
# Build the library
pnpm build
# Run documentation site locally
pnpm docs:devContributions are welcome! Please feel free to submit a Pull Request.