Usage

<Link href="https://park-ui.com">Park UI</Link>

Examples

With an Icon

Park UI

<Link href="https://park-ui.com">
  Park UI <ExternalLinkIcon />
</Link>

As another element

The asChild property allows you to embed framework-specific link components, such as the one provided by Next.js, within your styled Link component, as shown below:

<Link asChild>
  <NextLink href="/about">About</NextLink>
</Link>

<Flex direction="column">
  <Link textStyle="xs">Ag</Link>
  <Link textStyle="sm">Ag</Link>
  <Link textStyle="md">Ag</Link>
  <Link textStyle="lg">Ag</Link>
  <Link textStyle="xl">Ag</Link>
  <Link textStyle="2xl">Ag</Link>
  <Link textStyle="3xl">Ag</Link>
  <Link textStyle="4xl">Ag</Link>
  <Link textStyle="5xl">Ag</Link>
  <Link textStyle="6xl">Ag</Link>
  <Link textStyle="7xl">Ag</Link>
</Flex>

Font Weight

Use the fontWeight prop to set the font weight.

Park UI Park UI Park UI Park UI Park UI

<Flex direction="column">
  <Link fontWeight="light">Park UI</Link>
  <Link fontWeight="normal">Park UI</Link>
  <Link fontWeight="medium">Park UI</Link>
  <Link fontWeight="semibold">Park UI</Link>
  <Link fontWeight="bold">Park UI</Link>
</Flex>

Installation

npx @park-ui/cli components add link

1

Styled Primitive

Copy the code snippet below into ~/components/ui/primitives/link.tsx

import { ark } from '@ark-ui/react/factory'
import { styled } from 'styled-system/jsx'
import { link } from 'styled-system/recipes'
import type { ComponentProps } from 'styled-system/types'

export type LinkProps = ComponentProps<typeof Link>
export const Link = styled(ark.a, link)

import { ark } from '@ark-ui/solid'
import type { ComponentProps } from 'solid-js'
import { styled } from 'styled-system/jsx'
import { link } from 'styled-system/recipes'

export type LinkProps = ComponentProps<typeof Link>
export const Link = styled(ark.a, link)

No snippet found

Extend ~/components/ui/primitives/index.ts with the following line:

export { Link, type LinkProps } from './link'

2

Integrate Recipe

If you're not using @park-ui/preset, add the following recipe to yourpanda.config.ts:

import { defineRecipe } from '@pandacss/dev'

export const link = defineRecipe({
  className: 'link',
  base: {
    alignItems: 'center',
    color: 'fg.default',
    colorPalette: 'accent',
    cursor: 'pointer',
    display: 'inline-flex',
    fontWeight: 'medium',
    gap: '2',
    textDecoration: 'underline 0.1em transparent',
    textUnderlineOffset: '0.125em',
    transitionDuration: 'normal',
    transitionProperty: 'text-decoration-color',
    transitionTimingFunction: 'default',
    _hover: {
      textDecorationColor: 'colorPalette.default',
    },
    '& svg': {
      width: '1em',
      height: '1em',
    },
  },
})

Make it yours