npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@epilot/volt-ui-svelte

v0.3.0

Published

Svelte component library for Volt UI design system

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

daniel-bot.epilotdaniel-bot.epilotsumanth.kanakalasumanth.kanakalajulian01julian01sdrdhsdrdhanttiviljamianttiviljamij.pinhoj.pinhopraneetropraneetrosureshkumarssureshkumarsa.kediaa.kediasebas.sauersebas.sauerepilot-dev-toolsepilot-dev-toolsalexmarqsalexmarqsvladcrishanvladcrishanwmolinariwmolinarij.carneiroj.carneironishugoelnishugoeljakub.duras.epilotjakub.duras.epilotjulian.maurerjulian.maurermanikandan.subramanianmanikandan.subramanianaleksandr.lapushkinaleksandr.lapushkinberni-epilotberni-epilotmateus.nardomateus.nardogokul.kalaikovan.epilotgokul.kalaikovan.epilotjpcbarrosjpcbarroskarl.epilotkarl.epilotpriit.parnapriit.parnathisisernestothisisernestoepilot.ernestoepilot.ernestoepilot-blomqmaepilot-blomqmaflavius_amflavius_ambalintk-epilotbalintk-epilotankit.prasadankit.prasadkshitij.saxena.epilotkshitij.saxena.epiloti.agustiani.agustianpaulo.henriquespaulo.henriquesvanilla8389vanilla8389niko.kozivniko.kozivjosh.stewart.epilotjosh.stewart.epilotjoecaseepilotjoecaseepilotrichard.griffithsrichard.griffithsflorian.fuchs.epilotflorian.fuchs.epilotsimone.epilotsimone.epilot

Keywords

sveltesveltekituicomponentsvolt-uiepilot

Readme

@epilot/volt-ui-svelte

Svelte component library for the Volt UI design system. A tree-shakeable, accessible component library built with Svelte 5 and Tailwind CSS v4.

Docs

https://grand-yeot-414eb4.netlify.app

Installation

npm install @epilot/volt-ui-svelte @epilot/volt-tokens

Setup

1. Import the styles

Import the Volt UI styles in your app's main CSS file or layout:

/* app.css or +layout.svelte */
@import "@epilot/volt-ui-svelte/styles";

Or import directly in your Svelte layout:

<script>
  import "@epilot/volt-ui-svelte/styles";
</script>

2. Configure Tailwind CSS v4

Volt UI uses Tailwind CSS v4. Make sure your project is configured to use it:

// vite.config.js
import tailwindcss from "@tailwindcss/vite";

export default {
  plugins: [tailwindcss()],
};

Usage

<script>
  import { Button, Checkbox, Label } from "@epilot/volt-ui-svelte";
</script>

<Button variant="primary" size="base">Click me</Button>

<Label>
  <Checkbox />
  Accept terms and conditions
</Label>

Components

Form Components

  • Button - Primary action button with variants (primary, secondary, outline, ghost, link, destructive)
  • Checkbox - Checkbox input with label support
  • Switch - Toggle switch component
  • RadioGroup / RadioGroupItem - Radio button group
  • Label - Form label component
  • Field - Form field wrapper with validation support
    • FieldInput - Text input
    • FieldTextarea - Textarea input
    • FieldLabel - Field label
    • FieldDescription - Field description text
    • FieldError - Field error message
    • FieldGroup - Field grouping

Overlay Components

  • Dialog - Modal dialog component
    • DialogTrigger, DialogPortal, DialogOverlay, DialogClose
    • DialogContent, DialogHeader, DialogFooter
    • DialogTitle, DialogDescription
  • AlertDialog - Confirmation dialog component
    • AlertDialogTrigger, AlertDialogPortal, AlertDialogOverlay
    • AlertDialogContent, AlertDialogHeader, AlertDialogFooter
    • AlertDialogTitle, AlertDialogDescription
    • AlertDialogAction, AlertDialogCancel
  • Tooltip - Tooltip component
    • TooltipProvider, TooltipTrigger, TooltipContent

Display Components

  • Badge - Status badge with color variants
  • Separator - Visual separator line
  • Spinner - Loading spinner

Utilities

  • cn - Class name utility for merging Tailwind classes

Styling

Volt UI uses CSS custom properties prefixed with --volt- for theming. The design tokens are provided by @epilot/volt-tokens.

Light/Dark Mode

The components support light and dark modes. Apply the .dark class or data-theme="dark" to your root element:

<html class="dark">
  <!-- or -->
  <html data-theme="dark"></html>
</html>

Requirements

  • Svelte 5.0.0+
  • Tailwind CSS 4.0.0+

License

MIT