@kern-ux-annex/kern-react-kit


React implementation of the KERN-UX components library with 50 components (32 core + 18 addons), full TypeScript support, and comprehensive documentation.

⚡ Quick Start

``bash
npm install @kern-ux-annex/kern-react-kit
`

`tsx
import { KernButton, KernCard, KernAlert } from '@kern-ux-annex/kern-react-kit';

function App() {
return (
title="Welcome to KERN"
body={
<>
Setup completed!
text="Visit KERN"
variant="primary"
href="https://www.kern-ux.de"
target="_blank"
/>

}
/>
);
}
`

📖 Interactive Documentation

Explore all components with live examples: Storybook Documentation

📦 Available Components (50 total)

$3

Base Components:

- KernAccordion - Collapsible content sections
- KernAlert - Alerts and notifications
- KernBadge - Labels and status indicators
- KernButton - Buttons with link functionality
- KernCard - Card layouts
- KernDialog - Modal dialogs
- KernDivider - Divider lines
- KernHeading - Headlines (h1-h6) with flexible sizing
- KernIcon - Icon display
- KernLink - Links
- KernList - Lists (ul/ol) with flexible content
- KernLoader - Loading animations
- KernProgress - Progress bars
- KernSpace - Consistent spacing utility
- KernText - Text display with semantic types
- KernKopfzeile - A Kopfzeile

Form Components:

- KernCheckbox - Checkboxes
- KernFieldset - Form field groups
- KernForm - Form containers
- KernInput - Text input fields
- KernInputDate - Date input fields
- KernRadio - Radio buttons
- KernRadioGroup - Radio button groups
- KernSelect - Select dropdowns
- KernTextarea - Multi-line text inputs

Layout Components:

- KernColumn - Column layouts
- KernContainer - Container elements
- KernRow - Row layouts

Data Components:

- KernDescriptionList - Description lists
- KernSummary - Summary sections
- KernTable - Data tables
- KernTaskList - Task lists

$3

Allgemeine Komponenten:

- KernSidebar - Navigations-Sidebar
- KernToggleDarkMode - Dark Mode Toggle
- DialogProvider - Dialog-Context-Provider
- DialogContext - Dialog-Kontext
- useDialog - Dialog-Hook
- useDialogSafe - Sicherer Dialog-Hook
- EventEmitter - Event-System

Menu/Menubar-Komponenten:

- KernMenubar - Menubar
- KernSubMenu - Submenu für die Menubar
- KernMenu - Menu, kann dem Menubutton Pattern folgend
- KernMenuitem - Menuitem für einzelne Einträge in der Menubar oder dem SubMenu

Tabs-Komponenten:
- KernTabs - Tabs
- KernTabList - Tab-List als Wrapper für einen oder mehrere Tabs
- KernTab - Tab
- KernTabPanels - Tab-Panels als Wrapper für die Inhalte
- KernTabPanel - Tab-Panel für Inhalte
- KernTabsContext - Tabs-Kontext
- useTabs - Tabs-Hook

⚙️ Features

- Full TypeScript Support: Complete type definitions with JSDoc documentation
- React 18 & 19 Compatible: Supports both React versions
- Button Link Functionality: KernButton supports both button and link behavior
- Semantic Typography: Flexible heading levels and text types
- Accessibility: WCAG-compliant components
- Modern Builds: ES modules and CommonJS support
- Zero Dependencies: Only peer dependencies on React

🚀 TypeScript Support

This package provides comprehensive TypeScript support:

`tsx
import type { ButtonProps, HeadingProps } from '@kern-ux-annex/kern-react-kit';

// Full IntelliSense support for all component properties
const button: ButtonProps = {
text: "Submit",
variant: "primary", // Autocomplete: primary | secondary | tertiary
type: "submit" // Autocomplete: button | submit | reset
};
`

🎨 CSS Dependencies

Include the required CSS in your project:

`tsx
import "@kern-ux/native/dist/kern.min.css";
import "@kern-ux/native/dist/fonts/fira-sans.css";
``

🔧 Peer Dependencies

- React: ^18.0.0 || ^19.0.0
- React DOM: ^18.0.0 || ^19.0.0

📄 License

EUPL-1.2

🤝 Contributing

This package is part of the KERN-UX community project. For more information, visit:
https://gitlab.opencode.de/kern-ux/community/kern-react-kit