For AI agents: the complete documentation index is available at https://rspress.rs/llms.txt, the full documentation bundle is available at https://rspress.rs/llms-full.txt, and this page is available as Markdown at https://rspress.rs/ui/components/cdn-tabs.md.
close
Rspress
  • English

      • CdnTabs

      CdnTabs generates CDN URLs and HTML tags for CSS and JavaScript files in an npm package. It displays jsDelivr and unpkg tabs by default.

      Basic usage

      index.mdx
      import { CdnTabs } from '@rspress/core/theme';

<CdnTabs
  package="bootstrap@5"
  files={['dist/css/bootstrap.min.css', 'dist/js/bootstrap.min.js']}
/>
      jsDelivr
      unpkg
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.min.js"></script>

      The component generates a <link rel="stylesheet"> tag for each CSS file and a <script src> tag for each JavaScript file. File paths are relative to the package root.

      Choose CDNs

      Use cdns to select built-in CDNs and set their order:

      unpkg
      jsDelivr
      <link rel="stylesheet" href="https://unpkg.com/bootstrap@5/dist/css/bootstrap.min.css" />
<script src="https://unpkg.com/bootstrap@5/dist/js/bootstrap.min.js"></script>
      index.mdx
      import { CdnTabs } from '@rspress/core/theme';

<CdnTabs
  package="bootstrap@5"
  files={['dist/css/bootstrap.min.css', 'dist/js/bootstrap.min.js']}
  cdns={['unpkg', 'jsdelivr']}
/>

      All CdnTabs components use the cdn tab group, so the selected tab is synchronized across them.

      Props

      type CdnName = 'jsdelivr' | 'unpkg';

type CdnTabsProps = {
  /** Package name and version, for example `bootstrap@5`. */
  package: string;
  /** CSS and JavaScript asset paths relative to the package root. */
  files: ReadonlyArray<string>;
  /** CDNs to display, in tab order. Defaults to jsDelivr and unpkg. */
  cdns?: ReadonlyArray<CdnName>;
};