DEV Community: jQueryScript

Composable React Carousel: Autoplay, Loop, Drag, and Swipe

jQueryScript — Wed, 29 Apr 2026 08:07:40 +0000

carouselcn: a composable React carousel built with Tailwind CSS and shadcn/ui that uses CSS transitions for all slide movement.

Key features:

No Framer Motion or external animation runtime
Copy the source into your project and own it completely
Horizontal and vertical orientation
Loop, autoplay, drag, swipe, and keyboard navigation
Controlled mode via an onIndexChange callback
useCarousel and useCarouselAutoplay hooks for direct state access. If you're already on a shadcn/ui project, it drops into your existing components/ui folder with no extra setup.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

CSS Only Tooltips with ::before and ::after

jQueryScript — Tue, 28 Apr 2026 08:35:10 +0000

CSS Tooltips (Before & After): a pure CSS tooltip library that renders positioned, color-coded bubble tooltips using ::before and ::after pseudo-elements.

Key features:
• Four placement directions: top, bottom, left, right
• Four color variants: default, accent, danger, info
• Hover and keyboard focus support
• Inline text tooltip mode with multi-line layout
• Full theming through CSS custom properties
• Zero JavaScript

Add tooltips to any element with a single data-tip HTML attribute.

👉 Blog Post

👉 Live Demo

RangeFlow: React Date Range Slider and Picker

jQueryScript — Tue, 28 Apr 2026 02:14:26 +0000

RangeFlow: a React date range picker with a drag-based slider, quick preset tabs, and a popover calendar.

Key features:

Drag slider with mouse and touch support
Animated preset tabs (2 Weeks, 30 Days, etc.)
Single CSS variable theming
Slot-based customization for every visible region
Imperative control API for external buttons and forms
TypeScript support out of the box
React 18 and 19 compatible

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

React Native Date Picker With iOS Wheels

jQueryScript — Mon, 27 Apr 2026 09:06:30 +0000

expo-ios-like-date-picker: a React Native date picker for Android that brings iOS-style wheel selection to Expo apps.

Key details:

Wheel picker with haptic feedback and sound
Calendar grid for direct day selection
Glassmorphism UI with animated transitions
TypeScript-ready DateValue state
Built with Expo 55, React Native 0.83, Reanimated 4, and Skia

Useful for Android forms that need a more polished date input than a basic text field.

👉 Blog Post

👉 GitHub Repo

Autumn Note: Vanilla JS WYSIWYG Rich-Text Editor

jQueryScript — Mon, 27 Apr 2026 08:54:26 +0000

Autumn Note: a vanilla JavaScript WYSIWYG editor with a full rich-text toolkit and no runtime dependencies.

Key features:
• Bold, italic, heading styles, checklists, and code blocks
• Image upload with inline crop tool, video embedding (YouTube, Vimeo, MP4)
• Interactive table editor with row and column management
• Find and Replace, emoji picker, and FontAwesome icon picker
• Auto-save to local storage and read-only preview mode
• Dark mode, RTL layout support, and eight built-in UI locales

Works as an ES module or UMD bundle. Bootstrap 4 and 5 compatible.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

loading-ui: 36+ Copy-paste Loading Indicator Components for React

jQueryScript — Mon, 27 Apr 2026 01:51:24 +0000

loading-ui: a custom shadcn registry of loading indicators for React apps.

It ships 36 components through the standard shadcn CLI workflow. The set covers spinners, rings, dot sequences, text animations, orbital patterns, and more. Each component lands in your project as editable source code.

Key highlights:

Install via npx shadcn@latest add @loading-ui/[slug]
Tailwind CSS styling with CSS variable hooks
motion/react animations with configurable timing
ARIA role and screen reader labels included by default
Copy-paste from the docs if you skip the CLI

Works in any React app already configured with shadcn, Tailwind, and components.json.

👉 Blog Post

👉 GitHub Repo

👉 Live Demo

React #TailwindCSS #shadcn #WebDev #Frontend

react-native-pretty-toast: Dynamic Island Toast Notifications for iOS & Android

jQueryScript — Sun, 26 Apr 2026 17:16:58 +0000

react-native-pretty-toast: a React Native library that morphs toast notifications directly out of the Dynamic Island on iPhone and the camera cutout on Android.

Key features:

Dynamic Island and DisplayCutout anchoring, detected automatically
Shared toast.show() API across iOS, Android, and Web
toast.promise() for automatic loading → success/error transitions
Swipe-up dismiss, undo action button, and force-preempt for critical alerts
Full accessibility support on native and web
Requires React Native 0.76+ with the New Architecture

👉 Blog Post

👉 GitHub Repo

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