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

@bhavyapage/assets

v1.1.8

Published

Delightful, interactive React components — drag-and-drop stickers, embeddable Wordle, and playful UI widgets

Vulnerabilities

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

Links

Git

Maintainers

damnbhavyadamnbhavya

Keywords

reactcomponentsstickerswordlegameinteractiveuiglassmorphismframer-motiondraggablewidget

Readme

@bhavyapage/assets

Production-ready React components extracted from bhavya.page — featuring drag-and-drop stickers, an embeddable Wordle game, and playful UI elements with zero config.

npm version License: MIT

Documentation & live demos: assets.bhavya.page

Installation

Install the package and its peer dependencies via npm, yarn, or pnpm:

npm install @bhavyapage/assets framer-motion

Components

Stickers

A floating button that opens a sticker picker panel. Users can drag stickers anywhere on the screen. The sticker positions are automatically saved to localStorage and persist across page loads.

Includes automatic dark/light theme support and responsive touch handling.

Usage

import { Stickers } from '@bhavyapage/assets';
import '@bhavyapage/assets/styles.css';

const myStickers = [
  { id: 'cat', src: '/stickers/cat.png' },
  { id: 'star', src: '/stickers/star.png' },
  { id: 'heart', src: '/stickers/heart.png' },
];

function App() {
  return (
    <Stickers 
      stickers={myStickers} 
      position="bottom-right"
      theme="auto"
      columns={4}
    />
  );
}

Wordle

An embeddable word guessing game with a virtual keyboard, dictionary validation, persistent stats, and glassmorphism styling. Works with zero props or fully customized.

Usage

import { Wordle } from '@bhavyapage/assets';
import '@bhavyapage/assets/styles.css';

function App() {
  return <Wordle />;
}

Custom word list

<Wordle
  words={['react', 'vites', 'nodes', 'nexts', 'build']}
  validateWords={false}
  theme="auto"
  accentColor="#6366f1"
/>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | words | string[] | — | Custom 5-letter target words. Uses built-in list + API if omitted. | | theme | 'dark' \| 'light' \| 'auto' | 'dark' | Color theme. Auto follows system. | | maxGuesses | number | 6 | Max guesses per game. | | accentColor | string | '#dc2626' | Play Again button color. | | storageKey | string | 'bhavya-wordle' | localStorage key prefix. | | validateWords | boolean | true | Validate guesses against dictionary API. |

Styling

This package uses vanilla CSS to ensure maximum compatibility and zero dependencies. You must import the CSS file at the root of your application to use the components properly.

import '@bhavyapage/assets/styles.css';

Tip: If you experience horizontal zooming on mobile when dragging stickers to the edge, you must prevent mobile browsers from scaling the viewport.

  • Standard HTML / Vite: Use <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> in your HTML <head>.
  • Next.js >= 14: Export a viewport object with userScalable: false and maximumScale: 1 in your root layout.tsx.

Architecture & Features

  • Built with Framer Motion: Buttery smooth animations and spring physics out-of-the-box.
  • Glassmorphism Design: Beautiful translucent panels that adapt to both dark and light modes cleanly.
  • Tree-shakeable: Distributed in ESM and CJS formats, so you only bundle what you use.
  • TypeScript Ready: Full type definitions are included for excellent developer experience.

License

MIT © Bhavya