Text link
An inline link with an underline that stays visible, and a focus ring.
npx shadcn add @klarhimmel/text-linkWhen to use
Use for
Links inside running text.
Not for
Standalone calls to action. Use Button link.
Pairs with
Prose, captions, footnotes.
Preview
Cancel for free until 48 hours before arrival. Read the booking terms or ask the front desk if something is unclear.
text-link.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { TextLink } from '@/components/klarhimmel/ui/text-link';
export default function Example() {
return (
<Theme theme="brand">
<p>Read the <TextLink href="/terms">terms</TextLink> first.</p>
</Theme>
);
}Install
Import
import { TextLink } from '@/components/klarhimmel/ui/text-link';- Lands in
- components/klarhimmel/ui/text-link.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
- Render in
- Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | - | Destination, passed through safeHref. |
className | string | - | Extra classes, merged after the component's own. |