@crk/react-toolkit

A modern, themeable React component library with SCSS modules.

Installation

npm install @crk/react-toolkit

Setup

Import the stylesheet in your app entry point:

import '@crk/react-toolkit/index.css';

Theming

Override --crk-* CSS custom properties to customize the theme:

:root {
  --crk-color-primary: #3b82f6;
  --crk-color-danger: #ef4444;
  --crk-font-family: 'Inter', sans-serif;
}

Components

| Component | Description | | --- | --- | | Button | Variants: primary, secondary, danger, ghost. Multiple sizes. Loading states with dots, shimmer, and border animations. | | Link | Styled link with variants and external link support. | | Typography | Renders h1-h6, p, span, label. Supports weight, color, align, and truncate. | | List / ListItem | Ordered and unordered lists with configurable spacing. | | Table | Sortable columns, multi-sort with Ctrl+click, pagination, and server-side sort support. | | Dropdown | Menu dropdown with chevron indicator. Also works as a selectable form input with options, value, and onChange. | | Popover | Positioned popover anchored to a trigger element. | | Modal | Portal-based modal with Header, Body, and Footer compound components. Includes focus trap and escape/backdrop close. | | Form / FormField | Form wrapper with react-hook-form integration. | | Input | Text input with sizes, error state, and prefix/suffix slots. | | Select | Native <select> with a custom arrow indicator. | | Checkbox | Checkbox with label and indeterminate state support. | | Radio / RadioGroup | Context-based radio group. | | Textarea | Textarea with resize control. |

Hooks

| Hook | Description | | --- | --- | | useClickOutside | Detect clicks outside a ref element. | | useFocusTrap | Trap focus within a container. | | useKeyboard | Bind keyboard shortcuts. | | useTableSort | Manage table sort state (single and multi-column). |

Usage

Button

import { Button } from '@crk/react-toolkit';

<Button variant="primary" size="md" onClick={handleClick}>
  Save
</Button>

<Button variant="danger" loading loadingType="dots">
  Deleting...
</Button>

Form

import { Form, FormField, Input, Button } from '@crk/react-toolkit';
import { useForm } from 'react-hook-form';

function LoginForm() {
  const methods = useForm();

  return (
    <Form formMethods={methods} onSubmit={methods.handleSubmit(onSubmit)}>
      <FormField name="email" label="Email">
        <Input />
      </FormField>
      <FormField name="password" label="Password">
        <Input type="password" />
      </FormField>
      <Button type="submit" variant="primary">Log in</Button>
    </Form>
  );
}

Peer Dependencies

• react >= 18
• react-dom >= 18
• react-hook-form >= 7 (optional, needed for Form/FormField)

License

MIT