# Helpers
Reduce coding stress and increase your Production speed.
Home
/ Helpers
Classes
You can use any of the values on the funcss prop to style your component. you can also use them in your className prop to apply our CSS styles.
You can use any of the values on the funcss prop to style your component. you can also use them in your className prop to apply our CSS styles.
| Name | discription | Values |
|---|---|---|
| Outline Color | Apply outline color using `outline-{color}`. Replace `{color}` with desired color name, e.g., `outline-blue`. | outline-color |
| Top Margin | Apply margin to the top side using `mt-{value}`. Supports the same spacing scale as general margin. | mt-0 | mt-1 | mt-2 | mt-3 | mt-4 | mt-5 | mt-6 | mt-8 | mt-10 | mt-12 | mt-16 | mt-20 |
| Right Margin | Apply margin to the right side using `mr-{value}`. | mr-0 | mr-1 | mr-2 | mr-3 | mr-4 | mr-5 | mr-6 | mr-8 | mr-10 | mr-12 | mr-16 | mr-20 |
| Bottom Margin | Apply margin to the bottom side using `mb-{value}`. | mb-0 | mb-1 | mb-2 | mb-3 | mb-4 | mb-5 | mb-6 | mb-8 | mb-10 | mb-12 | mb-16 | mb-20 |
| Left Margin | Apply margin to the left side using `ml-{value}`. | ml-0 | ml-1 | ml-2 | ml-3 | ml-4 | ml-5 | ml-6 | ml-8 | ml-10 | ml-12 | ml-16 | ml-20 |
| Negative Margins | Apply negative margins with a trailing dash, e.g., `mt-10-` for -2.5rem top margin. | mt-0- | mt-1- | mt-2- | mt-3- | mt-4- | mt-5- | mt-6- | mt-8- | mt-10- | mt-12- | mt-16- | mt-20- |
| General Padding | Apply padding to all sides equally using `p-{value}`. Values correspond to CSS spacing variables. | p-0 | p-1 | p-2 | p-3 | p-4 | p-5 | p-6 | p-8 | p-10 | p-12 | p-16 | p-20 |
| Top Padding | Apply padding to the top side using `pt-{value}`. | pt-0 | pt-1 | pt-2 | pt-3 | pt-4 | pt-5 | pt-6 | pt-8 | pt-10 | pt-12 | pt-16 | pt-20 |
| Right Padding | Apply padding to the right side using `pr-{value}`. | pr-0 | pr-1 | pr-2 | pr-3 | pr-4 | pr-5 | pr-6 | pr-8 | pr-10 | pr-12 | pr-16 | pr-20 |
| Bottom Padding | Apply padding to the bottom side using `pb-{value}`. | pb-0 | pb-1 | pb-2 | pb-3 | pb-4 | pb-5 | pb-6 | pb-8 | pb-10 | pb-12 | pb-16 | pb-20 |
| Left Padding | Apply padding to the left side using `pl-{value}`. | pl-0 | pl-1 | pl-2 | pl-3 | pl-4 | pl-5 | pl-6 | pl-8 | pl-10 | pl-12 | pl-16 | pl-20 |
| Fixed Width | Set specific width using utility classes like `w-100`, `w-400` (values are in px or rem depending on system) | w-{value} |
| Fixed Height | Set specific height using utility classes like `h-100`, `h-400` (values are in px or rem depending on system) | h-{value} |
| Width Percentages | Set element width using percentages with utilities like `width-50-p`, `width-100-p` | width-{percentage}-p |
| Height Percentages | Set element height using percentages with utilities like `height-50-p`, `height-100-p` | height-{percentage}-p |
| Min/Max Width & Height (Viewport) | Use `min-w-vw`, `max-w-vw`, `min-h-vh`, or `max-h-vh` to control sizing with respect to viewport | min-w-vw | max-w-vw | min-h-vh | max-h-vh |
| Plain Border | Eliminate border radius from elements with default rounded corners | flat |
| Invisible Background | Generate a see-through background | transparent |
| Glass Effect | Create a glass-like background appearance | glassy |
| Hover Border | Create a border around the element when the user hovers on it. | hoverable-border |
| Elevated Card | Apply a raised effect to the box shadow of an element | raised |
| Pointing Cursor | Alter cursor to a pointing hand | cursor-pointer,cursor-copy,cursor-none,cursor-move |
| Text Alignment | Adjust text alignment | text-left , text-right , text-center |
| Hovering Shadow | Produce a shadow effect on hover | hover-shadow |
| Left-side Border | Create a border on the left side | vr |
| Bottom-side Border | Create a border at the bottom | hr |
| Simple Border | Add a basic border | border |
| Layer Ordering | Arrange layers, values range from 1 to 10 | z-index-value |
| Transparency | Adjust opacity, values range from 1 to 10 | opacity-value |
| Darkening | Apply a dark background effect, values range from 1 to 10 | darken-value |
| Hover Opacity Adjustment | Adjust opacity on hover, values range from 1 to 10 | hover-opacity-value |
| Fixed Positioning at Top | Fix element position at the top | fixed-top or fixedTop |
| Fixed Positioning at Bottom | Fix element position at the bottom | fixedBottom |
| Sticky Top Element | Create a sticky element at the top | sticky-top |
| Margin Addition | Add a margin of 0.5rem | margin |
| Padding Addition | Add a padding of 0.5rem | padding |
| Top Border | Create a border at the top | bt |
| Right Border | Create a border at the right | br |
| Border Curvature | Apply a border radius to all edges of your element | roundEdge | roundEdgeSmall | roundEdgeMax |
| Curved Left Edge | Apply a border radius to the left side of the element | leftEdge |
| Curved Right Edge | Apply a border radius to the right side of the element | rightEdge |
| Curved Top Edge | Apply a border radius to the top of the element | topEdge |
| Curved Bottom Edge | Apply a border radius to the bottom of the element | bottomEdge |
| Shadow Removal | Eliminate shadow from components with a shadow effect | shadowless |
