Componentnavigation

SkipLink

Accessibility skip-link that becomes visible on keyboard focus with translate animation

Preview

Live Preview

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add skip-link

Or install the full npm package:

npm install bigbullui

Usage

import { SkipLink } from "@/components/ui/skip-link"

<SkipLink href="#main" />

Source code

skip-link.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface SkipLinkProps {
  href: string;
  children?: React.ReactNode;
}

export function SkipLink({
  href,
  children = "Skip to main content",
}: SkipLinkProps) {
  return (
    <a
      href={href}
      className={cn(
        "hidden focus:not-sr-only focus:translate-x-0 focus:transition-transform focus:ring-2 focus-visible:ring-ring",
        "mx-2 mb-2 rounded-md bg-secondary text-secondary-foreground px-3 py-1 text-[10px] uppercase tracking-[0.15em]",
        "animate-[fade-in-up_0.3s_ease-out_both]"
      )}
    >
      {children}
    </a>
  );
}

Props

Prop	Type	Description
href	string	Target anchor link
children	ReactNode	Link label text