React-Umsetzung der Kern-UX Komponenten
npm install @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.
``bash`
npm install @kern-ux-annex/kern-react-kit
`tsx
import { KernButton, KernCard, KernAlert } from '@kern-ux-annex/kern-react-kit';
function App() {
return (
body={
<>
variant="primary"
href="https://www.kern-ux.de"
target="_blank"
/>
>
}
/>
);
}
`
Explore all components with live examples: Storybook Documentation
Base Components:
- KernAccordion - Collapsible content sectionsKernAlert
- - Alerts and notificationsKernBadge
- - Labels and status indicatorsKernButton
- - Buttons with link functionalityKernCard
- - Card layoutsKernDialog
- - Modal dialogsKernDivider
- - Divider linesKernHeading
- - Headlines (h1-h6) with flexible sizingKernIcon
- - Icon displayKernLink
- - LinksKernList
- - Lists (ul/ol) with flexible contentKernLoader
- - Loading animationsKernProgress
- - Progress barsKernSpace
- - Consistent spacing utilityKernText
- - Text display with semantic typesKernKopfzeile
- - A Kopfzeile
Form Components:
- KernCheckbox - CheckboxesKernFieldset
- - Form field groupsKernForm
- - Form containersKernInput
- - Text input fieldsKernInputDate
- - Date input fieldsKernRadio
- - Radio buttonsKernRadioGroup
- - Radio button groupsKernSelect
- - Select dropdownsKernTextarea
- - Multi-line text inputs
Layout Components:
- KernColumn - Column layoutsKernContainer
- - Container elementsKernRow
- - Row layouts
Data Components:
- KernDescriptionList - Description listsKernSummary
- - Summary sectionsKernTable
- - Data tablesKernTaskList
- - Task lists
Allgemeine Komponenten:
- KernSidebar - Navigations-SidebarKernToggleDarkMode
- - Dark Mode ToggleDialogProvider
- - Dialog-Context-ProviderDialogContext
- - Dialog-KontextuseDialog
- - Dialog-HookuseDialogSafe
- - Sicherer Dialog-HookEventEmitter
- - Event-System
Menu/Menubar-Komponenten:
- KernMenubar - MenubarKernSubMenu
- - Submenu für die MenubarKernMenu
- - Menu, kann dem Menubutton Pattern folgendKernMenuitem
- - Menuitem für einzelne Einträge in der Menubar oder dem SubMenu
Tabs-Komponenten:
- KernTabs - TabsKernTabList
- - Tab-List als Wrapper für einen oder mehrere TabsKernTab
- - TabKernTabPanels
- - Tab-Panels als Wrapper für die InhalteKernTabPanel
- - Tab-Panel für InhalteKernTabsContext
- - Tabs-KontextuseTabs
- - Tabs-Hook
- 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
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
};
`
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";
- React: ^18.0.0 || ^19.0.0
- React DOM: ^18.0.0 || ^19.0.0
EUPL-1.2
This package is part of the KERN-UX community project. For more information, visit:
https://gitlab.opencode.de/kern-ux/community/kern-react-kit