chakra-next

A set of components to integrate with Chakra UI and Next.js

Usage

Installation

npm add @iwatakeshi/chakra-next

Components

Note: All components will automatically wrap Chakra UI's components with Next's Link when href is a relative url.

Link

import { Link } from "@iwatakeshi/chakra-next";

<Link href="/about" />;
// => <NextLink href="/about" passHref><Link /></NextLink>

Button

import { Button } from "@iwatakeshi/chakra-next";

<Button href="/about" />;
// => <NextLink href="/about" passHref><Button as="a" /></NextLink>

IconButton

import { IconButton } from "@iwatakeshi/chakra-next";

<IconButton href="/about" />;
// => <NextLink href="/about" passHref><IconButton as="a" /></NextLink>

Image

import { Image } from "@iwatakeshi/chakra-next";

<Image src="..." />;