Skip to main content

Link

Components​

Styling and link behaviour
Styling​

Due to the CSS reset used by Tailwind, one cannot assume links will be styled like you expect them to. Use a component from this For this and other reasons, Link components exist.

Withing a single-page application (SPA) --- like Docusaurus or NextJS and so on --- there is often a Link component provided by the framework that provides client-side routing so that clicking a link does not completely reload the page/application.

You can pass such a component in some of FreeSewing components to use it for links rather than a traditional <a> tag.

The Link component family provides the following components:

An anchor link component

You can import the AnchorLink component from the link component family in the @freesewing/react package:

Javascript
import { AnchorLink } from "@freesewing/react/components/Link"

A link styled as a card

You can import the CardLink component from the link component family in the @freesewing/react package:

Javascript
import { CardLink } from "@freesewing/react/components/Link"

A regular link component

You can import the Link component from the link component family in the @freesewing/react package:

Javascript
import { Link } from "@freesewing/react/components/Link"

A regular link, but intended to be used on a success background

You can import the SuccessLink component from the link component family in the @freesewing/react package:

Javascript
import { SuccessLink } from "@freesewing/react/components/Link"