Installation - Shepherd

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

:::note[License Information] Shepherd.js is free for open source and non-commercial use under AGPL-3.0. Commercial projects require a commercial license. Learn more about licensing → :::

Install Directly

<Tabs> <TabItem label="npm"> ```bash npm install shepherd.js --save ``` </TabItem> <TabItem label="yarn"> ```bash yarn add shepherd.js ``` </TabItem> <TabItem label="pnpm"> ```bash pnpm add shepherd.js ``` </TabItem> <TabItem label="bun"> ```bash bun add shepherd.js ``` </TabItem> </Tabs>

styles

Don't forget to add your styles

javascript

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

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:

html

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/shepherd.mjs"
></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/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.