@klikui/core

Modern React UI component library. Built with CSS Modules + SCSS for production-ready applications.

Features

• 🎨 Silent design - Refined, sophisticated UI with attention to detail
• ♿ Accessibility first - WCAG 2.1 AA compliant with ARIA support
• 🎯 TypeScript native - Full type safety out of the box
• 📦 Tree-shakeable - Import only what you need
• 🎭 CSS Modules + SCSS - Scoped styles, no runtime overhead
• 🌗 Dual builds - ESM and CommonJS support
• ⚡ React 18 & 19 - Works with latest React versions

Installation

npm install @klikui/core

Quick Start

import { Button, Input, Alert } from '@klikui/core';
import '@klikui/core/styles';

function App() {
  return (
    <div>
      <Alert variant="info">Welcome to klikui!</Alert>
      <Input label="Email" placeholder="Enter your email" />
      <Button variant="primary">Get Started</Button>
    </div>
  );
}

Available Components

Forms & Inputs

• Button - Primary actions with 5 variants and loading states
• Input - Text inputs with labels, validation, and prefix/suffix
• Checkbox - Binary selection with indeterminate support
• Radio - Single selection control

Feedback

• Alert - Inline messages with 4 severity levels
• Toast - Notifications with queue management
• Modal - Dialogs with focus trap and accessibility
• Loading - Animated spinner with optional message

Layout & Navigation

• Card - Composable containers with Header/Body/Footer
• Navigation - App navigation bar with brand and links

Display

• Badge - Status indicators and counts

Component Examples

Button

import { Button } from '@klikui/core';

<Button variant="primary" size="lg" onClick={handleClick}>
  Click me
</Button>

<Button variant="danger" loading>
  Processing...
</Button>

Input

import { Input } from '@klikui/core';

<Input
  label="Username"
  placeholder="Enter username"
  helperText="Choose a unique username"
  error={errors.username}
/>

Alert

import { Alert } from '@klikui/core';

<Alert variant="success" closable>
  Your changes have been saved!
</Alert>

Card

import { Card, CardHeader, CardBody, CardFooter } from '@klikui/core';

<Card variant="elevated">
  <CardHeader>
    <h2>Card Title</h2>
  </CardHeader>
  <CardBody>
    <p>Card content goes here</p>
  </CardBody>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Styling

klikui uses CSS Modules + SCSS for styling. Import the styles once in your app:

import '@klikui/core/styles';

All components are styled with a sleek, modern design system featuring:

• Refined color palette
• Mathematical spacing scale (4px grid)
• Smooth animations with reduced-motion support
• Subtle shadows and depth

TypeScript Support

klikui is written in TypeScript and includes full type definitions:

import type { ButtonProps, InputProps } from '@klikui/core';

const CustomButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Browser Support

• Chrome (last 2 versions)
• Firefox (last 2 versions)
• Safari (last 2 versions)
• Edge (last 2 versions)

Documentation

Full documentation and interactive examples at klikui.com

Contributing

Contributions welcome! Please read our contributing guidelines first.

License

MIT © Sami