Tabs Component - etak64n.dev

Style 1 -- Underline

This component library provides a curated set of UI primitives designed for modern web applications. Built with accessibility in mind, each component follows WAI-ARIA guidelines and supports keyboard navigation out of the box. The modular architecture allows tree-shaking for optimal bundle sizes.

Key features include: fully typed TypeScript API, CSS custom properties for theming, RTL language support, SSR compatibility, and comprehensive test coverage. Components are framework-agnostic and work with React, Vue, Svelte, and vanilla JavaScript.

v2.4.0 -- Added new Calendar and DatePicker components. Improved animation performance across all interactive elements. Fixed edge cases in form validation logic. Updated dependency tree for security patches.

Released under the MIT License. Free for personal and commercial use. Attribution is appreciated but not required. See the repository for full license text and contribution guidelines.

Style 2 -- Pill

The design system follows an 8px grid with consistent spacing tokens. Typography scales use a modular ratio of 1.25, creating a natural visual hierarchy. Color palettes are generated from a single primary hue with calculated contrast ratios meeting WCAG AA standards.

Development workflow includes hot module replacement, incremental builds, and automated code formatting. The build pipeline supports both ESM and CJS output formats. Source maps are generated for all production builds to aid debugging.

The test suite covers unit tests with Vitest, integration tests with Testing Library, and visual regression tests with Playwright. Coverage thresholds are enforced at 90% for branches and statements. Accessibility audits run automatically on every pull request.

Style 3 -- Boxed

Install via npm or yarn: run the install command with the package name. The package has zero runtime dependencies and weighs under 12KB gzipped. Peer dependencies include only the target framework if using framework-specific bindings.

Configuration is handled through a single JSON file at the project root. Options include theme tokens, component defaults, breakpoint values, and animation preferences. Environment-specific overrides can be defined using the extends property.

Each component exports a factory function accepting a props object and returning a DOM element or virtual node. Common props include: variant (string), size (sm/md/lg), disabled (boolean), and className (string). Event handlers follow the standard on-prefix convention.