Link

Displays a link.

Don't have an account? Sign up 
<div class="mt-4 text-center text-sm">
  Don&apos;t have an account?
  <Link href="#">
  Sign up
  </Link>
</div>

Installation

uvx --from basic-components components add link
pipx run --spec basic-components components add link
pip install basic-components && components add link
  • Copy Link components below to your local environment
  • Place them in the components/ui/link directory in your project
  • Configure your jinja environment for JinjaX
  • Add the cn() helper function to your global jinja environment

Usage

<div class="mt-4 text-center text-sm">
  Don&apos;t have an account?
  <Link href="#">
  Sign up
  </Link>
</div>

Attributes

Prop Type Default Description
href String The url for the link.
className String Additional CSS classes for customization.

Code

{#def
    href: str = "",
    className: str = "",
#}
<a href="{{ href }}" class="hover:underline {{ className }}">{{ content }}</a>

Examples

Acme Inc
<Link
    href="#"
    className="flex items-center gap-2 text-lg font-semibold md:text-base"
>
<Package2Icon className="h-6 w-6" />
<span class="sr-only">Acme Inc</span>
</Link>