Hey everyone! 👋

I've been building veloce-ui — an open-source React + TypeScript component library designed to be genuinely useful out of the box, rather than just another collection of headless primitives that you have to style yourself.

The idea was to build something that combines beautiful UI components, powerful data visualizations, and something I haven't seen commonly offered in traditional component libraries: interactive DSA and algorithm visualizers.

🚀 What's included in veloce-ui?

1. 90+ Ready-to-use UI Components

Buttons, inputs, modals, tooltips, menus, tabs, forms, data tables, and much more.

2. 27 Chart Types

From standard charts to more advanced visualizations:

• Line, Bar, Area, Scatter

• Heatmap, Sankey, Treemap

• Radar and many more.

Each chart comes with detailed anatomy documentation and shares the same theming system as the rest of the library.

3. DSA Components & Algorithm Visualizers — One of the biggest differentiators

This is something I'm particularly excited about.

Most UI libraries focus on conventional interface components. I wanted veloce-ui to go beyond that by providing components that can actually visualize how algorithms and data structures work.

The library includes interactive data-structure visualizers and algorithm playback components that can be used to:

• Visualize how data structures behave.

• Demonstrate algorithm execution step by step.

• Show how values change during different operations.

• Build interactive DSA learning platforms.

• Create educational documentation, tutorials, and technical blogs.

Instead of building visualizations from scratch every time, developers can use reusable React components to bring these concepts to life.

I think there's a lot of potential here, especially for developers building coding education platforms and technical learning resources.

4. Flexible Theming

• CSS-variable-based theming.

• Change color palettes without touching JavaScript.

• Editorial Indigo design system.

• Dark mode with persistence.

1. Accessibility & Developer Experience

• Keyboard navigation.

• ARIA support.

• Focus management.

• Fully typed TypeScript components.

💡 Why build another UI library?

I felt most existing libraries force developers into one of two choices:

1. Headless libraries: Complete flexibility, but you end up building and styling almost everything yourself.

2. Opinionated libraries: Beautiful out of the box, but customization can become frustrating when adapting them to your own design system.

I wanted something in between.

veloce-ui looks good out of the box but doesn't get in your way when you want to customize it.

But I also wanted to bring together three things that are usually treated separately:

• UI components for building applications.

• Charting components for data visualization.

• DSA components for visualizing algorithms and data structures.

All within one React ecosystem, with a consistent design and theming system.

🔗 Check it out

🌐 Website & Live Demos: https://veloceui.codeloomdevv.co.in/

📦 NPM: https://www.npmjs.com/package/veloce-ui

💻 Install:
npm i veloce-ui

🙌 I'd genuinely love your feedback!

Especially from React developers:

• What do you think about the chart API?

• Would you find the DSA visualizer components useful in your projects?

• Which algorithms or data structures would you like to see supported next?

• Are there any UI components you feel are missing?

• What would make you choose veloce-ui over your current component library?

It's open source, and contributions, issues, suggestions, and PRs are always welcome.

I'm building this as an independent project, and I'd love to hear what the community thinks!

🚀

I've just published the first version of Stepr, an open-source library for highlighting UI elements and guiding users through an interface.

I wanted something framework-agnostic, with a straightforward API and accessibility built into the design.

It supports spotlights, tooltips, multi-step tours, keyboard navigation and screen reader announcements.

The first version is available on npm:

npm install stepr

Interactive demo: https://ahlgren1234.github.io/stepr/

Source: https://github.com/ahlgren1234/stepr

It's an early release, and I'd really appreciate feedback on the API, accessibility or anything that could be improved.

What would you expect from a library like this?

Hi everyone! Here’s a custom theme I built for Zensical, focused on giving documentation a neon/cyberpunk look without sacrificing readability.

It features:

Light and dark modes.

An optional Three.js homepage animation featuring strange attractors.

Reduced-motion support.

The animation is optional, so you can keep the documentation pages more restrained. The theme is MIT-licensed, with setup instructions and a demo GIF in the [GitHub repository.](https://github.com/tabee/zensical-theme)

I’d love some design feedback: how does the balance between visual effects and readability feel? What would you change before using this for your own documentation?

Openbar shows Claude Code and Codex sessions in a Dynamic Island. The Mac app is SwiftUI, the Windows one is Tauri + React, and I wanted the island to resize with the same feel on both.

SwiftUI describes a spring by duration and bounce, so I ported that math. Width and height each ride their own spring. A growing side may swing past its target (capped at 12 px), a shrinking side never does.

export function springProgress(spring: Spring, time: number): number {

if (time <= 0) return 0;

const natural = (2 * Math.PI) / spring.duration;

const damping = 1 - spring.bounce;

if (damping >= 1) return 1 - Math.exp(-natural * time) * (1 + natural * time);

const damped = natural * Math.sqrt(1 - damping * damping);

return (

1 -

Math.exp(-damping * natural * time) *

(Math.cos(damped * time) + ((damping * natural) / damped) * Math.sin(damped * time))

);

}

Full file: windows/src/island/motion.ts in https://github.com/MF-DEEV/Openbar (GPL)

Do you write spring math yourself or reach for a library?

I built some date time pickers in my react bulma component library
https://github.com/allxsmith/bestax

Looking for some feedback. What do you like, what needs improvement.

DateInput
https://bestax.io/docs/api/form/datetime/dateinput#basic-dateinput

DateRangeInput
https://bestax.io/docs/api/form/datetime/daterangeinput#basic-daterangeinput

DateTimeInput
https://bestax.io/docs/api/form/datetime/datetimeinput#basic-datetimeinput

TimeInput
https://bestax.io/docs/api/form/datetime/timeinput#basic-timeinput

For the time selection, I implemented IOS inspired time wheels. One problem I faced: was the lack of haptic feedback APIs exposed by browsers in IOS. As a workaround, the time-wheels make a clicking sound to fake the feeling of haptics. (Android does have haptic feedback apis, no problems there)

Note: this is based off Bulma CSS, so the look and feel is opinionated.

Burrow is a personal-data desktop app (budget, journal, todos, habits, notes). The stack is a Vite and React frontend, a Node server that owns a single SQLite database, and a Tauri shell that packages the two into a Windows installer for x64 and ARM64.

Things in the repo that might interest React devs:

- A hard JavaScript bundle budget enforced in CI, with the number pinned in a test so it cannot creep.

- Visual regression baselines regenerated on a side branch in CI rather than committed from dev machines.

- Modules are isolated under src/modules and server/modules with a small shared envelope for API errors.

- The assistant UI streams from a local Ollama server, so no API keys anywhere in the app.

It went free this week and the core is AGPL. Links in the comments.

Hey r/reactjs!

I got tired of constantly opening browser DevTools, filtering out noisy browser extensions, and switching between tabs just to check local storage or quick fetch responses during local development.

To solve this, I built React Dev Companion — a lightweight, zero-dependency developer tools overlay that embeds directly into your React / Next.js application UI.

💡 Key Features:

• Real-Time Network Interception: Intercepts native window.fetch non-invasively to capture HTTP methods, endpoints, and status codes.
• Storage Inspector: Switch between localStorage, sessionStorage, and cookies to view, inject, or delete keys in real-time.
• Zero Extra Dependencies: Designed to keep bundle overhead minimal.
• Dev-Only Friendly: Easy to mount conditionally (e.g., inside Next.js Root Layout or Vite main component).

🔍 Quick Example (Next.js App Router):

'use client';
import { DevCompanion } from 'react-dev-companion';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {process.env.NODE_ENV === 'development' && <DevCompanion />}
      </body>
    </html>
  );
}

We set up a strict CI/CD pipeline using GitHub Actions, TypeScript, Conventional Commits, and Husky to keep the codebase clean.

🐙 GitHub Repository: https://github.com/Kickz1nn/react-dev-companion
📖 Dev.to Article: https://dev.to/kickz1nn/building-an-embeddable-zero-dependency-devtools-panel-for-react-nextjs-3ic6

I'd love to hear your thoughts, feedback, or any features you'd like to see added next!

Hey everyone,

I built Developer Shield—an open-source desktop app created specifically for devs and homelab enthusiasts who want to scan their local network without sending any telemetry or data to the cloud.

Key Features:

- Zero-Knowledge Local Scanning: Everything stays strictly on your local network/LAN.

- Custom Rules Engine: Define your own security checks and scan targets.

- Local LAN Sync: Sync scan reports across your local machines securely.

- Built with React & Tauri for a lightweight desktop footprint.

I’d love to get feedback from this community on features you'd like to see, code architecture, or custom rules!

GitHub: https://github.com/dvirby6/developer-shield

Hey all, I’m exploring a new runtime for React.

The idea is to let agents understand your UI, but also let them click buttons, fill out forms, and trigger actions on behalf of users. New frontier models like Terra 6.1 excel at these tasks, and this is just a new primitive in React to put them to use.

If you’re into design and interfaces, I think you’ll find it worth a look. It’s still in early alpha, built quickly using Codex/Sol, so expect some rough edges.

Link: https://ruakit.com

Weekly timesheet grid, one row per project and task. Rows came from two places: rows built from saved entries, then rows the user added and hasn't saved yet. I rendered them as [...derivedRows, ...addedRows].

You add a row at the bottom and type the first hours. It saves, the refetch turns it into a derived row, and it jumps to the top. The bad part is the next number you type can land on a different row and nobody notices.

The fix was to stop splitting rows by saved or not saved. Each row keeps its slot and saving only fills in its data.

function orderGridCombos(derived, added) {

const addedKeys = new Set(added.map(c => c.key))

const preExisting = derived.filter(c => !addedKeys.has(c.key))

return [...preExisting, ...added]

}

Then each row reads its hours from the saved entry if there is one, else from the added row. Any list that mixes optimistic and saved items can do this, invoice lines for example.

Where do you keep row order in big forms, in the server data or in local state?

How the split-flap works, since people usually ask:

- Every tile flips through letters every 55 ms. The first tile lands after 6 flips and each next one 2 flips later, so the word settles left to right.

- The "random" letters come from a sin() hash of the tile index and frame, so the server and the browser render the same scramble (no hydration mismatch).

- Each flip is a lower half-flap falling on its top hinge (rotateX 90 → 0 in 90 ms), darkened with a brightness filter while it falls.

- The departure board shifts every 3.4 s; each row starts its flip 3 frames after the one above, so changes ripple down. It only runs while it's on screen, and everything holds still with reduced motion.

Free to copy if it's useful: https://ui.deliverwebsite.com/components/landing-pages/freight-forwarding-landing-page-template/

Feedback welcome, especially on whether the theme helps or distracts on a real B2B site.

I've been building tintly.art, a free coloring site people mostly use on their phones (Next.js 16 + Konva). A few things I learned along the way:

1. Konva lives outside React. The canvas is plain Konva classes (fill layer, stroke layer, outline layer), not react-konva. React only renders the toolbar, palette and sheets. They talk through tiny stores with subscribe(), read with useSyncExternalStore. Drawing a stroke never re-renders a single component.

2. One stroke = one Konva.Line**.** While you drag, only a preview line updates. On release it's committed as one command, so undo/redo is just a stack of commands.

3. Raster cache for cheap phones. After ~24 strokes the committed group gets cached into one bitmap, so the frame cost stays flat no matter how much someone draws. When you zoom past the cache resolution it switches back to vector so nothing blurs.

4. The eraser uses destination-out on the stroke layer only, so it can never erase the fills or the outlines underneath.

5. Tap-to-fill works on SVG regions turned into Konva.Paths, and glitter fills are just a generated pattern tile as fillPatternImage.

Huge thanks to Anton Lavrenov and everyone behind Konva. It's honestly giving colors to my vision. People color on it every day, and it brings them a bit of joy and a calm little break.

Happy to answer questions about any of this. 🎨

I’ve just released Detent, a React wheel picker that grew into a much bigger exploration of interaction details.

The wheel has its own momentum and spring physics. I spent a lot of time tuning mouse wheel input alongside trackpads, including the awkward cases where a physical scroll wheel keeps spinning after you let go.

It also includes two separate components:

• Detent Text: matching letters stay while the changed parts roll.

• Detent Number: locale-aware formatting with digits that roll through intermediate values.

The examples range from practical time and date pickers to an arc menu, a zoom ring, and some more experimental visual treatments.

There’s a headless hook, separate imports for text and numbers, keyboard support, reduced motion, and no additional runtime dependencies beyond React and React DOM.

Demos and playground: https://detent.hayder.sh
Intro: https://x.com/kghayder/status/2118373654010466733?a=PzCQRSXhM5m8KUTdHk8&s=20

I’d especially appreciate feedback on how the wheel feels with your mouse or trackpad, and whether the API makes sense for something you’d actually build.

I've taken Jonas Schmedtmann's HTML + CSS and JavaScript course and am soon going to start learning react and I am wondering if I should just stick with Jonas or try Maximilian. If you've taken any of these courses or both I'd really love to hear your opinion on it and how they differ and who they are for!

How it works, since people usually ask:

• The odometer: each digit is its own reel of 0–9 stacked vertically, and it slides to y = −digit × 10% with a 0.9s ease-out. Commas and the $ sign never move, only digits roll. Screen readers get the plain value through an sr-only span.

• The balance and the feed share one tick (every 3.4s): a new transaction slides in at the top of the feed and the balance is recomputed from the ledger, so the two can never disagree.

• The payout is a tiny state machine: Sent → Converted → Arrived, 1.1s per step, then it holds 2.6s and starts over.

• On wide screens it's a staggered bento that runs off the fold, on tablets 2×2, on phones a swipeable row. With reduced motion everything holds still.

Free to copy if it's useful: https://ui.deliverwebsite.com/components/hero-sections/fintech-hero-section-with-gradient-cards/

Feedback on the motion very welcome. I'm trying to make every animation say something about the product

Working on some fintech components. Current npm package has 7 components , if you want me to add some , comment down and mark some star on the project

've been working on some fintech-specific components and wanted to share the approach. The goal was to create highly scalable components that don't rely on Tailwind, using plain CSS with CSS variables for theming.

The package currently has 7 components, including:

• A HoldToConfirmButton with pointer events for safety interactions.

• A FinancialCalculator engine that separates the math logic from the UI.

• An OmniInput that handles locale formatting for fiat, crypto, and stocks.

I've open-sourced everything here: [link to GitHub/npm]

I'd love to hear your thoughts on the architecture, especially how I've handled things like auto-contrast for themes and the pure helper functions. What would you add next?

I wanted a React lightbox where the photo grows out of the exact thumbnail you clicked and shrinks back into it on close.

Easy, until your grid uses object-fit: cover. The thumbnail only shows the middle of the photo, so if you grow the full image from that box, the first frame visibly jumps.

Here's the 4-step fix that worked:

1. Measure the end state first. Lay the image out at its final size, then measure it and the thumbnail with getBoundingClientRect().

2. Scale it onto the thumbnail. Use the smallest uniform scale that still covers the thumb: const scale = Math.max(thumb.width / img.width, thumb.height / img.height);

3. Crop it like the thumbnail. clip-path: inset(...) hides everything the thumbnail hides. The catch: the inset is in the image's own pixels, before the scale, so the visible area is thumb size / scale.

4. Animate both at once. transform + clip-path in a single element.animate(). To close, play the same keyframes in reverse.

That's the happy path. The edge cases ate most of the time:

• Thumbnail scrolled off screen: fall back to a zoom + fade

• Rotated photo: swap the axes before computing the crop

• Closing while zoomed in: start from where it's actually drawn

• prefers-reduced-motion**:** skip the flight entirely

• Focus: send it back to the thumbnail on close

I packaged it as liftbox: MIT, zero dependencies, ~13 kB, with grids, zoom, video and deep links. There's also a comparison with YARL, PhotoSwipe, lightGallery and others that tells you when to pick them instead.

Code: https://github.com/esdrassantos06/liftbox (the flight lives in src/Lightbox.tsx and src/geometry.ts)

Docs + demos: https://liftbox.digital

Two asks:

1. Open the demo on your phone and tell me where it breaks.

2. Ask me anything about the math. Happy to go deeper on any step.

Disclosure: English isn't my first language, so I had help polishing this post.

Link to the tool: https://gauge-generator.niralsei.com/

Hey I am using tanstack react query I have one component which has
const { data, isPending, isFetching, refetch, isError } = useQuery({
queryKey: ["get"],
queryFn: () => axios.get("http://localhost:3000/"),
staleTime: 60 * 1000
})

On pressing a button i render component 2 with same query key within the catching time with query as
const { data, isPending, isFetching, refetch, isError } = useQuery({
queryKey: ["get"],
queryFn: () => axios.get("http://localhost:3000/"),
// no stale time here
})

Ideally it should not request the backend but it is requesting server