Select Item...
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:

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.

Small 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.

Grid

import { Row, Col } from '@borrow-ui/ui';
First Column
Second Column
First
Second
Third
Fourth
1
2
3
4
5
6
7
8
9
10
11
12

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

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.

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

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.

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.

Accordion Group

Accordion Group limits the number of open accordions to one.
Accordion 1

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.

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.

Accordion 2

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.

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.

Accordion 3

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.

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.

Badges

import { Badge } from '@borrow-ui/ui';
BadgeBadgeSquared10Error (click)

Blocks

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

This is an outstanding block

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.

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.

This is a normal block

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.

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.

Breadcrumbs

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

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:

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';

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.

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.

Modals

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

Navbars

import { Navbar } from '@borrow-ui/ui';
String
Span
Menu
Menu + Query
v 0.0.1

Navbar Menus

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

Menu on the left

Entry 1
Second entry
This also has a description, helpful to get more context
Second Third one

Menu on the right

Clickable one
Hover to see the cursor, click to view the alert
Custom element as label
This also has a description, helpful to get more context
Custom element as description
A green description

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';

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.

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.

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
1
2

Tabs

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

First

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.

Default (Second)

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.

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.

Third

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.

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.

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';

Tooltips

import { Tooltip } from '@borrow-ui/ui';
This is a simple tooltip
If you need help, read the docs!
This is a simple tooltip, shown on the right
You must click the trigger or the message to close this tooltip!

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';
Insert your name here
Drop files here or click to select
First file.pdf×
My profile picture.jpg×
Select...

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';
Insert your name here
Drop files here or click to select
First file.pdf×
My profile picture.jpg×
Select...