A flexible UI library with theming and CSS specificity hierarchy. Supports React 16.11+ through React 19+ with full backward and forward compatibility.
npm install kratos-uiGMP personal UI component library 💪💪
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+)
- 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
``bash`
npm install kratos-ui
Optional but Recommended: For better control over CSS class names, you can initialize emotion with a custom key. The library will auto-initialize with the default key 'kratos' if you don't call this.
`jsx
import { initEmotion } from 'kratos-ui';
// Initialize emotion with a custom key (optional)
// Use your project name or any unique identifier
initEmotion('my-project-name');
`
Note: If you don't call initEmotion, the library will automatically initialize with the key 'kratos'. This ensures the library works out-of-the-box without any setup.
`jsx
import { ThemeProvider, createTheme } from 'kratos-ui';
const theme = createTheme({
palette: {
primary: { main: '#1976d2' },
},
});
function App() {
return (
{/ Your app components /}
);
}
`
`jsx
import React from 'react';
import { Button, ThemeProvider, createTheme, initEmotion } from 'kratos-ui';
// ⚠️ IMPORTANT: Initialize emotion before using any components
// This must be called once at the root of your application
initEmotion('kratos'); // Use 'kratos' or any unique key for your project
// Create a custom theme
const theme = createTheme({
palette: {
primary: { main: '#1976d2' },
secondary: { main: '#dc004e' },
},
});
function App() {
return (
);
}
`
Optional: The library auto-initializes emotion with the default key 'kratos', so you can start using components immediately without any setup.
If you want to use a custom key for CSS class names (to avoid conflicts with other emotion instances), you can call initEmotion(key):
`jsx
import { initEmotion } from 'kratos-ui';
// Initialize with a custom key (optional)
initEmotion('my-project-name');
`
Why use a custom key? If your project uses multiple emotion instances, using a custom key ensures CSS class names are properly scoped and don't conflict.
`jsx
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 ;
}
`🎯 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)
View all components and examples in Storybook:
Available stories:
- Controller - Interactive components with controls
- Variants - All components variants (showcase)
- playground - for developing in local
`bash
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
``