Skip to content

install.mdx

Latest commit

 

History

History
119 lines (96 loc) · 2.95 KB

install.mdx

File metadata and controls

119 lines (96 loc) · 2.95 KB
title Installation

import { Tabs, TabItem } from '@astrojs/starlight/components';

Install Directly

```bash npm install shepherd.js --save ``` ```bash yarn add shepherd.js ``` ```bash pnpm add shepherd.js ``` ```bash bun add shepherd.js ```

styles

Don't forget to add your styles

import 'shepherd.js/dist/css/shepherd.css';

Browser Compatibility

Shepherd uses the modern CSS Anchor Positioning API for optimal performance and positioning. This provides excellent support in modern browsers:

  • Chrome 125+: Full native support
  • Safari 26+: Full native support
  • Edge 125+: Full native support
  • Firefox: Support is coming but currently requires a polyfill

Adding Polyfill for Broader Support

For applications that need to support browsers without native CSS anchor positioning (like Firefox), you can add the polyfill:

```html <script type="module"> if (!("anchorName" in document.documentElement.style)) { import("https://unpkg.com/@oddbird/css-anchor-positioning"); } </script> ``` ```bash npm install @oddbird/css-anchor-positioning ``` 
// Add to your app initialization
if (!("anchorName" in document.documentElement.style)) {
  import("@oddbird/css-anchor-positioning");
}
```bash yarn add @oddbird/css-anchor-positioning ``` 
// Add to your app initialization
if (!("anchorName" in document.documentElement.style)) {
  import("@oddbird/css-anchor-positioning");
}

Note: The polyfill adds approximately 40KB gzipped to your bundle. Most modern browsers (Chrome 125+, Safari 26+) don't need it.

GitHub Releases

Whenever we release a new version, the contents of the dist are uploaded to the release in GitHub. You can find those assets here.

jsDelivr CDN

You can use jsDelivr to pull down any release from npm. For example, you could include v10.0.1 with styles in your app with:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/shepherd.js@15.0.0/dist/js/shepherd.mjs"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/shepherd.js@15.0.0/dist/css/shepherd.css"
/>

JS Framework Wrappers

We strive to make it easy to use Shepherd in all the major frameworks, and have written wrappers to facilitate this.