Advanced Styling
Kitchn provides a powerful set of styling capabilities that allow you to create highly customizable and responsive React components. This guide will walk you through how to use these styling features effectively and provide a detailed props reference.
Usage
Here's a simple example of how to use the styling props:
Props
Layout Props
| Name | Type | Description |
|---|---|---|
display | CSSProperties["display"] (opens in a new tab) | The display CSS property. |
width | w | CSSProperties["width"] (opens in a new tab) | keyof Gap | keyof Breakpoint | The width CSS property. |
height | h | CSSProperties["height"] (opens in a new tab) | keyof Gap | keyof Breakpoint | The height CSS property. |
minWidth | minW | CSSProperties["minWidth"] (opens in a new tab) | keyof Gap | keyof Breakpoint | The min-width CSS property. |
minHeight | minH | CSSProperties["minHeight"] (opens in a new tab) | keyof Gap | keyof Breakpoint | The min-height CSS property. |
maxWidth | maxW | CSSProperties["maxWidth"] (opens in a new tab) | keyof Gap | keyof Breakpoint | The max-width CSS property. |
maxHeight | maxH | CSSProperties["maxHeight"] (opens in a new tab) | keyof Gap | keyof Breakpoint | The max-height CSS property. |
Typography Props
| Name | Type | Description |
|---|---|---|
font | CSSProperties["fontSize"] (opens in a new tab) | keyof Size | The font-size CSS property. |
Background Props
| Name | Type | Description |
|---|---|---|
background | bg | CSSProperties["background"] (opens in a new tab) | keyof LayoutColors | The background CSS property. |
backgroundColor | bgc | CSSProperties["backgroundColor"] (opens in a new tab) | keyof LayoutColors | The background-color CSS property. |
backgroundAccent | bga | keyof AccentColors | The background CSS property. |
Border Props
Spacing Props
Positioning Props
| Name | Type | Description |
|---|---|---|
position | pos | CSSProperties["position"] (opens in a new tab) | The position CSS property. |
zIndex | zi | CSSProperties["zIndex"] (opens in a new tab) | The z-index CSS property. |
left | l | CSSProperties["left"] (opens in a new tab) | The left CSS property. |
right | r | CSSProperties["right"] (opens in a new tab) | The right CSS property. |
top | t | CSSProperties["top"] (opens in a new tab) | The top CSS property. |
bottom | b | CSSProperties["bottom"] (opens in a new tab) | The bottom CSS property. |
Interaction Props
| Name | Type | Description |
|---|---|---|
overflow | CSSProperties["overflow"] (opens in a new tab) | The overflow CSS property. |
cursor | CSSProperties["cursor"] (opens in a new tab) | The cursor CSS property. |
pointerEvents | CSSProperties["pointerEvents"] (opens in a new tab) | The pointer-events CSS property. |
userSelect | CSSProperties["userSelect"] (opens in a new tab) | The user-select CSS property. |