Select Item...

Components showcase

In this page you can find a quick demonstration of the available components.

Each component description and documentation is available on the respective docs page, created with Storybook.

Typography

A set of components to organize the pages and texts.

Here you can find borrow-ui typography showcase.

Dependencies:

flexboxgrid 2: CSS library to create flexible layouts

Titles and Subtitles

import { Title, Subtitle } from '@borrow-ui/ui';

Title (default h1)

With a subtitle

Title h2

With a subtitle

Title h3

With a subtitle

Title h4

With a subtitle

Title h5

With a subtitle

Texts

import { Text, Monospace } from '@borrow-ui/ui';

text in monospace

Normal text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis egestas semper leo ac porta. Integer metus urna, lacinia vitae purus et, pharetra auctor purus. Vivamus bibendum id lacus sit amet faucibus.

Big text:

Small text:

Grid

import { Row, Col } from '@borrow-ui/ui';

First Column

Second Column

First

Second

Third

Fourth

Components

Components are the main building blocks of a UI. For a UI Kit, they should be easy to extend and their style easy to customize/override (depending on the styling strategy).

Here you can find borrow-ui components showcase.

Dependencies:

Material Design Icons DX: icon set
Popper JS: positioning engine
lodash.debounce: debounce utility
Prism JS: syntax highlighter
react-media: media queries in React

Accordions

import { Accordion, AccordionGroup } from '@borrow-ui/ui';

I am an accordion

Etiam tortor orci, varius at massa ut, tristique suscipit lorem. Nullam vel metus ex. Morbi vitae mauris volutpat erat commodo ultricies at ac magna. Cras condimentum id magna vitae blandit. Vestibulum auctor, magna porta sollicitudin egestas, elit quam interdum massa, consequat sollicitudin dui felis nec massa. Nullam aliquet velit eget metus placerat tempus. Duis eu dapibus elit, et luctus odio. In velit lorem, sagittis eu sapien in, varius varius ipsum. Nunc tempor rhoncus aliquam. Nulla facilisis lobortis vulputate. Etiam sodales enim sit amet auctor suscipit. Mauris eget augue magna. Pellentesque id magna lectus.

I am initially open

Accordion Group

Accordion Group limits the number of open accordions to one.

Accordion 1

Accordion 2

Accordion 3

Badges

import { Badge } from '@borrow-ui/ui';

BadgeBadgeSquared10Error (click)

Blocks

import { Block } from '@borrow-ui/ui';

This is an outstanding block

This is a normal block

Breadcrumbs

import { Breadcrumbs } from '@borrow-ui/ui';

Home

Section

Page

Title after breadcrumbs

Buttons

import { Button } from '@borrow-ui/ui';

Reverse

Styles

Sizes

Cards

import { Card } from '@borrow-ui/ui';

Card sample

Subtitle goes here

Card can have content, called description, as well as title and subtitle. Check the hover!

Controls Content

Success!

The operation was successfull.

Your pipeline run successfully. A message that you can later remove or keep visible. Flat without hover and shadow.

Icons

import { Icon, IconControl } from '@borrow-ui/ui';

Icons can be loaded from different families, have different sizes and a special "control" style:

Material Design Icons DX

Fontawesome

Sizes

Control Icons

Links

import { Link } from '@borrow-ui/ui';

All the links of this website are using Link component!

Loaders

import { Loader } from '@borrow-ui/ui';

Can be between

text

Lorem

import { Lorem } from '@borrow-ui/ui';

Modals

import { Modal } from '@borrow-ui/ui';

Navbars

import { Navbar } from '@borrow-ui/ui';

Navbar Menus

import { NavbarMenu } from '@borrow-ui/ui';

Panels

import { Modal } from '@borrow-ui/ui';

Reference Overlays

import { ReferenceOverlay } from '@borrow-ui/ui';

Component used to create overlays (like tooltips) using popperjs

This is a simple text

If you need help, read the docs!

This should be shown on the right

You must click the trigger or this message to close me!

Sidebars

import { Sidebar } from '@borrow-ui/ui';

Tables

import { Table } from '@borrow-ui/ui';

ID	Country	Population (M)	Subregion
1	Russia	145.934	Eastern Europe
2	Germany	83.783	Western Europe
3	UK	67.886	Northern Europe
4	France	65.273	Western Europe
5	Italy	60.461	Southern Europe

Showing items 1-5 out of 9

Tabs

import { Tabs } from '@borrow-ui/ui';

First

Default (Second)

Third

Sed sed odio sapien. Aliquam feugiat nisi eget enim porttitor tristique. Aliquam faucibus gravida eros sit amet euismod. Etiam at dolor ac ipsum sagittis venenatis et quis dui. Praesent eros diam, maximus quis tellus ut, sodales vestibulum dui. Phasellus a ipsum ex. Ut sit amet aliquam ligula, et pharetra diam. Nam id enim nisi. Pellentesque eget efficitur leo. Praesent vel nibh augue. Vestibulum et magna quam. Fusce id auctor libero, sed cursus sem. Phasellus maximus eleifend erat. Proin sollicitudin, tellus non consectetur maximus, lectus est tincidunt arcu, ornare pharetra ex mauris in tortor.

Tile Links

import { TileLink } from '@borrow-ui/ui';

Local

Files on this device

Cloud

Your shared data

Today

What happens today

Groups

Manage available user groups

Your Profile

Change your profile data

Tooltips

import { Tooltip } from '@borrow-ui/ui';

Forms

Forms are fundamental in any UI that should be supposed to get data form the users.

Here you can find borrow-ui forms showcase.

Dependencies:

Day.js: dates manipulation
react-day-picker: date picker component
react-dropzone: files upload component
React Select: Select Input control

Horizontal Layout Form

import { Checkbox, DatePicker, Dropzone, HField, Input, Textarea, Toggle, ReactSelect } from '@borrow-ui/ui';

Name *

Insert your name here

Last Name

Age *

Address

Self description *

Upload resume *

Drop files here or click to select

First file.pdf×

My profile picture.jpg×

Age range

Select...

Optional

Some Date

Vertical Layout Form

Components can be imported directly from the main index file but also grouped with the Forms object, and extracted with destructuring, i.e.const { Checkbox } = Forms;

import { Forms } from '@borrow-ui/ui';

Name *

Insert your name here

Last Name

Age *

Address

Self description

Upload resume *

Drop files here or click to select

First file.pdf×

My profile picture.jpg×

Age range

Select...

Optional

Some Date

Components showcase

Typography

Titles and Subtitles

Title (default h1)

Title h2

Title h3

Title h4

Title h5

Texts

Grid

Components

Accordions

Accordion Group

Badges

Blocks

This is an outstanding block

This is a normal block

Breadcrumbs

Title after breadcrumbs

Buttons

Reverse

Styles

Sizes

Cards

Icons

Links

Loaders

Lorem

Modals

Navbars

Navbar Menus

Menu on the left

Menu on the right

Panels

Reference Overlays

Sidebars

Tables

Tabs

First

Default (Second)

Third

Tile Links

Local

Cloud

Today

Groups

Your Profile

Tooltips

Forms

Horizontal Layout Form

Vertical Layout Form

borrow-ui

Demos

Project