Link

Link is used to provide a way to navigate to different pages or sections of the same page.

Source
Theme Source
  • Link - The Link component.
import { Link } from "@dreamy-ui/react/rsc";
<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 Remix (react-router) Link component with Dream Link component.

import { Link as DreamLink, type LinkProps as DreamLinkProps } from "@dreamy-ui/react";
import { Link as RemixLink, type LinkProps as RemixLinkProps } from "@remix-run/react";
import { forwardRef } from "react";
 
export interface LinkProps extends DreamLinkProps, Omit<RemixLinkProps, keyof DreamLinkProps> {}
 
export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
    return <DreamLink ref={ref} as={RemixLink} {...props} />;
});
 
Link.displayName = "Link";