myk-library

A modern React component library with TypeScript support, featuring form components with multiple variants, sizes, and full accessibility support.

Documentation

📚 View Full Documentation & Examples

Features

• 🎨 5 Production-Ready Components - Button, Input, Select, Checkbox, and Radio
• 🎯 Multiple Variants - Outlined, Filled, and Standard styles
• 📏 Three Sizes - Small, Medium, and Large options
• ♿ Fully Accessible - ARIA compliant with keyboard navigation
• 💪 TypeScript Support - Complete type definitions included
• 🎭 Styled Components - Built with styled-components for easy theming
• 📦 Tree Shakeable - ESM and CommonJS builds included
• ✅ Thoroughly Tested - 221 comprehensive tests

Installation

npm install myk-library styled-components

Peer Dependencies:

• react ^18.0.0 || ^19.0.0
• react-dom ^18.0.0 || ^19.0.0
• styled-components ^6.0.0

Quick Start

import { Button, Input, Select, Checkbox, Radio } from 'myk-library';
import { ThemeProvider } from 'styled-components';
import { defaultTheme } from 'myk-library/dist/theme/defaultTheme';

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <div>
        <Button variant="primary" size="md">
          Click Me
        </Button>

        <Input
          label="Email"
          variant="outlined"
          placeholder="Enter your email"
        />

        <Select label="Country" variant="outlined">
          <option value="us">United States</option>
          <option value="uk">United Kingdom</option>
        </Select>

        <Checkbox label="I agree to terms" />

        <Radio name="option" label="Option 1" />
      </div>
    </ThemeProvider>
  );
}

Components

Button

Multi-variant button component with loading states and icon support.

Variants: primary | secondary | outline | ghost | destructive Sizes: xs | sm | md | lg | xl

<Button variant="primary" size="md" loading>
  Submit
</Button>

Input

Text input with label, helper text, and error states.

Variants: outlined | filled | standard Sizes: sm | md | lg

<Input
  label="Email"
  variant="outlined"
  error="Please enter a valid email"
  required
/>

Select

Dropdown select with custom styling and option groups.

Variants: outlined | filled | standard Sizes: sm | md | lg

<Select label="Country" variant="outlined">
  <optgroup label="North America">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </optgroup>
</Select>

Checkbox

Checkbox with indeterminate state support.

Sizes: sm | md | lg

<Checkbox
  label="Select all"
  indeterminate
  required
/>

Radio

Radio button for single-choice selections.

Sizes: sm | md | lg

<Radio
  name="option"
  label="Option 1"
  value="1"
/>

Theming

All components use the theme from styled-components. You can customize the theme or use the default:

import { ThemeProvider } from 'styled-components';
import { defaultTheme } from 'myk-library/dist/theme/defaultTheme';

// Use default theme
<ThemeProvider theme={defaultTheme}>
  <App />
</ThemeProvider>

// Or customize
const customTheme = {
  ...defaultTheme,
  colors: {
    ...defaultTheme.colors,
    primary: {
      ...defaultTheme.colors.primary,
      500: '#your-color'
    }
  }
};

Common Props

All form components share these common props:

• size - Component size (sm | md | lg)
• disabled - Disable the component
• required - Mark as required with asterisk
• label - Label text
• helperText - Helper text below component
• error - Error message (sets error state)
• fullWidth - Take full width of container (Input, Select)
• className - Additional CSS class

Accessibility

All components are built with accessibility in mind:

• ✅ Proper ARIA attributes
• ✅ Keyboard navigation support
• ✅ Screen reader friendly
• ✅ Focus management
• ✅ Required field indicators

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

TypeScript

Full TypeScript support with complete type definitions:

import { ButtonProps, InputProps, SelectProps } from 'myk-library';

License

MIT

Repository

https://github.com/dorin-gim/myk-library

Issues

Found a bug or have a feature request? Please open an issue: https://github.com/dorin-gim/myk-library/issues