DEV Community: jQueryScript

A Modern CSS Reset Built for Today's Web

jQueryScript — Fri, 24 Apr 2026 05:57:58 +0000

Custom CSS Reset: a modern CSS stylesheet that normalizes browser defaults across the full element stack.

Key highlights:

Uses :where() for zero-specificity rules your own styles always override
Removes default margin and padding from all non-dialog elements
Sets responsive defaults for images, video, and other media
Fixes font inheritance for form controls across all browsers
Applies touch-action: manipulation to remove the 300ms tap delay on mobile

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

bsky-comments: Embed Bluesky Threads Anywhere

jQueryScript — Fri, 24 Apr 2026 05:04:37 +0000

bsky-comments: a Web Component that embeds Bluesky discussion threads directly on any webpage.

Key features:
• Accepts public bsky.app post URLs or AT-URIs
• Renders in the Light DOM — Tailwind and global CSS apply directly
• Works in React, Vue, Svelte, Astro, and plain HTML
• ~3 kB gzipped, no SDK required
• Nested replies, rich text, mentions, and hashtag support

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

AI Chat UI Components Built on shadcn and Tailwind v4 — Nexus UI

jQueryScript — Fri, 24 Apr 2026 02:55:01 +0000

Nexus UI: a React component library built specifically for AI chat interfaces.

Key components:

Prompt Input with auto-resizing textarea and action slots
Model Selector dropdown with radio groups and sub-menus
File Attachments with preview and upload wiring
Chat Thread with stick-to-bottom scrolling
Suggestion chips for guiding user input
Message layout with markdown, avatar, and attachment support

Works with the Vercel AI SDK and the useChat hook. Built on React 19, Tailwind CSS v4, and Radix UI. Components copy into your project as editable source files. No package dependency.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Air Datepicker v3: Fast, Customizable Date Picker

jQueryScript — Fri, 24 Apr 2026 02:24:57 +0000

Air Datepicker v3: a vanilla JavaScript date picker library with no dependencies.

Key features:

Single date, multi-date, and range selection
Built-in timepicker with 12/24-hour support
Per-cell rendering via onRenderCell
Draggable range adjustment
Full localization through locale objects
CSS variable theming
TypeScript support

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

LiquidGlass: WebGL-powered Liquid Glass Effects

jQueryScript — Thu, 23 Apr 2026 05:19:35 +0000

LiquidGlass: a JavaScript library that applies realistic liquid glass refraction, blur, chromatic aberration, and Fresnel lighting to any HTML element using WebGL shaders.

Key features:

Fragment shader-based glass refraction and specular highlights
Per-panel Gaussian blur and chromatic aberration
Layered compositing so glass panels see each other in refraction
Draggable floating panels via Pointer Events
Static DOM capture cached once; dynamic content flagged per-element
Works with live video, canvas elements, and animated content

Zero CSS tricks. The effect runs entirely in WebGL. Worth checking out for anyone building UI components with a physical glass aesthetic.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Copy-Paste Sci-Fi Components Built on Radix UI | SCIFICN/UI

jQueryScript — Thu, 23 Apr 2026 03:06:19 +0000

SCIFICN/UI: a React component library that applies a cassette futurism terminal aesthetic to a full set of copy-paste UI components.

Key details:

30+ components: charts, HUD panels, stat cards, node graphs, and a terminal emulator
Three runtime themes: SCI-FI (green phosphor), STAR WARS (blue holographic), ALIEN (warm bone)
Built on Radix UI and Tailwind CSS v4
Adds components via the shadcn CLI: npx shadcn@latest add @scificn/button
Source files copy directly into your project — no npm package, no version lock-in

Good for dashboards, monitoring screens, internal tools, and game style interfaces.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Mobile Swipe Menu: Vanilla JS Offcanvas Menu

jQueryScript — Wed, 22 Apr 2026 04:59:42 +0000

mobile-swipe-menu: a vanilla JavaScript library that adds touch-based swipe gesture control to offcanvas side navigation panels.

Key features:

Left and right slide modes
Configurable hook zone for edge-drag triggering
Full-body swipe detection option
Programmatic open, close, and toggle methods
Lifecycle callbacks: start, stop, drag, opened, closed
Vue and TypeScript compatible

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

tiks: Web Audio UI Sounds With No Audio Files

jQueryScript — Wed, 22 Apr 2026 03:58:28 +0000

tiks: a JavaScript library that generates UI sound effects at runtime using the Web Audio API.

No audio files. Every sound is synthesized from oscillators, noise buffers, and gain envelopes at the moment you call it.

Key features:

10 interaction sounds (click, toggle, success, error, warning, hover, pop, swoosh, notify)
Two built-in themes: soft (warm/rounded) and crisp (sharp/mechanical)
Custom theme API with full control over frequency, waveform, and filter parameters
React hook and Vue composable, both with auto-initialization
Tree-shakeable imports for minimal bundle impact

Good for design systems, PWAs, or any web UI that wants the tactile audio layer native apps have had for years.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

shadcn/ui Calendar Component with Admin Timezone Support

jQueryScript — Wed, 22 Apr 2026 02:43:31 +0000

Calendar Scheduler: a React scheduling component built on shadcn/ui and date-fns that handles timezone-aware slot booking out of the box.

Key features:

Month, Week, Day, and Agenda view modes
Admin availability converts automatically to each viewer's local timezone
Configurable slot durations at 15, 30, or 60 minutes
Booked slot tracking in the rendered grid

Install it in one command via the shadcn registry, or copy the component folder manually. Works with any TypeScript-first React project that has Tailwind CSS configured.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

React Native Spinner Set for Agent Screens

jQueryScript — Tue, 21 Apr 2026 07:10:55 +0000

expo-agent-spinners: a React Native spinner library that adds 54 terminal-style loaders to Expo apps and mobile agent UIs.

• 32 Braille spinners
• 15 ASCII styles
• 2 arrow loaders
• 6 emoji options
• Shared size, color, and style props
• Great fit for AI agent streams and CLI-style mobile screens

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Two Direction Sticky Sidebar in Pure JavaScript

jQueryScript — Tue, 21 Apr 2026 05:10:58 +0000

Two Direction Sticky Sidebar: a pure JavaScript utility that adds bi-directional sticky behavior to any sidebar element.

Key features:

Tracks scroll direction and locks to the top or bottom of the viewport
Configurable top and bottom viewport gaps via data attributes
Mobile breakpoint support disables the effect on small screens
Live attribute updates reconfigure the sidebar at runtime
Frame-synced scroll handling for consistent visual performance

Add one attribute to your sidebar element and include the script. That's the full setup.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

Linked lists using anchor-positioning

jQueryScript — Tue, 21 Apr 2026 04:12:47 +0000

Linked Lists with CSS anchor-positioning: a CSS-and-JavaScript pattern that draws position-aware two-segment connector lines between checked checkboxes and a selected radio button.

Key features:
• anchor-scope lets multiple checked checkboxes maintain independent connection lines at the same time
• Container style queries route connectors for above, below, and inline alignments
• Full theming through CSS custom properties
• Minimal JavaScript. All connector geometry runs in CSS
• Built-in light/dark mode support

👉 Blog Post

👉 Live Demo