VaneUI

Documentation

GitHub

Getting Started

Core Concepts Installation Usage Basics

Basic Components

Button Badge Chip Checkbox Label Code Divider Input

Layout Components

Section Container Row Col Stack Card Grid3 Grid4 Grid5 Grid6

Typography Components

Text Title PageTitle SectionTitle Link List ListItem

Customization

Theming Overview Using ThemeProvider Theme & ThemeOverride ThemeDefaults ExtraClasses CSS Variables

Typography Components

Link

Renders an accessible and themeable anchor link for navigation. Use this to direct users to other pages or external websites.

Basic Link

Default link styling.

This is a Basic Link

BasicLink.tsx

<Link href="#">This is a Basic Link</Link>

Link Sizes

Links come in different sizes such as xs, sm, md, lg, xl.

Link xs Link sm Link md Link lg Link xl

LinkSizes.tsx

<Row flexWrap>
  <Link href="#" xs>Link xs</Link>
  <Link href="#" sm>Link sm</Link>
  <Link href="#" md>Link md</Link>
  <Link href="#" lg>Link lg</Link>
  <Link href="#" xl>Link xl</Link>
</Row>

Link Font Weights

Links support different font weights.

Link thin Link extralight Link light Link normal Link medium Link semibold Link bold Link extrabold Link black

LinkFontWeights.tsx

<Row flexWrap>
  <Link href="#" thin>Link thin</Link>
  <Link extralight href="#">Link extralight</Link>
  <Link href="#" light>Link light</Link>
  <Link href="#" normal>Link normal</Link>
  <Link href="#" medium>Link medium</Link>
  <Link href="#" semibold>Link semibold</Link>
  <Link bold href="#">Link bold</Link>
  <Link extrabold href="#">Link extrabold</Link>
  <Link black href="#">Link black</Link>
</Row>

Link Appearances

Links can have different color appearances.

Link default Link accent Link primary Link secondary Link tertiary Link success Link danger Link warning Link info Link link

LinkAppearances.tsx

<Row flexWrap>
  <Link default href="#">Link default</Link>
  <Link accent href="#">Link accent</Link>
  <Link href="#" primary>Link primary</Link>
  <Link href="#" secondary>Link secondary</Link>
  <Link href="#" tertiary>Link tertiary</Link>
  <Link href="#" success>Link success</Link>
  <Link danger href="#">Link danger</Link>
  <Link href="#" warning>Link warning</Link>
  <Link href="#" info>Link info</Link>
  <Link href="#" link>Link link</Link>
</Row>

Link Font Families

Links support different font families.

Link sans Link serif Link mono

LinkFontFamilies.tsx

<Row flexWrap>
  <Link href="#" sans>Link sans</Link>
  <Link href="#" serif>Link serif</Link>
  <Link href="#" mono>Link mono</Link>
</Row>

Link Text Decorations

Links support different text decorations.

Link underline Link lineThrough Link noUnderline Link overline

LinkTextDecorations.tsx

<Row flexWrap>
  <Link href="#" underline>Link underline</Link>
  <Link href="#" lineThrough>Link lineThrough</Link>
  <Link href="#" noUnderline>Link noUnderline</Link>
  <Link href="#" overline>Link overline</Link>
</Row>

Link Font Styles

Links support different font styles.

Link italic Link notItalic

LinkFontStyles.tsx

<Row flexWrap>
  <Link href="#" italic>Link italic</Link>
  <Link href="#" notItalic>Link notItalic</Link>
</Row>

Link Transformations

Links support different case transformations.

Link uppercase Link lowercase Link capitalize Link normalCase

LinkTransformations.tsx

<Row flexWrap>
  <Link href="#" uppercase>Link uppercase</Link>
  <Link href="#" lowercase>Link lowercase</Link>
  <Link capitalize href="#">Link capitalize</Link>
  <Link href="#" normalCase>Link normalCase</Link>
</Row>

Link Alignment

Links can be aligned differently.

Left Aligned Center Aligned Right Aligned

LinkAlignment.tsx

<Col className="border-2 border-dashed border-gray-300 p-4 min-w-80">
  <Link className="w-full" href="#" textLeft>Left Aligned</Link>
  <Link className="w-full" href="#" textCenter>Center Aligned</Link>
  <Link className="w-full" href="#" textRight>Right Aligned</Link>
</Col>

Link Combinations

Combining multiple link properties.

Large Bold Primary Link Small Italic Secondary Link Medium Semibold Success Underlined Link Extra Small Light Uppercase Link Extra Large Extra Bold Danger Centered Link

LinkCombinations.tsx

<Col>
  <Link bold href="#" lg primary>Large Bold Primary Link</Link>
  <Link href="#" italic secondary sm>Small Italic Secondary Link</Link>
  <Link href="#" md semibold success underline>Medium Semibold Success Underlined Link</Link>
  <Link href="#" light uppercase xs>Extra Small Light Uppercase Link</Link>
  <Link danger extrabold href="#" textCenter xl>Extra Large Extra Bold Danger Centered Link</Link>
</Col>