DEV Community: jQueryScript

ds.css: A Pure CSS Nintendo DS Lite UI Framework

jQueryScript — Thu, 02 Jul 2026 10:40:06 +0000

ds.css: a CSS library that recreates the Nintendo DS Lite firmware interface for your web projects.

Key features include:

16 themed colors with lighter shade variants built in
Colored buttons, inputs, radio groups, and progress bars
A Pictochat-style messaging panel with a highlight class
An alert component with an optional loading animation
Zero JavaScript, install via npm or copy the CSS folder directly

Good pick if you're building a retro portfolio, a nostalgia landing page, or just want a handheld console look without hand-coding every gradient.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Startercn: Build a Custom shadcn/ui Registry with Next.js

jQueryScript — Fri, 26 Jun 2026 02:15:35 +0000

Startercn: a Next.js starter kit for publishing your own shadcn/ui component registry.

Features

Write and own local TypeScript component source.
Generate installable registry JSON files.
Publish docs and component endpoints from one project.
Let users install components through the shadcn CLI.

👉 Blog Post

👉 GitHub Repo

tw-fade: Scroll-Gated Edge Fades for Tailwind v4

jQueryScript — Fri, 26 Jun 2026 01:59:13 +0000

tw-fade adds scroll-aware edge fades to Tailwind CSS v4 scroll containers.

Features:

Add top, bottom, left, right, vertical, horizontal, or four-edge fades.
Use CSS masks with no runtime JavaScript.
Keep sticky headers readable with configurable clear zones.
Import the Tailwind v4 source path or a prebuilt CSS file.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

liquid-glass: React Component for Live DOM Refraction

jQueryScript — Thu, 25 Jun 2026 08:58:51 +0000

liquid-glass adds a headless liquid glass layer to React interfaces.

Refract wrapped DOM content with SVG filters.
Build copied glass panels for Safari and Firefox.
Add multiple lenses over video or canvas surfaces.
Tune blur, curvature, glow, highlights, and chromatic edges through optics.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

gradient-shimmer: Animated Text for React and Next.js

jQueryScript — Thu, 25 Jun 2026 08:45:01 +0000

gradient-shimmer adds animated multi-stop gradient text to React and Next.js interfaces.

Features:

No CSS import or runtime dependency.
Nine built-in gradient presets.
Custom colors, band width, angle, and timing controls.
Scroll, viewport, and reduced-motion pause behavior.
Works well for status labels, hero copy, and background task feedback.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Able Player: A Fully Accessible HTML5 Media Player

jQueryScript — Thu, 25 Jun 2026 02:26:10 +0000

Able Player v5: a JavaScript library that turns a plain HTML5 video or audio tag into a fully accessible media player.

Features:

Closed captions and subtitles from WebVTT files
An interactive transcript generated from your caption and chapter tracks
Spoken audio description through the browser's speech engine
Synced sign language video support
Works with locally hosted files, YouTube, and Vimeo

If you build for the public sector, higher ed, or anywhere Section 508 or WCAG compliance matters, this one's worth a look.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

SunCalc: Sun, Moon, and Twilight Data in JavaScript

jQueryScript — Wed, 24 Jun 2026 04:40:40 +0000

SunCalc: a dependency-free JavaScript library for calculating solar and lunar data from a date, latitude, and longitude.

It returns:

Sun altitude and compass direction.
Sunrise, sunset, dawn, dusk, and golden-hour times.
Moonrise, moonset, lunar phase, and illumination data.
Custom solar thresholds for blue-hour interfaces.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Build Gamification UI in React with Trophy

jQueryScript — Wed, 24 Jun 2026 01:26:27 +0000

Gamification UI Kit by Trophy adds editable shadcn/ui components for React and Next.js product interfaces.

Streak badges, cards, and calendars
Achievement grids, badges, and reward states
Leaderboards with rankings, pagination, and current-user focus
Points charts, boost panels, and level progression views
Local TypeScript and Tailwind source through the shadcn CLI

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

shadcn Stacked Progress Bar Component for Status Tracking

jQueryScript — Wed, 24 Jun 2026 00:35:50 +0000

Build compact pipeline, capacity, and usage indicators with shadcn-stacked-progress-bar.

Features:

Show multiple status values in one track.
Add a semantic legend for color-coded segments.
Attach shadcn/ui tooltips for exact status detail.
Keep all component source editable in your React project.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Recogito Text Annotator: Interactive Text Highlights

jQueryScript — Tue, 23 Jun 2026 04:50:18 +0000

Recogito Text Annotator: a JavaScript library that turns browser text selections into interactive annotations.

Key Features:

Text highlights with custom styles
JSON annotation loading
Filters and selection modes
Undo and redo history
Create, update, delete, and viewport events

Useful for annotated articles, transcript review tools, research readers, policy review interfaces, and documentation workflows.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Toastry: Sonner-Style Toast Notifications in JavaScript

jQueryScript — Tue, 23 Jun 2026 03:49:42 +0000

Toastry: a dependency-free JavaScript library for Sonner-style stacked toast notifications.

Features:

Success, error, warning, info, and loading states
Promise-based async feedback
Swipe dismissal and action buttons
Four viewport positions
CSS variable theming

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Shadcn React Table: Data Table for React & Next.js

jQueryScript — Tue, 23 Jun 2026 01:33:02 +0000

shadcn-react-table is a source-owned data grid for React and shadcn/ui projects.

Key features:

Eight column filter variants with filter mode controls
Inline editing, row creation, row actions, and cell actions
Grouping, aggregation, detail panels, and tree data
CSV and Excel export for selected or filtered rows
Row and column virtualization for data-heavy interfaces
Server-side pagination, sorting, and filtering through TanStack manual mode

👉 Blog Post

👉 GitHub Repo

👉 Live Demo