Kratos UI

GMP personal UI component library 💪💪

⚠️ React Compatibility

This library requires React 16.8.0 or higher due to the use of React Hooks. The library uses the following React features:

• React Hooks: useState, useEffect, useRef, useMemo, useContext
• Forward Ref: forwardRef (requires React 16.3+)
• Context API: createContext (requires React 16.3+)

Version Support

• React 16.8.0+: ✅ Fully supported
• React 16.3.0 - 16.7.x: ⚠️ Partial support (Context API works, but no Hooks)
• React < 16.3.0: ❌ Not supported

🎯 Key Features

• Storybook Documentation - Interactive examples and documentation
• Emotion Integration - Pure CSS-in-JS with @emotion/css
• Theme Integration - Style all components once using theme
• makeStyles Hook - Dynamic styling with theme and props
• CSS Specificity Hierarchy - Theme → makeStyles → Inline → !important

📦 Installation

npm install kratos-ui

🚀 Quick Start

Basic Usage

import React from 'react';
import { Button, ThemeProvider, createTheme } from 'kratos-ui';

// Create a custom theme
const theme = createTheme({
    palette: {
        primary: { main: '#1976d2' },
        secondary: { main: '#dc004e' },
    },
});

function App() {
    return (
        <ThemeProvider theme={theme}>
            <Button variant="contained" color="primary">
                Click me
            </Button>
        </ThemeProvider>
    );
}

🎨 makeStyle hook

import { Button, makeStyles } from 'kratos-ui';

const useStyles = makeStyles({
    customButton: {
        backgroundColor: 'orange',
        color: 'white',
        borderRadius: '8px',
        padding: '10px 20px',
        fontSize: '14px',
        fontWeight: '600',
    },
});

function App() {
    const classes = useStyles();

    return <Button className={classes.customButton}>Custom Styled Button</Button>;
}

🎯 CSS Specificity Hierarchy

The component follows this CSS specificity order (from lowest to highest priority):

1. Theme styles (lowest priority)
2. makeStyles classes (medium priority)
3. Inline styles (high priority)
4. !important classes (highest priority)

📚 Storybook

View all components and examples in Storybook:

Available stories:

• Controller - Interactive components with controls
• Variants - All components variants (showcase)
• playground - for developing in local

🛠️ Development

1. Fork the repository - git clone
2. checkout a feature branch
3. take pull from develop branch
4. npm install --legacy-peer-deps
5. npm run start
6. Make your changes (check GUIDELINES.md file)
7. Submit a pull request to develop branch