# Special Components
Special components add a special and quick functions to your designs.
Home
/
Special Components 
import { RowFlex } from "funuicss";
import { Section } from "funuicss";
import { Hr } from "funuicss";
import { Circle } from "funuicss";
import { CircleGroup } from "funuicss";
PropDescriptionValue(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
1
2
3
PropDescriptionValue(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.
PropDescriptionValue(s)
#
Hr
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 bring all the content in the middle
PropDescriptionValue(s)
`size`Sets the width and height of the circle`Number (interpreted as rems)`
`funcss`Custom utility classes to style the circle further`String (class names)`
`bg`Sets the background color of the circle`FunUi color classes (e.g., bg-primary, bg-dark)`
`color`Sets the text color inside the circle`FunUi text color classes (e.g., text-white, text-dark)`
`children`Content to be displayed in the center of the circle`Any ReactNode (text, icon, image, etc.)`
`hoverable`Adds a hover effect when the user hovers over the circle`Boolean (true/false)`
`raised`Adds a raised shadow effect to give depth`Boolean (true/false)`
`onClick`Function to run when the circle is clicked`Function (e.g., () => { ... })`
`key`Unique key used when rendering in a list`React.Key (usually string or number)`
CircleGroup
Displays multiple Circle components overlapping like a group of avatars.
PropDescriptionValue(s)
`avatars`An array of <Circle /> elements to display`ReactElement[]`
`size`Sets the size of each circle in rem (applied to all avatars)`Number (optional, default: 2)`
`overlap`Controls how much the avatars overlap each other (in rem)`Number (optional, default: 0.8)`
`maxVisible`Limits the number of avatars shown before showing a +x more`Number (optional, default: avatars.length)`
#
Circle
Let's create some simple circles with icons in them
React / Next.js
A
B
C
+4
#
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