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

React implementation of the KERN-UX components library with 37 components (30 core + 7 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 (38 total)

Core Components (30)

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

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

Addon Components (7)

• KernSidebar - Navigation sidebar
• KernToggleDarkMode - Dark mode toggle
• DialogProvider - Dialog context provider
• DialogContext - Dialog context
• useDialog - Dialog hook
• useDialogSafe - Safe dialog hook
• EventEmitter - Event system

⚙️ 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