https://github.com/janosh/svelte-zoo

Random assortment of docs-related Svelte components
https://github.com/janosh/svelte-zoo

component-library svelte sveltekit

Last synced: 11 days ago
JSON representation

Random assortment of docs-related Svelte components

• Host: GitHub
• URL: https://github.com/janosh/svelte-zoo
• Owner: janosh
• License: mit
• Created: 2022-01-09T12:33:02.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-07T16:34:24.000Z (about 1 month ago)
• Last Synced: 2024-10-12T15:56:52.856Z (26 days ago)
• Topics: component-library, svelte, sveltekit
• Language: TypeScript
• Homepage: https://janosh.github.io/svelte-zoo
• Size: 220 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        


  

  
 Svelte Zoo





[![Tests](https://github.com/janosh/svelte-zoo/actions/workflows/test.yml/badge.svg)](https://github.com/janosh/svelte-zoo/actions/workflows/test.yml)

[![GitHub Pages](https://github.com/janosh/svelte-zoo/actions/workflows/gh-pages.yml/badge.svg)](https://github.com/janosh/svelte-zoo/actions/workflows/gh-pages.yml)

[![pre-commit.ci status](https://results.pre-commit.ci/badge/github/janosh/svelte-zoo/main.svg)](https://results.pre-commit.ci/latest/github/janosh/svelte-zoo/main)

[![NPM version](https://img.shields.io/npm/v/svelte-zoo?color=blue&logo=NPM)](https://npmjs.com/package/svelte-zoo)



Random assortment of Svelte components for building doc sites.



[Live demo](https://janosh.github.io/svelte-zoo)



## 🔨   Installation

```sh

npm install --dev svelte-zoo

```

## 📙   Usage

More docs to come...

```svelte

  import {

    CircleSpinner, // animated rotating circle to indicate content is loading

    CodeExample, // to be used with mdsvexamples, syntax-highlights Svelte code and renders it

    CodeLinks, // link code fences to Svelte REPL, GitHub or StackBlitz for interactive sandboxing

    Confetti, // let confetti emoji rain across the screen to playfully show some event was triggered

    CopyButton, // add to code fences to allow copying its contents

    FileDetails, // use HTML <details> to show/hide file contents

    GitHubCorner, // place an animated GitHub icon linking to your repo in the screen corner

    Icon, // used by the other components to render the occasional icon but can also be imported for outside use

    PrevNext, // links to previous and next posts/pages/items in a list

    RadioButtons, // horizontally arranged group of buttons where selecting one auto-deselects the previous one

    Toggle, // boolean control

    Tooltip, // box to show extra info on hovering any DOM element

  } from 'svelte-zoo'

```