@moysklad/uikit

Installation

Before installing the package, please make sure that react and react-dom are already installed in your project.

Install the package using npm:

npm install @moysklad/uikit

Usage

To enable UIKit styles, please import CSS variables once in your React app entry point:

import '@moysklad/uikit/colorVariables.css';

You can then start using UIKit components in your application:

import React from 'react';
import ReactDOM from 'react-dom';

import '@moysklad/uikit/colorVariables.css';

import {
  Button,
  ButtonSize,
  ButtonVariants,
  Check20Icon,
} from '@moysklad/uikit';

import { App } from './App';

ReactDOM.render(
  <App>
    <Button
      isIconButton
      size={ButtonSize.L}
      variant={ButtonVariants.SECONDARY}
      onClick={() => {
        console.log('click');
      }}
    >
      <Check20Icon />
    </Button>
  </App>,
  document.getElementById('root')
);

Available components

• AutoComplete
• Badge
• Banner
• BodyL
• BodyText
• BodyTextStrong
• BodyXL
• BottomSheet
• Breadcrumbs
• Button
• Caption
• Carousel
• Checkbox
• Chip
• Counter
• Datepicker
• Dot
• Dropdown
• EditableTitle
• EmptyState
• EmptyStateLarge
• FieldRow
• FileUploader
• H1
• H2
• H3
• H4
• Header
• Help
• Hint
• HStack
• ImagePreview
• Indicator
• Info
• Input
• InputClear
• InputUnit
• Label
• LabelValue
• LabelValueDate
• LabelValueInput
• LabelValueSelect
• LabelValueTextfield
• Link
• Listing
• MentionsTextfield
• Modal
• Multiselect
• OverlayActions
• Pagination
• Progressbar
• Quantity
• Radiobutton
• SearchInput
• SegmentButton
• Select
• SideMenu
• SideMenuItem
• SideMenuTitle
• Sidepage
• Skeleton
• Snackbar
• Spinner
• Switch
• Tabs
• Text
• Textfield
• Toggle
• Tooltip
• Typography
• VerticalTab
• VStack