Special Components

# Special Components

Special components add a special and quick functions to your designs.

RowFlex

This component is used to create a row and display it's children in a row form

Prop	Description	Value(s)
`justify`	To justify your content	`CSS justify values`
`alignItems`	To align your items	`CSS align-items values`
`gap`	Set a gapa between element	`Css gap values`
`responsiveSmall`	Remove flex for small screens	`Boolean`
`responsiveMedium`	Remove flex from medium screens down	`Boolean`

Display with RowFlex

We will try to display the elements in a row form with the RowFlex

React / Next.js

Section

To create a margin of 0.8rem for top and 0.5rem for bottom

Prop	Description	Value(s)
`gap`	specify the margin	`Number`

Section

Let's divide each section from the other with a margin

React / Next.js

Section 1

The loader is good to keeps the user engaging while waiting for something. for example a user logining in.

Section 2

The loader is good to keeps the user engaging while waiting for something. for example a user logining in.

To create a horizontal line

Prop	Description	Value(s)

Let's divide each section from the other with a line

React / Next.js

Section 1

The loader is good to keeps the user engaging while waiting for something. for example a user logining in.

Section 2

The loader is good to keeps the user engaging while waiting for something. for example a user logining in.

Circle

To create a circular element and brings all the content in the middle

Prop	Description	Value(s)
`size`	To set the width and height of your circle	`CSS mesurement values`
`hoverable`	To add a hoverable effect	`Boolean`
`bg`	To set the backgroung color of your circle	`FunUi Colors`

Circle

Let's create some simple circles with icons in them

React / Next.js

FullCenteredPage

The <FullCenteredPage></FullCenteredPage> expand to fill your full screen and brings it's content to the center

React / Next.js

Content at the middle