Components

Link

Open a URL through a native anchor.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { Link } from '@swiftuijs/ui';
export default function Example() {
    return (<Link destination="https://example.com">Visit Example</Link>);
}

Open in New Tab

Open links in a new tab:

Custom Styling

Apply custom styles to links:

Usage and limitations

  • Provide a valid destination and descriptive link content. Native anchor attributes and React children are supported.
  • For target="_blank", use an appropriate rel, such as noopener noreferrer.
  • Validate application-provided or user-generated URLs. Style with style/className; keep the destination understandable to keyboard and screen-reader users.

More examples

With Text
Open in New Tab
In HStack
In VStack
Custom Styling
Multiple Links

API reference

PropTypeRequiredDescription
destinationstring | URLYesThe destination URL for the link.
targetstringNoThe target window or frame for the link. Common values: '_blank', '_self', '_parent', '_top' Default: undefined (uses browser default)

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

LinearGradient

LinearGradient fills a view using color stops distributed along a line.

List

Group rows and sections in a list-style container.