boiko-react-ui-kit v0.1.8

Vchasno UI-Kit for React (Dont use this package, it's not ready yet)

📦 Install

npm install vchasno-ui

yarn add vchasno-ui

🔨 Usage

Supports React ^16.8.0 || ^17.0.0 || ^18.0.0

import React from 'react';
import { Button } from 'vchasno-ui';

const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
  </>
);

Optionally you can import styles (use all or only what you need)

Suggestions:

• import reset styles
• import base styles
• import theme variables (will apply base theme)
• create your own theme variables override file (override only what you need)

// index.tsx
import "vchasno-ui/dist/css/_reset.css"; // optional reset styles
import "vchasno-ui/dist/css/_base.css"; // optional base styles
import "vchasno-ui/dist/css/_theme.css"; // optional theme variables
import "src/styles/_theme-override.css"; // yuor own css file with theme variables override

Styling and customization

vchasno-ui is using global styles with prefix vchasno-ui-

To customize styles you can use CSS variables and override them

/* theme-override.css */
:root {
  --transition-duration-sec: 0.5s; // default 0.3s
}

... or more specific styles

/* button-override.css */
:global(.vchasno-ui-button.--sm) {
  padding: 0 20px; // default 0 15px
}

TypeScript

vchasno-ui is written in TypeScript with complete definitions

🌍 Internationalization

Supports only Ukrainian language

🔗 Links

• Home page

Development

Install dependencies

npm install

Run storybook

Create new component in src/components folder and add it to src/components/index.ts

Create new story in src/stories folder and add it to src/stories/index.tsx

npm run storybook

Build storybook

npm run build-storybook

Build

npm run build