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

React implementation of the KERN-UX components library with 56 components (42 core + 14 addons), full TypeScript support, and comprehensive documentation.

⚡ Quick Start

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

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

function App() {
  return (
    <KernCard 
      title="Welcome to KERN"
      body={
        <>
          <KernAlert status="success">Setup completed!</KernAlert>
          <KernButton 
            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 (56 total)

Core Components (42)

Base Components:

• KernAlert - Alerts and notifications
• KernBadge - Labels and status indicators
• KernButton - Buttons with link functionality
• KernCard - Card layouts
• KernDivider - Divider lines
• KernHeading - Headlines (h1-h6) with flexible sizing
• KernIcon - Icon display
• KernLink - Links
• KernLoader - Loading animations
• KernProgress - Progress bars
• KernSpace - Consistent spacing utility
• KernText - Text display with semantic types

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:

• KernAccordion - Collapsible content sections
• KernColumn - Column layouts
• KernContainer - Container elements
• KernKopfzeile - A Kopfzeile
• KernRow - Row layouts

Data Components:

• KernDescriptionList - Description lists
• KernList - List (ordered and unordered)
• KernSummary - Summary sections
• KernSummaryGroup - Group of summary sections
• KernTable - Data tables
• KernTaskList - Task lists
• KernTaskListGroup - Group of task lists

Dialog-Komponenten:

• KernDialog - Modaler Dialog
• KernDialogTrigger - Der Button, der den modalen Dialog öffnet
• KernDialogModal - Umfasst den modalen Dialog
• KernDialogHeader - Kopfbereich des modalen Dialogs
• KernDialogBody - Contentbereich des modalen Dialogs
• KernDialogFooter - Beinhaltet die Buttons eines modalen Dialogs
• KernDialogFooterButton - Ein Button für KernDialogFooter
• KernDialogContext - Dialog-Kontext
• useDialog - Dialog-Hook

Addon Components (14)

Allgemeine Komponenten:

• KernSidebar - Navigations-Sidebar
• KernToggleDarkMode - Dark Mode Toggle
• 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:

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:

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