Heading
For headings and subheadings.
Usage
import { Heading } from '~/components/ui/heading'Examples
As another element
The Heading component renders as an h2 element by default. Use the as property to specify a different HTML tag.
Level 1
Level 2
Level 3
<>
<Heading as="h1">Level 1</Heading>
<Heading as="h2">Level 2</Heading>
<Heading as="h3">Level 3</Heading>
</>Font Size
Use size or textStyle for text size. It makes line height and spacing smaller as text size grows and also ensures
text size is even for better layout.
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
Ag
<>
<Heading size="xs">Ag</Heading>
<Heading size="sm">Ag</Heading>
<Heading size="md">Ag</Heading>
<Heading size="lg">Ag</Heading>
<Heading size="xl">Ag</Heading>
<Heading size="2xl">Ag</Heading>
<Heading size="3xl">Ag</Heading>
<Heading size="4xl">Ag</Heading>
<Heading size="5xl">Ag</Heading>
<Heading size="6xl">Ag</Heading>
<Heading size="7xl">Ag</Heading>
</>Font Weight
Use the fontWeight prop to set the text weight.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
Sphinx of black quartz, judge my vow.
<>
<Heading fontWeight="light">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="normal">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="medium">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="semibold">Sphinx of black quartz, judge my vow.</Heading>
<Heading fontWeight="bold">Sphinx of black quartz, judge my vow.</Heading>
</>Installation
Insert code snippet into your project. Update import paths as needed.
npx @park-ui/cli components add heading1
Add Styled Primitive
Copy the code snippet below into ~/components/ui/styled/heading.tsx
import { styled } from 'styled-system/jsx'
import { type TextVariantProps, text } from 'styled-system/recipes'
import type { ComponentProps, StyledComponent } from 'styled-system/types'
type TextProps = TextVariantProps & { as?: React.ElementType }
export type HeadingProps = ComponentProps<typeof Heading>
export const Heading = styled('h2', text, {
defaultProps: { variant: 'heading' },
}) as StyledComponent<'h2', TextProps>
import type { ComponentProps } from 'solid-js'
import { styled } from 'styled-system/jsx'
import { type TextVariantProps, text } from 'styled-system/recipes'
import type { StyledComponent } from 'styled-system/types'
type TextProps = TextVariantProps & { as?: React.ElementType }
export type HeadingProps = ComponentProps<typeof Heading>
export const Heading = styled('h2', text, {
defaultProps: { variant: 'heading' },
}) as StyledComponent<'h2', TextProps>
No snippet found2
Add Re-Export
To improve the developer experience, re-export the styled primitives in~/components/ui/heading.tsx.
export { Heading, type HeadingProps } from './styled/heading'
export { Heading, type HeadingProps } from './styled/heading'
3
Integrate Recipe
If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:
Not yet available