Link

Styled anchor elements for inline text links, navigation, and external references.

Default

Standard link styles with color and underline variants.

html
Default link Muted link No underline Bold link 
<a href="#" class="uc-link">Default link</a>
<a href="#" class="uc-link uc-link-muted">Muted link</a>
<a href="#" class="uc-link uc-link-external">External <svg>...</svg></a>

With Icons

Links with trailing or leading icons.

html
External link Learn more View document Download file 
<a href="#" class="uc-link">Default link</a>
<a href="#" class="uc-link uc-link-muted">Muted link</a>
<a href="#" class="uc-link uc-link-external">External <svg>...</svg></a>

Inline

Links within text content.

html

Welcome to uicraft. Read our documentation for more details on how to get started with the component library.

By signing up, you agree to our Terms of Service and Privacy Policy.

This project is maintained by the uicraft team. Contributions are welcome on GitHub . 

<p>Read our <a href="#" class="uc-link">documentation</a> for more details.</p>

Navigation Links

Vertical and horizontal link lists for navigation.

html 
<nav class="uc-flex uc-flex-col uc-gap-1">
  <a href="#" class="uc-nav-link uc-active">Overview</a>
  <a href="#" class="uc-nav-link">Components</a>
  <a href="#" class="uc-nav-link">Utilities</a>
</nav>

Link Card

Card-style links for feature highlights or resource lists.

html
Documentation
Get started with uicraft
Download
Get the latest release
 
<a href="#" class="uc-link">Default link</a>
<a href="#" class="uc-link uc-link-muted">Muted link</a>
<a href="#" class="uc-link uc-link-external">External <svg>...</svg></a>

API Reference

All CSS classes available for the Link component.

Class Type Description
uc-text-accents-blue Color Default blue link color
uc-underline uc-underline-offset-2 Decoration Underline with offset for readability
uc-decoration-accents-blue/30 Decoration Semi-transparent underline color — becomes solid on hover
uc-text-fg-secondary Color Muted link color for secondary links
uc-text-fg-primary uc-font-medium Color Bold link style for emphasis
uc-inline-flex uc-items-center uc-gap-1 Layout Inline flex layout for icon links
uc-hover:text-accents-blue/80 State Hover color fade for plain links
uc-transition-colors Effect Smooth color transition on hover

Accessibility

Keyboard and screen reader support.

Feature Details
Semantics Use a element for navigation, button for actions
External External links should indicate they open in a new tab via aria-label or visible text
Focus Visible focus ring via :focus-visible for keyboard navigation
Descriptive Link text should describe the destination — avoid "Click here" or "Read more"