Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 4 months 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 (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-07T16:34:24.000Z (5 months ago)
- Last Synced: 2024-10-12T15:56:52.856Z (4 months 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
[](https://github.com/janosh/svelte-zoo/actions/workflows/test.yml)
[](https://github.com/janosh/svelte-zoo/actions/workflows/gh-pages.yml)
[](https://results.pre-commit.ci/latest/github/janosh/svelte-zoo/main)
[](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'```