Before use Avatar, you need to import:

import { Switch } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

Stores badge

When To Use

Badge for going to the corresponding market page

To trigger an operation.

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

To trigger an operation.

A variety of the Button component. Used for going to the social network page or to log in to the site through the social network

Group a series of buttons together on a single line with the button group.

Before use Tabs, you need to import:

import { Button, ButtonGroup  } from 'react-bootstrap'

And import stylesheets manually:

import 'bootstrap/dist/css/bootstrap.min.css';

Component for graphic data represending. Before use Rate, you have to import:

import { Bar, Lines, Pie } from 'react-chartjs-2'

And import plugin (label customizing):

import 'chartjs-plugin-datalabels'

And import plugin (assigning a unique id while component mounting):

import { v4 as uuidv4 } from 'uuid'

Checkbox component. Before use Checkbox, you need to import :

import { Checkbox } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted.

A content area which can be collapsed and expanded. Before use Collapse, you need to import

import { Collapse } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

When To Use#

• Can be used to group or hide complex regions to keep the page clean.

• Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.

A basic widget for getting the user input is a text field.

Before use CustomInput, you need to import:

import { Form, InputGroup  } from 'react-bootstrap'

And import stylesheets manually:

import 'bootstrap/dist/css/bootstrap.min.css'; // or 'antd/dist/antd.less'

When To Use

• A user input in a form field is needed.

• A search input is required.

A divider line separates different content.

When To Use

• Divide sections of article.

• Divide inline text and links such as the operation column of table.

Area or container

Area or container. Usually used with the Icons component as an area in which an icon can be placed.

Vector icons

When To Use

Icon library includes 62 vector images

Enter a number within certain range with the mouse.

When To Use

When a numeric value needs to be provided.

Simple List. Before use List, you need to import :

import { List } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css';

When To Use

A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

Add dialogs to your site for lightboxes, user notifications, or completely custom content.

Before use Modal, you need to import:

import { Modal } from 'react-bootstrap'

And import stylesheets manually:

import 'bootstrap/dist/css/bootstrap.min.css';

Links are grouped in a list for easy navigation. Before use NavList, you have to import:

import { Nav, NavItem, NavLink  } from 'react-bootstrap'

And import stylesheets manually:

import 'bootstrap/dist/css/bootstrap.min.css';

When To Use

Sections and Categories navigating

Play button

When To Use

Most commonly used as a trigger for the popup appearance on the page

Rate component. Before use Rate, you need to import :

import { Rate } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css';

When To Use

• Show evaluation.

• A quick rating operation on something.

Select component to select value from options.

For displaying choices - an elegant alternative to the native select element.

Before use Select, you need to import:

import { Select } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

A search input element

Before use Search, you need to import :

import { Search } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css';

Small numerical value or status descriptor for UI elements.

When To Use#

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Variety of the SimpleBadge component

When To Use

To show the rating or grade of an item

Socials

Container for social networks displaying. Works with Frame and Icons components

Simple List. Before use Slider, you need to import :

import { Swiper } from 'swiper'

And import stylesheets manually:

import 'swiper/css/swiper.min.css';

//app.js 

import React,{Component} from 'react'
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
import classes from './app.module.css' //considers app.css in the same dir


class App extends Component{
componentDidMount(){
this.swiper=new Swiper(`.${classes.swiperContainer}`,{...})
  //add necessary parameters required by checking the offical docs of swiper
}
render(){
    return(
        <div className=`swiper-container ${classes.swiperContainer}`>
            <div className=`swiper-wrapper ${classes.swiperWrapper}`>
                <div className=`swiper-slide ${swiperSlide}`>Slide 1</div>
                <div className=`swiper-slide ${swiperSlide}`>Slide 1</div>
                <div className=`swiper-slide ${swiperSlide}`>Slide 1</div>
                <div className=`swiper-slide ${swiperSlide}`>Slide 1</div>
            </div>
        </div>
  )
}
}

//app.module.css 

.swiperContainer {
  width: 100%;
  height: 100%;
  /*this gives the dimension of slider container*/
  /*these values will make the container as big as the parent div*/
  overflow: hidden;
  /*important parameter to not disrupt the container when slides increases in coverflow and other effect*/
}

.swiperSlide {
  width:300px;
  height:300px;
  /*this one holds the dimension of each slides and can be changed according to the user wish*/
}

.swiperWrapper {}

Switching Selector. Before use Switch, you need to import:

import { Switch } from 'antd'

And import stylesheets manually:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

When To Use#

• If you need to represent the switching between two states or on-off state.

• The difference between Switch and Checkbox is that Switch will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, which should work in conjunction with submit operation.

When To Use#

• For managing too many closeable views.

• For functional aspects of a page.

An element consisting of icon and text description.

Used in conjunction with Frame and Icon components

When To Use#

TreeSelect is similar to Select, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control.

Examples