React UI Kit Compare

Created by © Ellen Langelaar 04-2021

Framework

Components

Button

Research

App tool bar


          <PageHeader
            className="site-page-header"
            onBack={() => null}
            title="Some title"/>

Accordion

Accordion 1

Some text

Accordion 2

Accordion 3


          <Collapse defaultActiveKey={["1"]}>
            <Collapse.Panel header="Accordion 1" key="1">
              <p>Some text</p>
            </Collapse.Panel>
            <Collapse.Panel header="Accordion 2" key="2">
              <p>Some text</p>
            </Collapse.Panel>
            <Collapse.Panel header="Accordion 3" key="3">
              <p>Some text</p>
            </Collapse.Panel>
          </Collapse>

Card

Shrimp and Chorizo Paella

This impressive paella is a perfect party dish and a fun meal to cook together with your guests. Add 1 cup of frozen peas along with the mussels, if you like.

Loading content


          <Card
            title="Shrimp and Chorizo Paella"
            extra={
              <a href="#">
                <HeartFilled />
              </a>
            }
            cover={
              <img
                alt="Paella"
                src="https://material-ui.com/static/images/cards/paella.jpg"
              />
            }
            actions={[<DownOutlined />]}
          >
            <Card.Meta
              avatar={<Avatar>R</Avatar>}
              title="Shrimp and Chorizo Paella"
              description="This impressive paella is...."
            />
          </Card>

          <Card title="Loading content" hoverable loading />