I maintain Flux, a free MIT-licensed download manager with a Rust backend and React/Tauri desktop interface. I wanted to share the React side here and get feedback on the queue/settings UI.

A few concrete implementation details: react-i18next provides the 20-language interface; Radix Dialog/Tabs/Menu primitives handle the settings and action surfaces; the task list uses TanStack React Virtual; light/dark appearance is persisted locally. The application keeps task records and live progress as separate state, with the Rust core handling transfers.

In 2.5, the browser connection flow and companion popup were refreshed. An important UI detail is keeping “local host registered” separate from “browser extension connected,” so someone with only one component installed gets a useful next step. The companion has separate media, page-link and queue views.

Source: https://github.com/Hactor00/Flux

React entry and settings components are in src/App.tsx and src/components/SettingsModal.tsx. The project has been developed with AI coding assistance. The 2.5 validation record documents 22 frontend tests plus production UI checks across 20 languages.

Desktop packages are Windows x64 installer/portable ZIP and a Linux x86_64 RPM tested on Fedora 43. The companion needs the separate desktop app/local bridge; Firefox GitHub ZIPs use temporary/developer loading.

Website and setup: https://fluxdownload.org

Chrome companion: https://chromewebstore.google.com/detail/flux-download-manager/okimieponfbegjhmfdnnefnddofooipk

The images show the current desktop interface preview, browser popup with sample media and companion settings. I’d appreciate feedback on the component/state boundaries or the clarity of the settings navigation.

AI Elements: Agentic UI Patterns

shadcn/ui introduced AI Elements, a curated collection of component patterns created specifically for building conversational and agentic interfaces.

Each pattern is composed from standard shadcn/ui primitives designed to be copied directly into codebases, standardizing interfaces for agent tool calls, planning, sources, and step restoration.

Trace: Observability Primitive for Agent Activity

shadcn released Trace, a dedicated primitive designed to unify agent activity displays under one abstraction. It represents reasoning traces, tool executions, task queues, chains of thought, and subagent routines.

Trace models agent progress as a list of status lines with support for expandable details, links, and nested execution steps.

Chatbot Template: AI SDK Agent Starter

The shadcn team published an official minimal chatbot template built with Next.js, Vercel AI SDK, shadcn/ui, shadcn/react, and shadcn/typeset.

Designed to run on the Vercel AI Gateway, the starter serves as a clean starting point for streaming conversational interfaces with typographic defaults and state management built in.

Official Registry Directory Expansions

The official shadcn/ui registry directory added new specialized community components and domain toolkits this week.

• @babelize — Open-source localization components including language switchers, relative-time formatters, and translation widgets.
• @liquikit — Liquid glass primitives with physically based refraction built on Base UI that work across modern browsers.
• @audio-ui — Accessible audio controls including knobs, faders, XY pads, waveforms, and sequencers on headless primitives.
• @bevel — Tactile skeuomorphic components like guarded switches, split-flap boards, and motorized faders on Tailwind v4.
• @dualkit — Bilingual Arabic and English components featuring RTL layouts, Gulf currency formats, and Hijri calendar support.
• @organui — Domain components for healthcare and life sciences featuring 3D organ viewers, ECG traces, and lab result trackers.

📙 Articles, Tutorials & News

Building shadcn/ui Registries for Claude Code and Cursor

Preet Suthar outlines the structure, validation steps, and namespace setup required to author custom registries that coding agents can inspect and consume.

7 Best shadcn/ui Themes and Theme Generators

A curated comparison evaluating popular color palette customizers, theme presets, and generators across the shadcn/ui ecosystem.

Tailwind CSS v4, shadcn/ui & Dark Mode

A complete video walkthrough demonstrating how to structure a centralized design system using Tailwind CSS v4 and shadcn/ui primitives.

📦 Projects, Packages & Tools

onsystem: Design System Linter and MCP for Agents

A zero-config tool that combines an MCP server with a linter to prevent coding agents from inventing variants, hardcoding colors, or breaking spacing scales.

pie-menu: Radial Interaction Primitive

A radial pie menu for shadcn/ui with press-drag-release interaction, full keyboard support, and a headless primitive core.

signoff-ui: Human Review Primitives for Agents

UI components providing multi-file diff reviews with per-hunk decisions, inline comments, tool approvals, and telemetry for AI SDK and AG-UI agents.

animate-ui: Lower-Level Primitive Animations

An animation toolkit that targets the underlying primitives your components rely on, preserving custom shadcn markup and component source ownership.

shadcn-exchange: Cross-Registry Block Search

A directory tool allowing developers to search, preview, and CLI-install blocks across all public community registries.

facade-ui: Base UI Marketing Blocks and Templates

An open-source registry of accessible marketing blocks, landing page sections, and templates built on Base UI and Tailwind CSS v4.

nasaq: Arabic and RTL-First shadcn Registry

An open-source registry of React components, themes, and page templates designed with native RTL layout and Arabic typography, paired with an MCP server.

🌈 Related

audiocn-solid: Audio Primitives for Solid

A collection of audio UI components ported to SolidJS and distributed as copy-paste source through the shadcn CLI workflow.

esuiss: Multi-Platform UI Primitives

A component collection extending shadcn design patterns across React, Next.js, React Native with Expo, SwiftUI, and Jetpack Compose.

GooseForum: Go-Powered Self-Hosted Forum

A self-hosted forum platform featuring shadcn/ui discussion pages, an admin console, and a light and dark theme workbench, distributed as a single Go binary.

Read the full issue: https://www.shadcnweekly.com/issues/4

Co-Founder & CTO Wanted 90% Built B2B SaaS

We are seeking a Technical Co-Founder to take full ownership of the codebase and scale our B2B SaaS platform through launch and beyond.

The Details:

Comp: Equity-based (Co-founder level split)

Location: Remote (US / CAN / UK)

Stage: Pre-revenue, near launch

The Situation: We experienced a massive operational headache, built a working solution, and validated market demand. The platform is 90% complete—we just need a technical leader to audit the architecture, finish the final push to launch, and own tech strategy moving forward.

What We Need:

Full-stack capabilities to jump into an existing codebase and ship code fast.

A builder mindset that prioritizes speed to market over over-engineering.

Location in US, Canada, or UK time zones.

Why Join: Zero ideation purgatory. The runway to market is short, the product is built, and you get a co-founder seat at the table with true equity.

Interested? Send over a brief summary of what you've built and a link to your GitHub or LinkedIn.

Since the server actions shipped with the useActionState, I thought that the useFormStatus simply accessed the pending state of the action, from within the form, acting as an "implicit context".

It appeared to me that way, because I always had 1 action : 1 form relationship. But just last week, I tried a scenario with 2 forms, and noticed that the useFormStatus has its own pending state. This pending state works not just when the form gets an action prop, but also with the onSubmit prop when we call the startTransition there with the action.

So this serves well in cases where some "choice" action can be answered with multiple pre-set answers, e.g. accept/reject follow request.

I love this, because I can define forms with plain JSX, without any onClick event handling...

What about you? Do you use multiple <form>s side by side? Is this an antipattern?

I've been working on an interactive PC anatomy where you can explore a PC in 3D, explode the view to inspect individual components, and learn about each part.

You can also configure the PC with different hardware specs and explore how the setup performs under different workloads.

Built with Three.js and React Three Fiber.

I think this approach could be useful in educational applications to help people learn and understand complex systems faster through interactive 3D visualization.

Note: The performance results are based on collected benchmark datasets, so actual performance may vary depending on the hardware, software, and workload.

Would love to hear your feedback and suggestions on what else I could add!

Live demo: https://playground-demo-dun.vercel.app/pc-anatomy

Playground: https://sakthi-portfolio-mauve.vercel.app/playground

Edit: Guys I know there are certain AI skills to make 3D interactive But it doesn't work for my usecase, I wasted tokens so I manually use opus 5.5 with set of iteration. I'm thinking about working on creating 3D skills if you know some skills exists, please comment.

Hey everyone!

I'm currently learning frontend development and building a Steam-like gaming storefront as a practice project.

I'm using the RAWG API, but I'm having some issues with the data. Important details like full game descriptions, system requirements, and pricing are sometimes missing. I'm also making around 40 API calls, which feels inefficient for a frontend project.

I'm looking for a free API or open-source alternative that provides:

• Game details and full descriptions
• Minimum and recommended system requirements
• Current game prices and discounts
• Game cover images and screenshots
• Genres, ratings, release dates, and platforms
• A reasonable free request limit

Since this is a learning project, I'd prefer something free for personal, non-commercial use.

What API would you recommend for this use case? Is there a good alternative to RAWG, or is there a better way to reduce the number of API calls?

Any suggestions, documentation links, or examples would be really helpful. Thanks!

Built a simple React app to track my outdoor gear and write quick reviews after each trip. Started with a form for brand, weight, and notes, then added a star rating. The problem showed up when I tried to add another item without saving the first one. Every time I typed in the new form, the previous review disappeared. I moved the input handling into its own component with local state, and the resets stopped. Now the reviews stack properly, but the list scrolls back to the top whenever I add one, which is annoying on my phone when I'm adding stuff after a hike. Tried wrapping the list in a memo, but the scroll jump still happens. My wife uses it on the laptop and says the same thing. Anyone run into this with lists that update while the user is still typing?

Hi! I’m the dev behind PostSpark, a tool for creating beautiful image and video mockups of your apps and websites.

I recently launched a new feature: Mockup Animations.

You can now select from 25+ frames & devices, add keyframes on a simple timeline, and export a polished video showcasing your product. It’s built to be a fast, easy alternative to complex motion design tools.

Try it out here: https://postspark.app/templates

I’d love to hear your feedback!

Hey everyone!

I’m curious whether there are any UI component libraries out there that offer genuinely powerful and advanced components, beyond the usual buttons, cards, modals, and dropdowns.

I’m talking about components with rich functionality, complex interactions, deep customization, and features that solve real-world UI challenges without requiring developers to build everything from scratch.

A few things I’d love to hear your thoughts on:

Are there any libraries that offer this level of functionality? If so, which ones would you recommend?

If such libraries are relatively uncommon, why do you think that is?

Is building and maintaining advanced components too time-consuming, is there not enough demand, or are there other reasons?

Why don’t more developers open-source and publish the advanced components they build for their own projects?

I’d love to hear your experiences, recommendations, and thoughts on this. Curious to know what the community thinks!

Currently looking for some empirical feedback / real-world experiences here:

​So far, using AI agents has been working extremely well for us. However, I can't quite tell whether that's due to the architecture we have in place or if all AI projects are simply going like clockwork from now on.

​We are using AI in an application that is about 5 years old and features an extremely solid software architecture that has been well-maintained over the years. The AI rarely runs into problems here and implements new features—thanks to a customized skill—very close to how we would code them by hand.

​In a second project, which I started as a hobby project 3 years ago, it's also working very well. Here, too, I paid close attention to the architecture and didn't let any AI near it until about a year ago. However, the architecture used here is completely different from the first project.

​Does anyone have experience with how projects grow when they were started directly with AI and where architecture wasn't heavily emphasized right from the start?

​By projects, I don't mean small weekend fun projects, but rather larger business applications.

Hey everyone!

Been working on Tip Glide, a small framework-agnostic tooltip library written in TypeScript.

It uses a single shared tooltip that moves between elements and adjusts its size to fit the content. It also handles viewport boundaries, so the tooltip adjusts its position when there's not enough space.

A few things you can configure are the movement, directional lean, hover delays, arrow, and enter/exit animations.

It has zero runtime dependencies and comes with adapters for React, Angular, Vue, Svelte, Solid, Astro and Preact, along with a vanilla JS API.

There's an interactive playground where you can mess around with the settings and see how everything behaves.

Would love some feedback on the movement, especially when switching quickly between elements, but also on the API and anything else that could be improved.

Live demo & playground | npm | GitHub | Portfolio

A dark neon portfolio template built with Next.js, Tailwind and Framer Motion. It’s responsive and looks good on mobile too. Fork it, edit a few config files, and it’s yours.

Free to use. A star helps.

https://github.com/laalaalaee/neonfolio

Your mobile preview clip shows the mobile layout, so that claim is backed. If you do want a score, run Lighthouse in Chrome DevTools on your own deployed site and use the numbers it gives you.

check it out - https://www.shreyashtech.me/components/flow-sidebar

Hey everyone!

I recently designed and developed this website for a client and wanted to share it here.

Would love to hear your feedback on the design, layout, and overall experience.

Stack : React, Tailwind, Gsap, SVG,

Live website: https://www.mechzenautomation.com/

Portfolio: https://sakthi-portfolio-mauve.vercel.app/

Currently open to work.

Hello and thanks for clicking on the post.

I am working on a form that requires a certain type of combobox.

Suppose i have a type ‘T’ which comes from my backend.

We can request the backend to return the records of the same type in two ways:

1. Static records already saved in the database, which are atmost one thousand in number.
2. Forward the request to an external service, which returns atmost 100 records at a time.

I need to design a combobox that groups the two paths and only requests the records from external service when the user wants to.

Here is what i have so far:

‘’’
export default function MyCombobox() {
const database: string[] = [“foo”, “bar”, “baz”];
const [external, setExternal] = useState<string\[\]>([ ]);

return (
<Combobox>
<ComboboxInput placeholder="Make a selection." />

<ComboboxContent>
<ComboboxEmpty>No results found.</ComboboxEmpty>

<ComboboxList>
<ComboboxGroup items={database}>
<ComboboxLabel>Database</ComboboxLabel>
<ComboboxCollection>
{(s) => (
<ComboboxItem key={s} value={s}>
{s}
</ComboboxItem>
)}
</ComboboxCollection>
</ComboboxGroup>

<ComboboxSeparator />

<ComboboxGroup items={external}>
<ComboboxLabel>External</ComboboxLabel>
<ComboboxCollection>
{(s) => (
<ComboboxItem key={s} value={s}>
{s}
</ComboboxItem>
)}
</ComboboxCollection>
</ComboboxGroup>
</ComboboxList>
</ComboboxContent>
</Combobox>
);
}
‘’’

Here i have the type as a string, but my data will have unique ids. The external group will initially be a button that the user may press to request the backend onInputValueChange.

The problem:
The example shown above does not filter the records on input change.

Asking claude just gives me a complete custom combobox with custom state and input management.

How would you implement this cleanly and least custom code.

Thanks for taking the time!

Edit: The original type ‘T’ is just an id with three strings.

I'm working on a React frontend application with a form where some fields are enabled, disabled, shown, or hidden depending on user selections.

The test renders the component, simulates user interactions, and verifies that the form updates correctly (for example, a field becomes enabled only under specific conditions).

How should this type of test be classified?

• Unit test
• Component test
• Integration test
• Functional test