SHAKTI
Base
Shakti comes with base augmentation props that can be applied to all components in the library. The props include basic functionality, such as margin, padding, and coloring. They are designed to facilitate rapid prototyping and development.
Display
Control the displayed state of an element.
| Prop | Type | Notes |
|---|---|---|
| shown | boolean | show element (display block) |
| hidden | boolean | hide element (display none) |
Dimension
Set the dimensions (width and height) of an element. Pixels are used as the unit if a number is specified. If a string is specified, it is assumed that a unit (e.g. vh) is passed in.
| Prop | Type | Notes |
|---|---|---|
| minWidth | number or string | minimum width |
| width | number or string | width |
| maxWidth | number or string | maximum width |
| minHeight | number or string | minimum height |
| height | number or string | height |
| maxHeight | number or string | maximum height |
Margin
Modify the margin of an element. Pixels are used as the unit if a number is specified. If a string is specified, it is assumed that a unit (e.g. em) is passed in.
📌 Note: the shorthand properties in parentheses can also be used.
| Prop | Type | Notes |
|---|---|---|
| margin (m) | number or string | margin (all cardinal directions) |
| marginX (mx) | number or string | margin along x-axis |
| marginY (my) | number or string | margin along y-axis |
| marginTop (mt) | number or string | top margin |
| marginRight (mr) | number or string | right margin |
| marginBottom (mb) | number or string | bottom margin |
| marginLeft (ml) | number or string | left margin |
Padding
Modify the padding of an element. Pixels are used as the unit if a number is specified. If a string is specified, it is assumed that a unit (e.g. em) is passed in.
📌 Note: the shorthand properties in parentheses can also be used.
| Prop | Type | Notes |
|---|---|---|
| padding (p) | number or string | padding (all cardinal directions) |
| paddingX (px) | number or string | padding along x-axis |
| paddingY (py) | number or string | padding along y-axis |
| paddingTop (pt) | number or string | top padding |
| paddingRight (pr) | number or string | right padding |
| paddingBottom (pb) | number or string | bottom padding |
| paddingLeft (pl) | number or string | left padding |
Text Alignment
Align the text within an element.
| Prop | Type | Notes |
|---|---|---|
| textStart | boolean | align text to start |
| textEnd | boolean | align text to end |
| textLeft | boolean | align text to left |
| textCenter | boolean | align text to center |
| textRight | boolean | align text to right |
| textJustify | boolean | justify text |
Color
Modify the base colors of an element.
| Prop | Type | Notes |
|---|---|---|
| color | string | color |
| bgColor | string | background color |
Border
Add and customize a border for an element. If a number is passed into a prop that accepts a number, pixels are used as the unit.
| Prop | Type | Notes |
|---|---|---|
| border | string | full border specification |
| borderWidth | number or string | border width |
| borderStyle | string | border style |
| borderColor | string | border color |
| borderRadius | number or string | border radius |
| borderTop | number or string | top border |
| borderRight | number or string | right border |
| borderBottom | number or string | bottom border |
| borderLeft | number or string | left border |
Shadow
Add a shadow to an element.
| Prop | Type | Notes |
|---|---|---|
| boxShadow | string | box shadow |
| textShadow | string | text shadow |