Skip to content
astro-smart-linksastro-smart-links

DaisyUI Components

This page shows how to use daisyUI↗ component classes as astro-smart-links class names, so links reuse the component library’s styles. Every preview is the real output of that config (examples without an icon disable the default ↗ icon with content: null).

Section titled “Badge Links”

Render links as daisyUI badges:

Badge Links

Internal Link

About page

External Link

GitHub

Broken Link

Broken link
astro.config.mjs
import { smartLinks } from 'astro-smart-links';


smartLinks({
  internalLinkClass: 'badge badge-primary',
  externalLinkClass: 'badge badge-secondary',
  brokenLinkClass: 'badge badge-error',
  content: null,
}),
Section titled “Button Links”

Render links as daisyUI buttons:

Button Links

Internal Link

About page

External Link

GitHub

Broken Link

Broken link
astro.config.mjs
import { smartLinks } from 'astro-smart-links';


smartLinks({
  internalLinkClass: 'btn btn-primary btn-sm',
  externalLinkClass: 'btn btn-secondary btn-sm',
  brokenLinkClass: 'btn btn-error btn-sm',
  content: null,
}),
Section titled “Link Styles”

Use daisyUI’s link component classes:

Link Styles

Internal Link

About page

External Link

GitHub

Broken Link

Broken link
astro.config.mjs
import { smartLinks } from 'astro-smart-links';


smartLinks({
  internalLinkClass: 'link link-primary',
  externalLinkClass: 'link link-secondary',
  brokenLinkClass: 'link link-error',
  content: null,
}),
Section titled “Card Links”

Render the link itself as a card:

Card Links

Internal Link

About page

External Link

GitHub

Broken Link

Broken link
astro.config.mjs
import { smartLinks } from 'astro-smart-links';


smartLinks({
  internalLinkClass: 'card w-full max-w-sm bg-base-100 p-4 shadow-xl hover:shadow-2xl transition-shadow duration-300 text-primary font-semibold',
  externalLinkClass: 'card w-full max-w-sm bg-base-100 p-4 shadow-xl hover:shadow-2xl transition-shadow duration-300 text-secondary font-semibold',
  brokenLinkClass: 'card w-full max-w-sm bg-base-100 p-4 shadow-xl text-error font-semibold line-through opacity-75 cursor-not-allowed',
  content: null,
}),
Section titled “Tooltip Links”

Wrap links in daisyUI tooltips with wrapperTemplate and apply the link classes with meta.className:

Tooltip Links

Internal Link

About page

External Link

GitHub

Broken Link

Broken link
astro.config.mjs
import { smartLinks } from 'astro-smart-links';


smartLinks({
  internalLinkClass: 'link link-hover link-primary',
  externalLinkClass: 'link link-hover link-secondary',
  brokenLinkClass: 'link link-hover link-error',
  wrapperTemplate: (node, type, meta) => {
    const variants = {
      internal: { className: 'tooltip tooltip-primary', tip: 'Navigate to the about page' },
      external: { className: 'tooltip tooltip-secondary', tip: 'Opens in a new tab' },
      broken: { className: 'tooltip tooltip-error', tip: 'This link is broken' },
    };
    const { className, tip } = variants[type];


    node.properties.className = [...(node.properties.className || []), meta.className];


    return {
      type: 'element',
      tagName: 'div',
      properties: { className: [className], 'data-tip': tip },
      children: [node],
    };
  },
}),
Section titled “Theme-Aware Links”

daisyUI colors come from theme variables, so links follow the active theme:

Theme-Aware Links

Internal Link

About page

External Link

GitHub

Broken Link

Broken link
global.css
@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}
astro.config.mjs
import { smartLinks } from 'astro-smart-links';


smartLinks({
  internalLinkClass: 'link link-primary',
  externalLinkClass: 'link link-accent',
  brokenLinkClass: 'link link-error',
  content: null,
}),

Combined Components

Section titled “Combined Components”

Combine several component classes, e.g. a button with a badge:

Combined Components

Internal Link

About pageInternal

External Link

GitHubExternal

Broken Link

Broken linkMissing
astro.config.mjs
import { smartLinks } from 'astro-smart-links';
import { h } from 'hastscript';


smartLinks({
  internalLinkClass: 'btn btn-primary btn-sm gap-2',
  externalLinkClass: 'btn btn-secondary btn-sm gap-2',
  brokenLinkClass: 'btn btn-error btn-sm gap-2',
  wrapperTemplate: (node, type, meta) => {
    const labels = { internal: 'Internal', external: 'External', broken: 'Missing' };


    node.children.push(h('span', { className: 'badge badge-sm' }, labels[type]));
    node.properties.className = [...(node.properties.className || []), meta.className];


    return node;
  },
}),

Next Steps

Section titled “Next Steps”

Keep exploring: