Skip Link

Import the global Brick stylesheet once:

import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/skip-link.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Import from the package root or focused subpath:

import { SkipLink } from "@flowstack-ui/brick";
import { SkipLink } from "@flowstack-ui/brick/skip-link";

The focused subpath also exports SkipLinkRoot, SkipLinkTarget, SkipLinkRootProps, and SkipLinkTargetProps for direct named composition.

import { SkipLink } from "@flowstack-ui/brick/skip-link";

export function ApplicationShell() {
  return (
    <>
      <SkipLink.Root>Skip to main content</SkipLink.Root>
      <header>{/* repeated navigation */}</header>
      <SkipLink.Target>
        <h1>Workspace</h1>
        {/* primary page content */}
      </SkipLink.Target>
    </>
  );
}

The defaults pair href="#main-content" with id="main-content".

Skip Link intentionally has one visual recipe and no size, tone, shape, position, or motion props.

• Unfocused Root is fixed and translated beyond the viewport while remaining keyboard focusable.
• Focused Root appears immediately on an elevated neutral surface with accent border, readable body typography, shadow, and strong focus ring.
• Hover and active paint apply only while the link remains focused.
• Target receives Brick identity but no component layout or paint.
• Light and dark appearance scopes substitute semantic tokens.
• Forced colors use system text, surface, link, and highlight colors.

Custom destination

<SkipLink.Root href="#release-review">Skip release navigation</SkipLink.Root>
<nav aria-label="Release">{/* repeated destinations */}</nav>
<SkipLink.Target id="release-review">
  <h1>Release review</h1>
</SkipLink.Target>

Native-only fragment navigation

<SkipLink.Root href="#content" focusTarget={false}>
  Skip navigation
</SkipLink.Root>
<SkipLink.Target id="content">Primary content</SkipLink.Target>

The revealed link uses logical insets, a bounded viewport-relative maximum width, wrapping text, and no transition. Long localized labels remain inside narrow viewports and the position mirrors in RTL. Applications should test the real sticky header, browser chrome, safe-area policy, and supported 400% zoom layout; Brick does not guess a page-specific scroll offset for Target.