Welcome to the Simple React UI Kit repository! This project is designed to provide a collection of reusable UI components for React-based applications. Whether you're building a simple app or a complex web project, this UI kit offers a solid foundation to speed up your development.

StoryBook · Changelog · Report Bug · Request Feature · Contact

Table of Contents

• About of Project
  • Built With
• Installation
• Usage Components
  • Badge
  • Button
  • Checkbox
  • Container
  • Dropdown
  • Icon
  • Input
  • Message
  • MultiSelect
  • Popout
  • Skeleton
  • Spinner
  • Table
• Contributing
  • Top Contributors
• Style Variables Customization
• License
• Acknowledgments

About of Project

The Simple React UI Kit is a collection of essential UI components for building responsive web applications using React. It includes various common components like buttons, inputs, modals, and more. The main focus of this kit is simplicity and ease of use while maintaining flexibility for custom styling.

Key Features:

1. Reusable Components – Save time with prebuilt, modular UI components.
2. Customizable – Easily style components to match your design system.
3. Lightweight – Minimal dependencies and easy to integrate into any project.
4. Typescript Support – Fully typed components for TypeScript users.

Example Usage

One of the applications of this UI Kit is in the interface of a weather station. You can check out the demo here: Weather Station Demo. The source code for this project can be found in the repository: Weather Station Repository.

Built With

This project is built with modern JavaScript technologies to ensure flexibility and ease of use.

• Core languages used in frontend development.
• TypeScript extends JavaScript by adding types to the language.
• Styling the user interface.
• Continuous integration and deployment pipeline for automating tests and deployment processes.
• Code quality and security analysis.
• Delightful JavaScript Testing Framework with a focus on simplicity.

Installation

To install Simple React UI Kit, you can use npm:

npm install simple-react-ui-kit

Or if you're using Yarn:

yarn add simple-react-ui-kit

Usage

Below are examples of how to use some of the components in this UI Kit. Whether you're integrating into an existing project or starting fresh, these examples will help you get up and running.

Badge

The Badge component is a small, stylized label that can display text, an optional icon, and a remove button. It is ideal for tagging or categorizing items and includes a callback for handling removal.

Check out the full documentation and examples in Storybook: Badge Component Storybook.

Props:

• key: A unique key for identifying the badge (optional).
• label: The text content inside the badge.
• icon: An optional icon to display alongside the badge text.
• onClickRemove: A callback function to handle removal of the badge. This is triggered when the remove button is clicked.

Example Usage:

import React from 'react';
import { Badge } from 'simple-react-ui-kit';

const App = () => (
  <div>
    {/* Badge with label and icon */}
    <Badge label="New" icon="Check" />

    {/* Removable Badge */}
    <Badge label="Removable" onClickRemove={(key) => alert(`Removed: ${key}`)} />

    {/* Badge without icon */}
    <Badge label="Simple Badge" />
  </div>
);

export default App;

In this example:

• The first badge displays a label and an icon.
• The second badge includes a removal button, which triggers an alert when clicked.
• The third badge is a simple label without an icon or removal option.

For more details and live examples, check out the Storybook Documentation.

Button

The Button component is a versatile and customizable button element with multiple variants, sizes, and loading states. It can also act as a link when provided with a URL.

Check out the full documentation and examples in Storybook: Button Component Storybook.

Props:

• className: Additional class names for custom styling.
• link: If provided, the button acts as a link.
• noIndex: Prevents search engines from indexing the button when used as a link.
• stretched: If true, the button takes the full width of the container.
• loading: Shows a loading spinner instead of button content.
• size: Controls button size (small, medium).
• mode: Visual style of the button (primary, secondary, outline, link).
• variant: Variant for styling (positive, negative).
• icon: Displays an icon inside the button.
• children: React children to be displayed inside the button.
• label: Text content for the button.

Example Usage:

import React from 'react';
import { Button } from 'simple-react-ui-kit';

const App = () => (
  <div>
    {/* Primary Button */}
    <Button mode="primary" onClick={() => alert('Primary Button Clicked!')}>
      Primary Button
    </Button>

    {/* Secondary Button with Icon */}
    <Button mode="secondary" icon="check" onClick={() => alert('Secondary Button Clicked!')}>
      Secondary Button
    </Button>

    {/* Button with Loading State */}
    <Button mode="primary" loading={true}>
      Loading...
    </Button>

    {/* Link Button */}
    <Button mode="link" link="https://example.com">
      Visit Example
    </Button>
  </div>
);

export default App;

In this example:

• The first button demonstrates a simple primary button with a click handler.
• The second button showcases a secondary button with an icon.
• The third button is in a loading state with a spinner.
• The fourth button acts as a link.

For more details and live examples, check out the Storybook Documentation.

Checkbox

The Checkbox component is a customizable input element used for toggling between checked, unchecked, and indeterminate states. It includes support for labels and provides additional flexibility with its disabled and indeterminate options.

Check out the full documentation and examples in Storybook: Checkbox Component Storybook.

Props:

• label: Optional label to be displayed alongside the checkbox (can be a string or a ReactNode).
• indeterminate: If true, renders the checkbox in an indeterminate state.
• disabled: If true, disables the checkbox interaction.
• checked: Indicates whether the checkbox is checked (can be controlled via this prop).
• onChange: Function called when the checkbox state changes.
• id: Optional HTML id attribute, used to link the label with the checkbox.

Example Usage:

import React from 'react';
import { Checkbox } from 'simple-react-ui-kit';

const App = () => (
  <div>
    {/* Basic Checkbox */}
    <Checkbox label="Basic Checkbox" />

    {/* Checked Checkbox */}
    <Checkbox label="Checked Checkbox" checked={true} />

    {/* Indeterminate Checkbox */}
    <Checkbox label="Indeterminate Checkbox" indeterminate={true} />

    {/* Disabled Checkbox */}
    <Checkbox label="Disabled Checkbox" disabled={true} />

    {/* Checkbox with onChange handler */}
    <Checkbox
      label="Interactive Checkbox"
      onChange={(e) => console.log(e.target.checked)}
    />
  </div>
);

export default App;

In this example:

• The first checkbox is a basic checkbox with a label.
• The second checkbox is pre-checked using the checked prop.
• The third checkbox demonstrates the indeterminate state.
• The fourth checkbox is disabled and cannot be interacted with.
• The fifth checkbox includes an onChange handler to capture the change in its state.

For more details and live examples, check out the Storybook Documentation.

Container

The Container component is a flexible layout wrapper designed to organize and present content with optional headers, footers, and actions. It supports customizable class names and offers flexibility for displaying various sections such as a title, custom header, and footer.

Check out the full documentation and examples in Storybook: Container Component Storybook.

Props:

• className: Additional class names for custom styling.
• title: Optional title for the container, typically displayed in the header.
• action: Optional action element (button, link, etc.) displayed in the header.
• header: Custom header content, if different from the default title and action.
• children: Main content of the container.
• footer: Optional footer content, typically used for additional actions or information.

Example Usage:

import React from 'react';
import { Container } from 'simple-react-ui-kit';

const App = () => (
  <div>
    {/* Basic Container with Title */}
    <Container title="Basic Container">
      This is the main content inside the container.
    </Container>

    {/* Container with Custom Header and Footer */}
    <Container
      header={<div>Custom Header</div>}
      footer={<div>Footer Content</div>}
    >
      Content goes here...
    </Container>

    {/* Container with Action Button */}
    <Container
      title="Container with Action"
      action={<button onClick={() => alert('Action Clicked!')}>Action</button>}
    >
      This container has a button action in the header.
    </Container>

    {/* Custom Styled Container */}
    <Container className="custom-container-class">
      This container has custom styles applied.
    </Container>
  </div>
);

export default App;

In this example:

• The first container demonstrates a simple setup with a title and content.
• The second container includes a custom header and footer.
• The third container has an action button in the header.
• The fourth container shows how to apply custom styles via the className prop.

For more details and live examples, check out the Storybook Documentation.

Dropdown

The Dropdown component provides a flexible, customizable dropdown menu for selecting options. It supports various features such as custom icons, images, placeholders, error messages, and a clearable state. It also handles clicks outside the dropdown to close it automatically.

Check out the full documentation and examples in Storybook: Dropdown Component Storybook.

Props:

• className: Additional class names for custom styling.
• options: Array of dropdown options (with a key, value, and optional icon or image).
• required: Marks the dropdown as required.
• disabled: Disables the dropdown.
• clearable: Allows the dropdown to be cleared (reset to no selection).
• searchable: Allow searching within options.
• loading: Show loading spinner.
• placeholder: Placeholder text shown when no option is selected.
• notFoundCaption: Text to display in the options list if there are no options or nothing found.
• label: Label text for the dropdown.
• error: Error message shown for validation errors.
• value: Currently selected value (key) in the dropdown.
• onSelect: Callback function triggered when an option is selected.
• onSearch: Callback function triggered when a search is made.
• onOpen: Callback function triggered when the dropdown is opened.

Example Usage:

import React, { useState } from 'react';
import { Dropdown, DropdownOption } from 'simple-react-ui-kit';

const options: DropdownOption<string>[] = [
  { key: 'option1', value: 'Option 1' },
  { key: 'option2', value: 'Option 2', icon: 'Check' },
  { key: 'option3', value: 'Option 3', disabled: true }
];

const App = () => {
  const [selectedOption, setSelectedOption] = useState<string | undefined>();

  return (
    <div>
      <Dropdown
        label="Choose an option"
        options={options}
        placeholder="Select an option"
        value={selectedOption}
        onSelect={(option) => setSelectedOption(option?.key)}
        clearable
        searchable
      />
    </div>
  );
};

export default App;

In this example:

• The Dropdown is populated with three options, where one of the options is disabled.
• The selected option is stored in the selectedOption state.
• A clearable dropdown is demonstrated, allowing users to reset their selection.

For more detailed examples and live usage, check out the Storybook Documentation.

Icon

The Icon component serves as a flexible and reusable way to display various icons within your application. It allows for easy integration of SVG icons, enhancing the visual appeal and usability of your UI.

Explore the full documentation and examples in Storybook: Icon Component Storybook.

Props:

• name: A required property that specifies the name of the icon to be displayed. It should correspond to one of the predefined icon types in your application.

• className: An optional property for adding additional class names to the icon for custom styling.

• ...props: This spread operator allows you to pass any additional SVG properties (such as onClick, style, etc.) directly to the SVG element.

Example Usage:

import React from 'react';
import { Icon } from 'simple-react-ui-kit';

const App = () => {
  return (
    <div>
      <h1>My Application</h1>
      <Icon name="Home" className="icon-home" />
      <Icon name="Settings" className="icon-settings" />
      <Icon name="User" className="icon-user" />
    </div>
  );
};

export default App;

In this example:

• The Icon component is used to render icons for home, settings, and user, each with custom class names for styling.

Features:

• Customizable: The Icon component can accept additional properties that allow for further customization, such as event handlers and styling.

• Flexible Integration: Use the component anywhere in your application where an icon is needed, ensuring consistency across your UI.

• SVG Support: The component is built to render SVG icons, providing scalability and clarity in display.

Utility:

The Icon component is ideal for applications requiring a variety of icons, such as navigation bars, buttons, and informational displays. It enhances the user experience through intuitive iconography while maintaining a clean and manageable codebase.

For more detailed examples and interactive demonstrations, visit the Storybook Documentation.

Input

The Input component provides a versatile, customizable input field with optional label and error message support. It includes visual indicators for required and disabled states, allowing for enhanced form usability.

Check out the full documentation and examples in Storybook: Input Component Storybook.

Props:

• label: Optional label text displayed above the input field.
• error: Error message displayed below the input field, used for validation feedback.
• className: Additional class names for custom styling.
• required: Marks the input as required.
• disabled: Disables the input, preventing user interaction.

Additionally, the Input component accepts all standard input attributes from React.InputHTMLAttributes<HTMLInputElement>, making it flexible for various input scenarios (e.g., type, placeholder, value, etc.).

Example Usage:

import React, { useState } from 'react';
import Input from 'simple-react-ui-kit';

const App = () => {
  const [inputValue, setInputValue] = useState<string>('');
  const [error, setError] = useState<string | undefined>();

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setInputValue(value);
    setError(value.length < 3 ? 'Input must be at least 3 characters long.' : undefined);
  };

  return (
    <div>
      <Input
        label="Username"
        placeholder="Enter your username"
        value={inputValue}
        onChange={handleInputChange}
        required
        error={error}
      />
    </div>
  );
};

export default App;

In this example:

• The Input component displays a label and an error message if the input text is too short.
• The input's required attribute visually indicates that it’s a required field.
• The input value is managed with React state, and validation logic sets an error message conditionally.

For more detailed examples and live usage, check out the Storybook Documentation.

Message

The Message component is a versatile message display box that supports different visual styles (error, warning, success, and info). It is used to present messages to users, providing a title and content area, with the ability to customize the type of message displayed.

Check out the full documentation and examples in Storybook: Message Component Storybook.

Props:

• type: Defines the visual style of the message. Accepts one of the following values: 'error', 'warning', 'success', or 'info'.
• title: The title of the message that appears at the top (optional).
• children: The content inside the message box, which can be any React node (optional).

Example Usage:

import React from 'react';
import { Message } from 'simple-react-ui-kit';

const App = () => (
  <div>
    {/* Error message with title and content */}
    <Message type="error" title="Error!">
      There was an issue with your request.
    </Message>

    {/* Success message without title */}
    <Message type="success">
      Operation completed successfully!
    </Message>

    {/* Info message with custom content */}
    <Message type="info" title="Information">
      <ul>
        <li>First info item</li>
        <li>Second info item</li>
      </ul>
    </Message>
  </div>
);

export default App;

In this example:

• The first Message displays an error with a title and content.
• The second Message shows a success message without a title.
• The third Message provides information with a custom list as its content.

For more details and live examples, check out the Storybook Documentation.

MultiSelect

The MultiSelect component allows users to select multiple options from a dropdown list with customizable features such as search, loading state, and error handling. It supports adding and removing selected options, making it a great choice for forms requiring multiple selections.

Check out the full documentation and examples in Storybook: MultiSelect Component Storybook.

Props:

• options: Array of options to display in the dropdown. Each option should be an object with a key and value.
• value: Array of selected values (keys) in the dropdown.
• onSelect: Callback function triggered when an option is selected or deselected. Receives the updated list of selected options.
• onSearch: Callback function triggered when a search is made, receiving the search text.
• onOpen: Callback function triggered when the dropdown is opened.
• placeholder: Placeholder text to display in the search input field when no value is selected.
• label: Optional label text displayed above the dropdown.
• error: Optional error message displayed below the dropdown for validation feedback.
• required: Marks the dropdown as required.
• disabled: Disables the dropdown, preventing user interaction.
• loading: Indicates a loading state, displaying a spinner while data is being fetched or processed.
• notFoundCaption: Text to display in the options list if no options are found after a search.

Example Usage:

import React, { useState } from 'react';
import MultiSelect from 'simple-react-ui-kit';

const App = () => {
  const [selectedValues, setSelectedValues] = useState<string[]>([]);
  const [searchText, setSearchText] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);

  const options = [
    { key: '1', value: 'Option 1' },
    { key: '2', value: 'Option 2' },
    { key: '3', value: 'Option 3' },
    // Add more options here
  ];

  const handleSelect = (selectedOptions: { key: string; value: string }[]) => {
    setSelectedValues(selectedOptions.map(option => option.key));
  };

  const handleSearch = (text: string) => {
    setSearchText(text);
    // You can implement search logic here
  };

  return (
    <div>
      <MultiSelect
        label="Select Options"
        options={options}
        value={selectedValues}
        onSelect={handleSelect}
        onSearch={handleSearch}
        placeholder="Search options"
        loading={loading}
        required
        notFoundCaption="No options found"
      />
    </div>
  );
};

export default App;

In this example:

• The MultiSelect component displays a list of options and allows for multiple selections.
• The onSelect callback updates the selected values in state.
• The onSearch callback handles search functionality, updating the list of options based on user input.
• The component handles loading states and error messages to improve user experience.

For more detailed examples and live usage, check out the Storybook Documentation.

Popout

The Popout component is designed to create a floating container that opens and closes when triggered, often used for menus, tooltips, or additional actions. It provides a button as a trigger and offers flexible positioning for the popout content, either to the left or right of the button.

Explore the full documentation and examples in Storybook: Popout Component Storybook.

Props:

• className: Additional class names for custom styling.
• position: Position of the popout relative to the trigger element. Possible values: 'left' or 'right'.
• action: The content inside the button that triggers the popout (could be text, an icon, or a React node).
• children: The content to display inside the popout when it's open.
• closeOnChildrenClick: A boolean flag that, when set to true, closes the popout when any child inside the popout is clicked.
• onOpenChange: Callback function triggered when isOpen state changes.

Example Usage:

import React, { useRef } from 'react';
import { Popout, PopoutHandleProps } from 'simple-react-ui-kit';

const App = () => {
  const popoutRef = useRef<PopoutHandleProps>(null);

  const handleClosePopout = () => {
    if (popoutRef.current) {
      popoutRef.current.close();
    }
  };

  return (
    <div>
      <Popout
        ref={popoutRef}
        position="right"
        action="Open Popout"
        closeOnChildrenClick={true}
      >
        <div>
          <p>Popout Content</p>
          <button onClick={handleClosePopout}>Close</button>
        </div>
      </Popout>
    </div>
  );
};

export default App;

In this example:

• The Popout component is positioned to the right of the trigger button.
• The closeOnChildrenClick prop is set to true, meaning the popout will close when any of its children are clicked.
• A reference to the popout is used to manually close it via the close function.

Imperative Handle:

The Popout component provides an imperative handle with a close() method, which allows programmatic control over closing the popout.

For more detailed examples and interactive demonstrations, visit the Storybook Documentation.

Skeleton

The Skeleton component is a simple placeholder used to indicate the loading state of content, typically displayed as a gray box or shape that mimics the layout of the actual content. It helps improve user experience by showing an outline of the content while it's being loaded.

Explore the full documentation and examples in Storybook: Skeleton Component Storybook.

Props:

• className: Additional class names for custom styling. You can use this prop to apply different styles or layouts to match the skeleton to the shape and size of the content it represents.
• ...props: This component also accepts all standard HTMLDivElement attributes, allowing you to customize it further (e.g., setting width, height, etc.).

Example Usage:

import React from 'react';
import { Skeleton } from 'simple-react-ui-kit';

const App = () => {
  return (
    <div>
      <h1>Loading Content</h1>
      <Skeleton style={{ width: '100%', height: '200px' }} />
    </div>
  );
};

export default App;

In this example:

• The Skeleton component is used as a placeholder for a large block of content that is still loading.
• Inline styles define the skeleton's width and height, making it flexible for different layouts and components.

Customization:

You can apply additional CSS classes via the className prop to further style the skeleton. The skeleton automatically fills the space of its parent, making it suitable for a variety of content-loading placeholders such as text, images, and buttons.

Utility:

• The skeleton is commonly used in list views, card layouts, or media-heavy sections where content loading might take longer.
• It provides a smooth transition once the content is loaded, enhancing user experience.

For more detailed examples and interactive demonstrations, visit the Storybook Documentation.

Spinner

The Spinner component is a loading indicator represented as a rotating circle or animation. It visually communicates to users that a process is ongoing, enhancing the user experience during loading states or asynchronous operations.

Explore the full documentation and examples in Storybook: Spinner Component Storybook.

Props:

• className: Additional class names for custom styling. Use this prop to apply different styles or sizes to the spinner.
• ...props: The spinner component accepts all standard SVGSVGElement attributes, allowing for further customization, such as setting dimensions or color.

Example Usage:

import React from 'react';
import { Spinner } from 'simple-react-ui-kit';

const App = () => {
  return (
    <div>
      <h1>Loading...</h1>
      <Spinner className="custom-spinner" width={50} height={50} />
    </div>
  );
};

export default App;

In this example:

• The Spinner component is used as a loading indicator while content is being fetched.
• Additional properties like width and height can be set to control the spinner's size, while the className prop allows for custom styling.

Customization:

You can customize the appearance of the spinner by adding a className for your CSS styles. The spinner's fill colors and sizes can also be adjusted using inline styles or CSS classes.

Utility:

• The spinner is an essential component in any application that requires user feedback during loading processes, such as data fetching or processing tasks.
• It provides a clear visual cue, helping to reduce user frustration and confusion during wait times.

For more detailed examples and interactive demonstrations, visit the Storybook Documentation.

Table

The Table component is a versatile data representation tool designed for displaying tabular data with support for sorting, loading states, and custom formatting. It enhances data visibility and interaction, making it ideal for applications requiring organized data presentation.

Explore the full documentation and examples in Storybook: Table Component Storybook.

Props:

• data: An optional array of data objects to be displayed in the table. Each object corresponds to a row in the table.

• defaultSort: An optional configuration object for default sorting behavior. It defines the key and direction (ascending or descending) for initial sorting.

• className: Additional class names for custom styling, allowing you to integrate your CSS styles.

• height: Specifies the table height in pixels or allows auto height if set to null.

• columns: An array defining the column configurations, including header content, accessor keys, sortability, and custom formatters.

• loading: A boolean that indicates whether the table is in a loading state. When true, skeleton placeholders are displayed instead of data.

• stickyHeader: A boolean that, when set to true, keeps the table header fixed at the top during scrolling.

• verticalBorder: A boolean to control the visibility of vertical borders between columns for improved readability.

Example Usage:

import React from 'react';
import { Table } from 'simple-react-ui-kit';

const App = () => {
  const data = [
    { id: 1, name: 'Item 1', price: 100 },
    { id: 2, name: 'Item 2', price: 200 },
  ];

  const columns = [
    { header: 'ID', accessor: 'id', isSortable: true },
    { header: 'Name', accessor: 'name', isSortable: true },
    { header: 'Price', accessor: 'price', isSortable: true, formatter: (value) => `$${value}` },
  ];

  return (
    <Table
      data={data}
      columns={columns}
      defaultSort={{ key: 'name', direction: 'asc' }}
      loading={false}
      stickyHeader
    />
  );
};

export default App;

In this example:

• The Table component displays a simple dataset with sortable columns.
• The formatter prop formats the price column to display currency.
• The loading prop is set to false, so the actual data is shown instead of skeletons.

Features:

• Sorting: Clickable column headers enable sorting by ascending or descending order based on the column's data type.

• Loading State: The component displays skeleton loaders while data is being fetched, improving user experience during asynchronous operations.

• Custom Formatting: Each column can have a custom formatter function, allowing for dynamic presentation of data.

Utility:

The Table component is perfect for displaying structured data in applications like dashboards, reports, or data management systems. It allows users to sort and view data effectively, enhancing usability and engagement.

For more detailed examples and interactive demonstrations, visit the Storybook Documentation.

Style Variables Customization

Style Customization and Theming

The components in this UI Kit are designed to be highly customizable, allowing you to easily override the default style variables to match your project's design or create custom themes. All the style variables are defined in the :root and can be overridden in your CSS by redeclaring them.

Available CSS Variables:

Here is a list of all the CSS variables you can override to customize the look and feel of the components:

• Primary Colors:

  • --color-contrast: Contrast color (typically used for text on colored backgrounds).
  • --color-green: Default green color.
  • --color-green-hover: Hover state for green color.
  • --color-green-active: Active state for green color.
  • --color-green-background: Background green color (for success input, message etc.).
  • --color-orange: Default orange color.
  • --color-orange-hover: Hover state for orange color.
  • --color-orange-active: Active state for orange color.
  • --color-orange-background: Background orange color (for warning input, message etc.).
  • --color-red: Default red color.
  • --color-red-hover: Hover state for red color.
  • --color-red-active: Active state for red color.
  • --color-red-background: Background red color (for error input, message etc.).
  • --color-main: Main base color, used for buttons, links, checkbox icons.
  • --color-main-hover: Hover state for main color.
  • --color-main-active: Active state for main color.
  • --color-main-background: Background main color (for info input, message etc.).

• Text and Typography:

  • --font-size: Default font size.
  • --font-size-small: Font size for smaller text.
  • --font-family: Global font family.
  • --text-color-primary: Main text color.
  • --text-color-secondary: Secondary text color.
  • --text-color-secondary-hover: Secondary text color on hover.

• Layout and Containers:

  • --body-background: Background color for the body.
  • --border-radius: Global border radius for components.
  • --container-shadow: Shadow effect for containers.
  • --container-background-color: Default background color for containers.
  • --container-error-background-color: Background color for containers in error state.
  • --container-error-color: Text color for error containers.
  • --container-success-background-color: Background color for containers in success state.
  • --container-success-color: Text color for success containers.

• Input Fields and Dropdowns:

  • --dropdown-background-color: Background color for dropdowns.
  • --dropdown-background-color-hover: Hover state for dropdown background.
  • --input-background-color: Background color for input fields.
  • --input-label-color: Color for input labels.
  • --input-border-color: Border color for input fields.
  • --input-border: Full border styling for inputs.

• Buttons:

  • --button-font-weight: Font weight for buttons.
  • --button-default-color: Default text color for buttons.
  • --button-default-background: Default background color for buttons.
  • --button-default-background-hover: Hover background color for buttons.
  • --button-default-background-active: Active background color for buttons.
  • --button-primary-color: Text color for primary buttons.
  • --button-primary-background: Background color for primary buttons.
  • --button-primary-background-hover: Hover state for primary buttons.
  • --button-primary-background-active: Active state for primary buttons.
  • --button-secondary-color: Text color for secondary buttons.
  • --button-secondary-background: Background color for secondary buttons.
  • --button-secondary-background-hover: Hover state for secondary buttons.
  • --button-secondary-background-active: Active state for secondary buttons.

• Popouts:

  • --popout-shadow: Shadow effect for popouts and modals.

• Tables:

  • --table-font-size: Font size for table content.
  • --table-header-background: Background color for table headers.
  • --table-header-background-hover: Hover state for table headers.
  • --table-border-color: Border color for tables.

• Skeleton:

  • --skeleton-background-animation: Background gradient for content loading animation.

Example: Overriding Variables for Custom Themes

To customize the theme, simply override the default values in your stylesheet:

:root {
    /* Primary Colors */
    --color-contrast: #ffffff;

    --color-green: #4bb34b;
    --color-green-hover: #48AC4A;
    --color-green-active: #45A64A;
    --color-green-background: #e5ffe5; /* For dark: #2E3E2B */

    --color-orange: #F8A01C;
    --color-orange-hover: #EE9A1D;
    --color-orange-active: #E4941F;
    --color-orange-background: #fff2db; /* For dark: #5e5443 */

    --color-red: #e64646;
    --color-red-hover: #DD4446;
    --color-red-active: #D44245;
    --color-red-background: #ffdddd; /* For dark: #522e2e */

    --color-main: #2688eb;
    --color-main-hover: #2483e4;
    --color-main-active: #237edd;
    --color-main-background: #d6eaff; /* For dark: #3c4957 */

    /* Text and Typography */
    --font-size: 14px;
    --font-size-small: 13px;
    --font-family: -apple-system, system-ui, 'Helvetica Neue', Roboto, sans-serif;
    --text-color-primary: rgba(0, 0, 0, 0.9);
    --text-color-secondary: #818c99;
    --text-color-secondary-hover: #939CA9;

    /* Layout and Containers */
    --body-background: #ebedf0;
    --border-radius: 4px;
    --container-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
    --container-background-color: #ffffff;
    --container-error-background-color: #FFE9E9;
    --container-error-color: var(--color-red);
    --container-success-background-color: #E8F9E8;
    --container-success-color: var(--color-green);

    /* Input Fields and Dropdowns */
    --dropdown-background-color: #ffffff;
    --dropdown-background-color-hover: #f2f3f5;
    --dropdown-badge-background-color: #ffffff;
    --input-background-color: #f2f3f5;
    --input-label-color: #6d7885;
    --input-border: 0.5px solid var(--input-border-color);
    --input-border-color: #cbcccd;
    --input-border-focus-color: var(--color-main);

    /* Buttons */
    --button-font-weight: 500;
    --button-default-color: var(--color-main);
    --button-default-background: transparent;
    --button-default-background-hover: #f7f8fa;
    --button-default-background-active: #f1f2f5;

    --button-primary-color: #ffffff;
    --button-primary-background: var(--color-main);
    --button-primary-background-hover: var(--color-main-hover);
    --button-primary-background-active: var(--color-main-active);

    --button-secondary-background: rgba(235,242,250,.99);
    --button-secondary-background-hover: rgba(223,234,246,.99);
    --button-secondary-background-active: rgba(213,226,241,.99);
    --button-secondary-color: var(--color-main);
    --button-secondary-color-hover: var(--color-main-hover);
    --button-secondary-color-active: var(--color-main-active);

    /* Popout */
    --popout-shadow: 0 0 2px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.08);

    /* Table */
    --table-font-size: var(--font-size-small);
    --table-header-background: #f2f3f5;
    --table-header-background-hover: rgba(255, 255, 255, 0.1);
    --table-border-color: var(--input-border-color);

    /* Skeleton */
    --skeleton-background-animation: linear-gradient( 90deg, transparent, rgba(0, 0, 0, 0.04), transparent );
}

Contributing

Contributions are what make the open-source community such an incredible resource for developers. Any contributions you make are greatly appreciated!

To contribute:

1. Fork the project.
2. Create your feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a pull request.

For more detailed contributing guidelines, see CONTRIBUTING.md.

Releasing a new version

If your contribution is ready to be released after the pull request is merged into the main branch, follow these steps:

1. After your pull request is merged, run the command yarn changeset to begin the release process.

2. Select the type of changes (major, minor, patch) and enter a detailed description of the changes.

3. This will create a markdown file in the .changeset directory describing the changes.

   Important: If you don't proceed with the next command, the release will be postponed.

4. To trigger the release process after the merge into main, run the command yarn changeversion. This will:

   • Update the version number in the package.json.
   • Update the CHANGELOG.md with the list of changes.

Once this is done, merging this branch into main will automatically publish a new release.

Top contributors

License

This project is distributed under the MIT License. See LICENSE for more information.

Acknowledgments

Here are a few resources that helped inspire or were invaluable during the development of this project:

1. GutHub Readme Template
2. React Documentation
3. Styled Components
4. Jest Testing Framework

Contact

Misha - miksoft.pro