Link is used to provide a way to navigate to different pages or sections of the same page.
Link
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.
isExternal
<Link href="https://www.google.com" isExternal> Google </Link>
In this example we'll combine Remix (react-router) Link component with Dream Link component.
react-router
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";