React UI Kit Compare
Created by © Ellen Langelaar 04-2021
NPM downloads
Avatar
AAA
AA+2

          <Avatar>A</Avatar>
          <Avatar size="small">A</Avatar>
          <Avatar shape="square">A</Avatar>

          <Avatar.Group maxCount={2}>
            <Avatar>A</Avatar>
            <Avatar>A</Avatar>
            <Avatar>A</Avatar>
            <Avatar>A</Avatar>
          </Avatar.Group>
Badge

4

99+

          <Badge count={4}><MailOutlined /></Badge>
          <Badge count={100} overflowCount={99}><MailOutlined /></Badge>
          <Badge dot><MailOutlined /></Badge>
          <Badge status="success" count={1}><MailOutlined /></Badge>
Tag
DefaultCheckable tagChecked tagSuccess tagDelete

          <Tag>Default</Tag>
          <Tag.CheckableTag checked={false}>Checkable tag</Tag.CheckableTag>
          <Tag.CheckableTag checked={true}>Checked tag</Tag.CheckableTag>
          <Tag color="success">Success tag</Tag>
          <Tag closable color="red">Delete</Tag>
List
List title
  • Item 1
  • Item 2
  • Item 3
List footer

          <List
            header="List title"
            footer="List footer"
            bordered
            dataSource={["Item 1", "Item 2", "Item 3"]}
            renderItem={(item) => <List.Item>{item}</List.Item>}
          />
Table
Id
Name
City
1Item 1Amsterdam
2Item 2Berlin
3Item 3New York
4Item 4Tokio
5Item 5Brussels
6Item 6Barcelona

          <Table
            dataSource={tableData}
            expandable={{expandedRowRender: (row) => row.name}}
            columns={[
              {
                title: "Id",
                dataIndex: "id",
                key: "id",
                sorter: (a, b) => a.id - b.id,
                sortDirections: ["descend"],
              },
              {
                title: "Name",
                dataIndex: "name",
                key: "name",
                onFilter: (value: any, record) =>record.name.indexOf(value) === 0,
                filters: [
                  {
                    text: "Amsterdam",
                    value: "Amsterdam",
                  }
                ],
              },
              {
                title: "City",
                dataIndex: "city",
                key: "city",
              }
            ]}
            rowSelection={{type: "checkbox"}}
          />
Calendar
2025
Jun
SuMoTuWeThFrSa
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
01
02
03
04
05
06
07
08
09
10
11
12

          <Calendar />
Carousel

          <Carousel>
            <div className="red" />
            <div className="blue" />
            <div className="green" />
          </Carousel>
Comment
H
Han Solo2021-04-08

I've got a bad feeling about this..


          <Comment
            actions={[<LikeOutlined />, <DislikeOutlined />]}
            author="Han Solo"
            avatar={<Avatar>H</Avatar>}
            content={<p>I've got a bad feeling about this..</p>}
            datetime="2021-04-08"
          />
Statistic
Some statistic
112,893
Some prefixed statistic
€50.00
Some countdown
48:00:29

          <Statistic title="Some statistic" value={112893} />
          <Statistic
            prefix="€"
            title="Some prefixed statistic"
            value={50}
            precision={2}
          />
          <Statistic.Countdown
            title="Some countdown"
            value={deadline}
            format="HH:mm:ss"
          />