Link
Link is used to provide a way to navigate to different pages or sections of the same page.
pnpm dlx dreamy add linkLink provides navigation between pages or sections with proper accessibility support. It can be used for both internal and external links.
<Link href="/">Home</Link>You can use the isExternal prop to open the link in a new tab.
<Link href="https://www.google.com" isExternal>
Google
</Link>In this example we'll combine React Router Link component with Dream Link component.
import { Link as DreamyLink, type LinkProps as DreamyLinkProps } from "@dreamy-ui/react";
import { Link as ReactRouterLink, type LinkProps as ReactRouterLinkProps } from "react-router";
import { forwardRef } from "react";
export interface LinkProps extends DreamyLinkProps, Omit<ReactRouterLinkProps, keyof DreamyLinkProps> {}
export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
return <DreamyLink ref={ref} as={ReactRouterLink} {...props} />;
});