https://github.com/glatztp/gltz
Biblioteca de componentes React moderna, acessível e customizável
https://github.com/glatztp/gltz
component-library dark-theme framer-motion library nodejs npm-package react shadcn-ui styled-components tailwindcss typescript ui-components
Last synced: 11 months ago
JSON representation
Biblioteca de componentes React moderna, acessível e customizável
- Host: GitHub
- URL: https://github.com/glatztp/gltz
- Owner: glatztp
- License: mit
- Created: 2025-07-21T02:07:47.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-31T03:04:27.000Z (11 months ago)
- Last Synced: 2025-07-31T05:28:35.804Z (11 months ago)
- Topics: component-library, dark-theme, framer-motion, library, nodejs, npm-package, react, shadcn-ui, styled-components, tailwindcss, typescript, ui-components
- Language: TypeScript
- Homepage: https://gltz.vercel.app
- Size: 1.83 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @gltz-packages/ui
**Enterprise-Grade React Component Library for Modern Applications**
A comprehensive, accessible, and highly customizable React component library built with modern web standards, TypeScript, and industry best practices.
[](https://www.npmjs.com/package/@gltz-packages/ui)
[](https://www.npmjs.com/package/@gltz-packages/ui)
[](https://www.typescriptlang.org/)
[](https://bundlephobia.com/package/@gltz-packages/ui)
[](https://opensource.org/licenses/MIT)
[📖 **Documentation**](https://gltz.vercel.app/docs) • [🚀 **Live Demo**](https://gltz.vercel.app) • [📦 **NPM Package**](https://www.npmjs.com/package/@gltz-packages/ui) • [🐛 **Report Issues**](https://github.com/glatztp/gltz/issues) • [💬 **Discussions**](https://github.com/glatztp/gltz/discussions)
---
## Overview
@gltz-packages/ui is a production-ready React component library designed for enterprise applications. Built on modern web standards with accessibility, performance, and developer experience as core principles.
### Key Features
- **50+ Professional Components** - Comprehensive set of UI components for enterprise applications
- **Full TypeScript Support** - Complete type safety with excellent IntelliSense support
- **Accessibility First** - WCAG 2.1 AA compliant components with full keyboard navigation
- **Theme System** - Advanced theming with CSS custom properties and dark mode support
- **Framework Agnostic** - Compatible with Next.js, Vite, Create React App, Remix, and Gatsby
- **Tree Shakeable** - Optimized bundle size with selective imports
- **Production Ready** - Battle-tested in enterprise environments
- **Developer Experience** - Comprehensive documentation, examples, and TypeScript definitions
### Architecture
Built on a foundation of industry-leading technologies:
- **React** 18+ - Latest React features with concurrent rendering
- **TypeScript** 5+ - Full type safety and excellent developer experience
- **Radix UI** - Unstyled, accessible component primitives
- **Tailwind CSS** - Utility-first styling with design tokens
- **Framer Motion** - Smooth, performant animations
- **Class Variance Authority** - Type-safe component variants
---
## Installation & Quick Start
### NPM Installation
```bash
# Install the library
npm install @gltz-packages/ui lucide-react
# Or with Yarn
yarn add @gltz-packages/ui lucide-react
# Or with PNPM
pnpm add @gltz-packages/ui lucide-react
```
### Framework Setup
Next.js (App Router)
**1. Create a new Next.js project:**
```bash
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app
npm install @gltz-packages/ui lucide-react
```
**2. Configure Tailwind CSS** (`tailwind.config.js`):
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
'./src/**/*.{ts,tsx}',
'./node_modules/@gltz-packages/ui/dist/**/*.{js,ts,jsx,tsx}',
],
prefix: "",
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
}
```
**3. Add global styles** (`app/globals.css`):
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 84% 4.9%;
--muted: 210 40% 96%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 210 40% 96%;
--accent-foreground: 222.2 84% 4.9%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--radius: 0.5rem;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
```
Vite + React
**1. Create a new Vite project:**
```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install @gltz-packages/ui lucide-react tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
**2. Configure Tailwind CSS** (`tailwind.config.js`):
```javascript
/** @type {import('tailwindcss').Config} */
export default {
darkMode: ["class"],
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@gltz-packages/ui/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
// ... same configuration as Next.js
},
},
plugins: [require("tailwindcss-animate")],
}
```
**3. Add styles** (`src/index.css`):
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... same CSS variables as Next.js */
```
Create React App
**1. Create a new CRA project:**
```bash
npx create-react-app my-app --template typescript
cd my-app
npm install @gltz-packages/ui lucide-react
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```
**2. Configure Tailwind CSS** (`tailwind.config.js`):
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
"./src/**/*.{js,jsx,ts,tsx}",
"./public/index.html",
"./node_modules/@gltz-packages/ui/dist/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
// ... same configuration as Next.js
},
},
plugins: [require("tailwindcss-animate")],
}
```
**3. Add styles** (`src/index.css`):
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... same CSS variables as Next.js */
```
### Basic Usage Example
```tsx
import React from 'react';
import {
Button,
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
Input,
Label,
Separator
} from "@gltz-packages/ui";
export default function App() {
return (
Welcome to GLTZ UI
A comprehensive React component library for modern applications.
Email
Get Started
);
}
```
---
## Component Library
@gltz-packages/ui provides a comprehensive collection of 50+ components organized into logical categories for enterprise application development.
### Form Components (12 Components)
Professional form controls with built-in validation and accessibility features.
| Component | Description | Features |
|-----------|-------------|----------|
| **Button** | Versatile button component with multiple variants | 6 variants, 4 sizes, loading states, icon support |
| **Input** | Text input with validation support | Type variants, validation states, icons, controlled/uncontrolled |
| **Textarea** | Multi-line text input with auto-resize | Character counting, auto-resize, validation |
| **Checkbox** | Accessible checkbox with custom styling | Indeterminate state, custom icons, form integration |
| **Radio Group** | Radio button group component | Horizontal/vertical layout, validation |
| **Switch** | Toggle switch component | Sizes, disabled state, controlled |
| **Label** | Accessible form label | Auto-association, required indicators |
| **Slider** | Range slider component | Single/double handles, custom marks, validation |
| **Select** | Dropdown selection component | Multi-select, searchable, custom options |
| **Date Picker** | Modern date selection | Range selection, presets, time picker |
| **Calendar** | Full calendar component | Multi-date selection, custom day rendering |
| **Input OTP** | One-time password input | Auto-focus, paste support, customizable length |
### Navigation Components (6 Components)
Comprehensive navigation solutions for complex applications.
| Component | Description | Features |
|-----------|-------------|----------|
| **Navigation Menu** | Hierarchical navigation menu | Nested menus, responsive, keyboard navigation |
| **Menubar** | Application menu bar | Context menus, keyboard shortcuts |
| **Breadcrumb** | Navigation breadcrumb | Custom separators, collapsible |
| **Tabs** | Tabbed interface component | Vertical/horizontal, lazy loading |
| **Pagination** | Data pagination controls | Customizable ranges, jump to page |
| **Command** | Command palette interface | Keyboard shortcuts, search, grouping |
### Overlay Components (10 Components)
Modal and overlay components for enhanced user interactions.
| Component | Description | Features |
|-----------|-------------|----------|
| **Dialog** | Modal dialog component | Nested modals, scroll locking, focus management |
| **Alert Dialog** | Confirmation dialog | Custom actions, accessibility |
| **Popover** | Positioned popover content | Auto-positioning, arrow, trigger options |
| **Tooltip** | Contextual tooltip | Delay configuration, rich content, positioning |
| **Sheet** | Slide-out panel | Multiple sides, sizes, backdrop |
| **Drawer** | Mobile-friendly drawer | Swipe gestures, snap points |
| **Hover Card** | Hover-triggered card | Delay, rich content, positioning |
| **Context Menu** | Right-click context menu | Nested menus, keyboard navigation |
| **Dropdown Menu** | Dropdown menu component | Checkable items, separators, icons |
| **Combobox** | Searchable select component | Async search, custom filtering |
### Feedback Components (6 Components)
User feedback and status indication components.
| Component | Description | Features |
|-----------|-------------|----------|
| **Alert** | Contextual alert messages | 4 variants, dismissible, custom icons |
| **Toast** | Notification toast system | Queue management, positioning, actions |
| **Sonner** | Modern toast notifications | Rich content, promise handling |
| **Progress** | Progress indication | Determinate/indeterminate, circular variant |
| **Skeleton** | Loading state placeholders | Custom shapes, animation controls |
| **Badge** | Status and labeling badges | Multiple variants, sizes, removable |
### Layout Components (8 Components)
Structural components for organizing application layout.
| Component | Description | Features |
|-----------|-------------|----------|
| **Card** | Content container card | Header, content, footer sections |
| **Separator** | Visual content separator | Horizontal/vertical, custom styling |
| **Scroll Area** | Custom scrollable area | Custom scrollbars, horizontal/vertical |
| **Accordion** | Collapsible content sections | Multiple/single expansion, custom triggers |
| **Collapsible** | Simple collapsible content | Smooth animations, trigger customization |
| **Resizable** | Resizable panel layout | Horizontal/vertical, constraints, persistence |
| **Aspect Ratio** | Responsive aspect ratio container | Common ratios, custom values |
| **Container** | Responsive container component | Breakpoint-based max-widths |
### Data Display Components (5 Components)
Components for displaying and organizing data.
| Component | Description | Features |
|-----------|-------------|----------|
| **Data Table** | Feature-rich data table | Sorting, filtering, pagination, selection |
| **Avatar** | User avatar component | Image, fallback, status indicator, sizes |
| **Table** | Basic table components | Responsive, striped, hover states |
| **List** | Structured list component | Ordered/unordered, custom styling |
| **Timeline** | Event timeline component | Vertical/horizontal, custom markers |
---
## Theming & Customization
### Design System
@gltz-packages/ui implements a comprehensive design system with consistent spacing, typography, and color scales.
#### Color Palette
The library uses HSL color space for maximum flexibility and includes semantic color tokens:
```css
:root {
/* Primary Colors */
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
/* Secondary Colors */
--secondary: 210 40% 96%;
--secondary-foreground: 222.2 84% 4.9%;
/* Semantic Colors */
--destructive: 0 84.2% 60.2%;
--warning: 38 92% 50%;
--success: 142 71% 45%;
/* UI Colors */
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
}
```
#### Dark Mode Support
Automatic dark mode support with system preference detection:
```tsx
import { ThemeProvider } from "@gltz-packages/ui";
function App() {
return (
);
}
```
#### Custom Themes
Create custom themes by overriding CSS custom properties:
```css
[data-theme="corporate"] {
--primary: 210 100% 40%;
--primary-foreground: 0 0% 100%;
--secondary: 210 40% 94%;
--secondary-foreground: 210 100% 15%;
--accent: 210 100% 95%;
--accent-foreground: 210 100% 20%;
}
```
#### Typography Scale
Consistent typography scale with responsive sizing:
```css
:root {
--font-sans: 'Inter', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Type Scale */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
}
```
#### Spacing System
Consistent spacing scale based on 4px units:
```css
:root {
--spacing-0: 0;
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-3: 0.75rem; /* 12px */
--spacing-4: 1rem; /* 16px */
--spacing-5: 1.25rem; /* 20px */
--spacing-6: 1.5rem; /* 24px */
--spacing-8: 2rem; /* 32px */
--spacing-10: 2.5rem; /* 40px */
--spacing-12: 3rem; /* 48px */
--spacing-16: 4rem; /* 64px */
--spacing-20: 5rem; /* 80px */
--spacing-24: 6rem; /* 96px */
}
```
---
## Accessibility
@gltz-packages/ui is built with accessibility as a first-class citizen, ensuring all components meet WCAG 2.1 AA standards.
### Accessibility Features
- **Keyboard Navigation** - Full keyboard support with logical tab order
- **Screen Reader Support** - ARIA labels, descriptions, and live regions
- **Focus Management** - Visible focus indicators and focus trapping
- **High Contrast Mode** - Support for Windows High Contrast Mode
- **Reduced Motion** - Respects `prefers-reduced-motion` setting
- **Color Contrast** - All color combinations meet AA contrast ratios
### ARIA Implementation
Components include comprehensive ARIA support:
```tsx
// Button with accessible loading state
{loading && Loading}
{loading ? : "Submit"}
// Form with proper labeling
Email
{hasError && (
Please enter a valid email address
)}
```
### Testing Accessibility
We recommend using these tools to test accessibility:
```bash
# Install axe-core for automated testing
npm install -D @axe-core/react
# Install testing utilities
npm install -D @testing-library/jest-dom @testing-library/user-event
```
```tsx
import { axe, toHaveNoViolations } from '@axe-core/jest-axe';
import { render } from '@testing-library/react';
expect.extend(toHaveNoViolations);
test('Button is accessible', async () => {
const { container } = render(Click me);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
```
---
## Performance
@gltz-packages/ui is optimized for production environments with several performance considerations.
### Bundle Size Optimization
- **Tree Shaking** - Import only the components you use
- **Code Splitting** - Lazy load heavy components
- **Bundle Analysis** - Monitor bundle impact
```tsx
// ✅ Good - Tree shaking friendly
import { Button, Card } from "@gltz-packages/ui";
// ❌ Avoid - Imports entire library
import * as UI from "@gltz-packages/ui";
```
### Performance Monitoring
Monitor your bundle size impact:
```bash
# Analyze bundle size
npm install -D webpack-bundle-analyzer
npx webpack-bundle-analyzer build/static/js/*.js
# Check individual component sizes
npm install -D bundlephobia-cli
npx bundlephobia @gltz-packages/ui
```
### Component Performance
Components are optimized with:
- **React.memo** - Prevent unnecessary re-renders
- **useCallback/useMemo** - Memoize expensive operations
- **Virtualization** - Large lists use virtual scrolling
- **Lazy Loading** - Heavy components load on demand
### Animation Performance
Animations use GPU acceleration:
```css
/* Hardware accelerated animations */
.animate-fade-in {
animation: fadeIn 0.2s ease-out;
transform: translateZ(0); /* GPU acceleration */
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.animate-fade-in {
animation: none;
transition: none;
}
}
```
---
## Testing
@gltz-packages/ui provides comprehensive testing utilities and examples.
### Testing Setup
Install testing dependencies:
```bash
npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event
```
Configure Jest:
```javascript
// jest.config.js
module.exports = {
setupFilesAfterEnv: ['/src/setupTests.js'],
testEnvironment: 'jsdom',
moduleNameMapping: {
'^@/(.*)$': '/src/$1',
},
};
```
```javascript
// src/setupTests.js
import '@testing-library/jest-dom';
```
### Component Testing Examples
```tsx
import { render, screen, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from '@gltz-packages/ui';
describe('Button Component', () => {
test('renders with text', () => {
render(Click me);
expect(screen.getByRole('button')).toHaveTextContent('Click me');
});
test('handles click events', async () => {
const handleClick = jest.fn();
const user = userEvent.setup();
render(Click me);
await user.click(screen.getByRole('button'));
expect(handleClick).toHaveBeenCalledTimes(1);
});
test('shows loading state', () => {
render(Loading...);
expect(screen.getByRole('button')).toBeDisabled();
expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
});
});
```
### Visual Testing
Use Storybook for visual regression testing:
```bash
# Install Storybook
npx storybook@latest init
# Install visual testing addon
npm install -D @storybook/addon-visual-tests
```
### Accessibility Testing
```tsx
import { axe, toHaveNoViolations } from '@axe-core/jest-axe';
expect.extend(toHaveNoViolations);
test('Form is accessible', async () => {
const { container } = render(
Name
Submit
);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
```
---
## Migration & Upgrade Guide
### From Version 1.x to 2.x
Major changes in version 2.0:
1. **Breaking Changes:**
- Renamed `variant` prop values for consistency
- Updated CSS custom property names
- Removed deprecated components
2. **New Features:**
- Enhanced TypeScript definitions
- New component variants
- Improved accessibility support
3. **Migration Steps:**
```bash
# Update package
npm install @gltz-packages/ui@^2.0.0
# Update CSS custom properties
# Old
--primary-500: 59 130 246;
# New
--primary: 217.2 91.2% 59.8%;
```
```tsx
// Update component props
// Old
Click me
// New
Click me
```
### Codemods
Use automated migration tools:
```bash
npx @gltz-packages/codemods v1-to-v2 src/
```
---
## Contributing
We welcome contributions from the community! Please read our [Contributing Guidelines](CONTRIBUTING.md) for detailed information.
### Development Setup
1. **Clone the repository:**
```bash
git clone https://github.com/glatztp/gltz.git
cd gltz
```
2. **Install dependencies:**
```bash
npm install
```
3. **Start development server:**
```bash
npm run dev
```
4. **Run tests:**
```bash
npm test
```
5. **Build the library:**
```bash
npm run build
```
### Project Structure
```
gltz/
├── src/
│ ├── components/ # React components
│ │ ├── ui/ # Core UI components
│ │ ├── layout/ # Layout components
│ │ └── providers/ # Context providers
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utility functions
│ ├── styles/ # CSS and styling
│ └── types/ # TypeScript definitions
├── docs/ # Documentation
├── tests/ # Test suites
├── .storybook/ # Storybook configuration
└── build/ # Build output
```
### Code Standards
- **TypeScript** - All code must be written in TypeScript
- **ESLint** - Follow the configured ESLint rules
- **Prettier** - Code formatting is handled by Prettier
- **Testing** - All components must have comprehensive tests
- **Documentation** - Include JSDoc comments and Storybook stories
### Commit Convention
We follow [Conventional Commits](https://www.conventionalcommits.org/):
```bash
git commit -m "feat: add new DatePicker component"
git commit -m "fix: resolve button focus issue"
git commit -m "docs: update installation guide"
```
---
## Community & Support
### Getting Help
- **Documentation**: [https://gltz.vercel.app/docs](https://gltz.vercel.app/docs)
- **GitHub Issues**: [Report bugs or request features](https://github.com/glatztp/gltz/issues)
- **GitHub Discussions**: [Community discussions](https://github.com/glatztp/gltz/discussions)
- **Stack Overflow**: Tag your questions with `gltz-ui`
### Community Guidelines
- Be respectful and inclusive
- Provide clear, reproducible examples
- Search existing issues before creating new ones
- Follow our [Code of Conduct](CODE_OF_CONDUCT.md)
### Enterprise Support
For enterprise customers, we offer:
- **Priority Support** - Dedicated support channel
- **Custom Components** - Bespoke component development
- **Training & Consulting** - Team training and architecture consulting
- **SLA Agreements** - Service level agreements
Contact us at: enterprise@gltz.dev
---
## Roadmap
### Version 2.3 (Q3 2025)
- **New Components**: Calendar improvements, Rich Text Editor, File Upload
- **Accessibility**: Enhanced screen reader support, keyboard navigation
- **Performance**: Bundle size optimization, lazy loading improvements
- **Developer Experience**: Better TypeScript definitions, improved docs
### Version 2.4 (Q4 2025)
- **Advanced Data Table**: Virtual scrolling, advanced filtering
- **Chart Components**: Integration with popular charting libraries
- **Mobile Optimization**: Touch gestures, responsive improvements
- **Testing**: Visual regression testing, accessibility testing tools
### Long-term Goals
- **React 19 Support** - Full compatibility with React 19
- **Server Components** - React Server Components support
- **Figma Integration** - Design tokens sync with Figma
- **CLI Tools** - Component generation and project setup tools
---
## Changelog
### Version 2.2.1 (Current)
#### Added
- New `MultiCombobox` component for multi-selection
- Enhanced `DatePicker` with range selection
- Dark mode improvements across all components
- Bundle size optimizations
#### Fixed
- Accessibility issues in `Dialog` component
- TypeScript definitions for theme provider
- Focus management in `Popover` component
#### Changed
- Updated dependencies to latest versions
- Improved documentation with more examples
- Enhanced Storybook stories
[View full changelog](CHANGELOG.md)
---
## License
MIT License © 2025 [glatztp](https://github.com/glatztp)
```
MIT License
Copyright (c) 2025 glatztp
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
```
---
## Acknowledgments
Special thanks to the open-source community and these amazing projects:
- **[Radix UI](https://radix-ui.com)** - Accessible component primitives
- **[Tailwind CSS](https://tailwindcss.com)** - Utility-first CSS framework
- **[shadcn/ui](https://ui.shadcn.com)** - Design inspiration and patterns
- **[Framer Motion](https://framer.com/motion)** - Animation library
- **[Lucide](https://lucide.dev)** - Beautiful icon set
- **[React](https://react.dev)** - The foundation of our library
---
**Built with ❤️ by [glatztp](https://github.com/glatztp)**
⭐ **If you find this project useful, please consider giving it a star on GitHub!** ⭐
[](https://github.com/glatztp/gltz/stargazers)
[](https://github.com/glatztp/gltz/network)
[](https://github.com/glatztp/gltz/watchers)