Components
Hacker news
Account
Sample One
Sample One

Custom UI

Here are some custom UI elements to use in your applications.

Text

Sized Large
Sized text with font-weight
Colored Text
Styled Text
Customized Text
Regular Text
Sliced text that cuts after the value is spec...
Text
Sized Large

Sized Icon

Colored Icon

Styled Text
Dual Icons

Dual Sized Icon

Trailing only Icon
IconText

My name is Kingsley, and this is a random string to showcase the <Par/> component. In this component, can adjust all the attributes of the text, like in the <Text/> component, as well as set the line height, and wrap behaviour.

Par
These
are
divided
Texts
These
are
Custom
divided
Texts
These
are

Divided

widgets
DividedText


Buttons and Clickables

Animation Direction

With Icon

Button States

Button
Icon Button
Colored and no Highlight
With border
With shadow
Sized
With styled border
Filled
ClickableIcon
This is a
text Button
.
This is a
bold text Button
.
This is a
colored text button
.
This is a
styled text button
.
TextButton

Drop downs

Basic dropdown

Yhis is the hidden item triggered by the dropdown view.

You can place any DOM element here.
Hover dropdown

Yhis is the hidden item triggered by the dropdown view.

You can place any DOM element here.
With backdrop dropdown

Yhis is the hidden item triggered by the dropdown view.

You can place any DOM element here.

Directions

Bottom Left

Yhis is the hidden item triggered by the dropdown view.

You can place any DOM element here.
Bottom Right

Yhis is the hidden item triggered by the dropdown view.

You can place any DOM element here.

Top Light

Yhis is the hidden item triggered by the dropdown view.

You can place any DOM element here.
Top Right

Yhis is the hidden item triggered by the dropdown view.

You can place any DOM element here.

Match Width

Yhis is the hidden item triggered by the dropdown view.

You can place any DOM element here.
DropDownView
Basic drop option
Option 1
Option 2
Option 3
Hover drop option
Option 1
Option 2
Option 3
With success and danger options
Success Option
Danger Option
With styled options
Option 1
Option 3
Option 3
With styled and overriden options
Option 1
Option 3
Option 3
DropOptions

Navigation

Item 1
Item 2
Item 3
Edge Button
Ribbon Section
Item 1
Item 2
Item 3
Edge Button
Item 1
Item 2
Item 3
Edge Button
Item 1
Item 2
Item 3
Edge Button
Item 1
Item 2
Item 3
Edge Button
Header