Sphinx of black quartz, judge my vow.

Installation

npx @park-ui/cli@next add heading

Add Component

Copy the code snippet below into you components folder.

import type { ComponentProps } from 'react'
import { styled } from 'styled-system/jsx'
import { type HeadingVariantProps, heading } from 'styled-system/recipes'
import type { StyledComponent } from 'styled-system/types'

type Props = HeadingVariantProps & { as?: React.ElementType }

export type HeadingProps = ComponentProps<typeof Heading>
export const Heading = styled('h2', heading) as StyledComponent<'h2', Props>

Integrate Recipe

Integrate this recipe in to your Panda config.

import { defineRecipe } from '@pandacss/dev'

export const heading = defineRecipe({
  className: 'heading',
  base: {
    fontWeight: 'semibold',
  },
})

Usage

import { Heading } from '@/components/ui'

<Heading>I'm a heading</Heading>

Examples

Sizes

Use the textStyle prop to change the size of the heading.

Ag

As another element

Use the as prop to render the heading as another HTML element.

Level 1

Level 2

Level 3

Weights

Use the fontWeight prop to change the weight of the heading component.

Sphinx of black quartz, judge my vow.

Props

Prop	Default	Type
No props to display