Install

 npm i icar-design-system --save

Usage

In your _app.js, import the component from icar-design-system and wrap the entire app:

import { ConfigProvider } from "icar-design-system";

function MyApp({ Component, pageProps }) {
  return (
    <ConfigProvider>
      <Component {...pageProps} />
    </ConfigProvider>
  );
}

Importing Components

import { Button, Input, Select, Checkbox, Radio, Switch, DatePicker, TimePicker, Upload, Modal, Message, Notification,
  Popover, Tooltip, Table, Form, FormItem, Row, Col, Icon, Tag, Badge, Progress, Spin, Alert, Card, Collapse, Panel,
  Steps, Step, Breadcrumb, BreadcrumbItem, Pagination, Menu, MenuItem, SubMenu, MenuItemGroup, Tabs, TabPane, Dropdown,
  DropdownItem, DropdownMenu, PageHeader, Divider, Avatar, BackTop, Affix, Anchor, AnchorLink, Drawer, Carousel,
  Cascader, Transfer, Tree, TreeSelect, AutoComplete, Rate, Slider, InputNumber, Image, Popconfirm, Result, Skeleton,
  Empty, ConfigProvider } from "icar-design-system";

Viewing Components

npm run storybook

Import o used less variables

Install LESS and less-loader

npm install less less-loader --save-dev

In your next.config.js, add:

const path = require('path');

module.exports = {
  webpack(config) {
    // Set up an alias for the styles directory
    config.resolve.alias['~icar-design-system-styles'] = path.resolve(__dirname, 'node_modules/icar-design-system/dist/styles');

    return config;
  },
};

You can now import the styles into your LESS files:

@import '~icar-design-system-styles/colors.less';
@import '~icar-design-system-styles/utilities.less';
@import '~icar-design-system-styles/breakpoints.less';
@import '~icar-design-system-styles/fonts.less';