Centered Content
Installation
npx @park-ui/cli add absolute-center1
Add Component
Copy the code snippet below into you components folder.
import { ark } from '@ark-ui/react/factory'
import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { absoluteCenter } from 'styled-system/recipes'
export type AbsoluteCenterProps = ComponentProps<typeof AbsoluteCenter>
export const AbsoluteCenter = styled(ark.div, absoluteCenter)
2
Integrate Recipe
Integrate this recipe in to your Panda config.
import { defineRecipe } from '@pandacss/dev'
export const absoluteCenter = defineRecipe({
className: 'absolute-center',
base: {
position: 'absolute',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
defaultVariants: {
axis: 'both',
},
variants: {
axis: {
horizontal: {
insetStart: '50%',
translate: '-50%',
_rtl: {
translate: '50%',
},
},
vertical: {
top: '50%',
translate: '0 -50%',
},
both: {
insetStart: '50%',
top: '50%',
translate: '-50% -50%',
_rtl: {
translate: '50% -50%',
},
},
},
},
})
Usage
import { AbsoluteCenter } from '@/components/ui'
<AbsoluteCenter>Content</AbsoluteCenter>
Props
| Prop | Default | Type |
|---|---|---|
axis | 'both' | 'horizontal' | 'vertical' | 'both' |