Link | Park UI

Installation

npx @park-ui/cli@next add link

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 { link } from 'styled-system/recipes'

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

Integrate Recipe

Integrate this recipe in to your Panda config.

import { defineRecipe } from '@pandacss/dev'

export const link = defineRecipe({
  className: 'link',
  base: {
    alignItems: 'center',
    borderRadius: 'l1',
    cursor: 'pointer',
    display: 'inline-flex',
    focusRingColor: 'colorPalette.surface.fg',
    focusVisibleRing: 'outside',
    fontWeight: 'medium',
    gap: '1.5',
    outline: 'none',
    textDecorationThickness: 'from-font',
    textUnderlineOffset: '0.125em',
    transitionDuration: 'normal',
    transitionProperty: 'text-decoration-color',
    _icon: {
      boxSize: '1em',
    },
  },
  defaultVariants: {
    variant: 'underline',
  },
  variants: {
    variant: {
      underline: {
        textDecoration: 'underline',
        textDecorationColor: 'colorPalette.surface.fg/60',
        _hover: {
          textDecorationColor: 'colorPalette.surface.fg',
        },
      },
      plain: {
        textDecoration: 'underline',
        textDecorationColor: 'transparent',
        _hover: {
          textDecorationColor: 'colorPalette.surface.fg',
        },
      },
    },
  },
})

Usage

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

<Link href="...">Click here</Link>

Examples

Variants

Use the variant prop to change the visual style of the Link component.

Visit Park UI Visit Park UI

Within Text

Integrate links within text content while maintaining readability.

Visit the Park UI website

Icon

Add visual indicators for external links to improve user experience.

Visit Park UI

Routing Library

Use the asChild prop to compose Link with framework-specific routing components like Next.js Link.

import NextLink from 'next/link'
import { Link } from '@/components/ui'

export const App = () => {
  return (
    <Link asChild>
      <NextLink href="/about">Click here</NextLink>
    </Link>
  )
}

Props

Prop	Default	Type
`variant`	`'underline'`	`'underline' \| 'plain'`