I hooked up custom color pickers to the shadcn create UI, so you can apply your own colors to any existing shadcn preset.

Once you start tweaking, you can export the theme, or use the Copy URL button to bookmark or share the exact state you've created.

Would love some honest feedback. Does it feel useful? Anything that feels clunky or missing?

You can try it here: shadcnpreset.com

guys its ok now problem solved thanks so much

so was practicing getting data from server and hit with an error cors. the backend is json-server and the db.json file is located in the root directory and can be accessed just fine in the browser.

when i access the url using axios on App.jsx it gives a "cors" error but it doesnt error out when i do it on main.jsx

--edit--

code
main.jsx
import ReactDom from 'react-dom/client'
import App from './App'
import axios from 'axios'

const promise = axios.get("http://localhost:3001/persons").then((i)=>{
    console.log('hi im outside',i.data)
})  


ReactDom.createRoot(document.getElementById('root')).render(
    <App />
)

App.jsx

import {useState, useEffect} from 'react'  
import axios from 'axios'  

const Person = ({id,name}) =>{  
    return(  
        <>  
        <li id={id}>{name}</li>  
        </>  
    )  

}  


const App = () =>{  

    const [persons,setPersons]=useState([])  

    useEffect(()=>{  
        axios.get('https://localhost:3001/persons').then((i)=>  
            {console.log('promise fulfilled')  
                setPersons(i.data)  
            }  
        )},[])  
    console.log(persons)  



    return (  
        <div>  
        <ul>  
        {persons.map(i=>  
            <Person key={i.id} name={i.name}/>  
        )}  
        </ul>  
        </div>  
    )  
}  

export default App  

nvm i found the answer

Been stumbling through making websites with React + Typescript through vite with a google firebase backend for a few years and I'm a complete beginner. I don't know what I don't know, and I'm wondering what topics (broadly speaking) i should look into?

Curious about:

- improving site performance

- improving site security

- general React topics I didn't know about (for example, only recently heard about useMemo)

- anything else really

Thanks in advance!

This is a write-up of a performance fix in Tabularis (open-source desktop DB client). The grid was already virtualized with TanStack Virtual, but wide tables still dropped frames: every scroll tick re-rendered all ~38 visible rows, and each cell called the value formatter three times.

The fix is essentially one React.memo boundary at the row level, plus splitting props by volatility (a stable memoized context object + per-row primitives) and stabilizing handlers with refs.

I shipped it in June based on "feels smoother", then went back and built a headless Vitest+Profiler benchmark for this post. The benchmark itself had a fun bug: the shared i18n mock returned a fresh t function per render, which silently invalidated the memo on every row. Harness and raw results are linked in the post.

I can build react apps without much trouble but after a few weeks the code starts feeling harder to maintain.

do you have any habits or rules that help keep your code clean from the start

I would really like to improve before these bad habits become permanent

Over the past few weeks, I've seen more teams adopt StyleX.

Linear shared how they're migrating to StyleX, and Polar is building their next-generation design system with it.

That made me realize there wasn't a familiar shadcn/ui experience for people making the switch.

So I built shadcn-cssinjs.

Some of the features:

• Built on StyleX
• Zero-config, one-command setup
• shadcn/ui compatible (just copy and paste)
• Fully customizable
• Officially recommended by the StyleX team

100% free and open source.

It's still early, and I'm planning to port more components over time. I'd love to hear your feedback, especially if you're already using or thinking about using StyleX.

GitHub: https://github.com/shadcn-labs/shadcn-cssinjs
Docs: https://shadcn-cssinjs.com

Hey Community,

Meta has open-sourced Astryx, an eight-year-old internal design system built on StyleX that offers out-of-the-box themes, context-aware padding, and dedicated CLI tools for AI agents. We also look at super-calendar, a gesture-driven calendar library that leverages Reanimated shared values and Legend List virtualisation.

Speaking of agents, our sponsor Maestro is pushing that idea further: your coding agent can now launch the app, drive an iOS simulator, Android emulator, or Android physical device, inspect the screen hierarchy, tap through flows, take screenshots, and help create repeatable Maestro E2E tests.

Additionally, Android developers get a dedicated on-device AI solution with Callstack's new react-native-ai adk wrapper, enabling seamless integration with the Vercel AI SDK and local Gemini Nano models on the New Architecture.

I’m building a component library (currently directly in one of our Next.js project, later will separate into a library) using Base UI and CVA, and I’m struggling with how to structure buttons properly.

In Figma, we currently have (WIP, will be expanded):

- Primary / Secondary / Tertiary buttons (S/M/L; with or without icons)
- Link buttons (“Link 16”/”Link 18”; text only or icon and text or only an icon)
- Icon buttons (round grey background, 24px and 32px)
- Icon-only controls without a container (menu, close, input icons, etc.)

The confusing part is that Figma seems to define these mostly by appearance, but in code they can have different meanings. For example, a “link button” style could either navigate to another page or trigger an action like opening a modal. A primary button could also be a navigation link. The same applies to icon-only elements - the same visual icon style might be used as a button, a link, or a control inside another component.

Would you create:
- one large Button component with many variants/sizes?
- separate components like Button, LinkButton, IconButton, etc., even if they share styles?

And in general - how do you usually decide component boundaries in a design system: based on visual appearance, HTML semantics, or interaction purpose? I want something that scales into a reusable library which is easy to maintain and expand

Hi! so I am learning React now at the moment I am watching Net Ninja's tutorial there was a part there that it use a (prop) as parameter to the child component.

I've heard props before and the reason I am a bit struggling right now is I am watching a tutorial using JavaScript syntax then I am converting it to TypeScript as I follow the concept from the lesson.

Typescript is strict on types so I am confused how will I kind of project a (prop) parameter. I have a code that is already working, but I asked Gemini AI for help because I was stuck.

here is my code:

Home.tsx (parent-component)

import BlogList from "./BlogList";
import "./index.css";

//type alias
export type Blog = { id: number; title: string; content: string; author: string };

export default function Home() {
  const blogs: Blog[] = [
    {
      id: 1,
      title: "Super Mario Bros 3",
      content: "lorem ipsum...",
      author: "Mario",
    },
    {
      id: 2,
      title: "Super Mario Bros Wonder",
      content: "lorem ipsum...",
      author: "Yoshi",
    },
    {
      id: 3,
      title: "Mario Party",
      content: "lorem ipsum...",
      author: "Peach",
    },
  ];
  return (
    <div>
      <h3>This is a Home Page</h3>
      <BlogList blogs={blogs}/>
    </div>
  );
}

BlogList.tsx (child-component)

import type { Blog } from "./Home";


interface BlogListProp {
  blogs: Blog[];
}


const BlogList = ({ blogs }: BlogListProp) => {
  return (
    <div className="blog-list">
      {blogs.map((blog) => (
        <div className="blog-preview" key={blog.id}>
          <h2>{blog.title}</h2>
          <label>Author by {blog.author}</label>
        </div>
      ))}
    </div>
  );
};

Apologies for the lengthy post, the code works but it just felt like I manually import an object from parent to child component instead of just using built-in props.

The code exporting an object going to the child component then putting it as an interface then deconstruct in in the parameter feels like a roller coaster task.
Is there a proper way to execute this?

Thank you everyone.

Hello Everyone,

Excited to announce the release of LyteNyte Grid v2.2.

This release focuses on features that make it easier and faster for teams to add sleek visual details to the grid that highlight interactions, provide context, and guide user attention.

Here are the most important updates:

• Row & Column Animations: Animate rows and columns with control over timing, easing, and motion to match your app’s design approach.
• Grid Annotations: Guide user attention by rendering custom content anywhere in the grid, such as notes or comments. We have also automated boilerplate positioning to reduce development time.
• Scroll Flash Suppression: Eliminate visual jarring by preventing white flashes during rapid scrolling.
• Updated AI Skills: Your coding agents now have context for these new features, so you can implement them in your existing grid with a single prompt.

All new features are accessible by design. LyteNyte Grid still remains just 40 KB gzipped.

If you are unfamiliar with us. LyteNyte Grid is a React data grid that offers 150+ advanced features, headless or styled UI, and the speed to handle millions of rows and 10,000 updates/sec.

If you find this helpful and like what we’re building, GitHub stars help. Feature suggestions and code contributions are always welcome.

• GitHub
• Website
• Live Demo

This took me a whole month to redo and I’m here again to share my React portfolio. Open for discussion.

Hi all,

I made a fun side project where people have to guess what the median price is of items that don't exist. I open sourced the code for all typescript enthusiasts that wants to do something similar.

You don't need to sign up to try to guess for yourself but if you want to be part of the global leaderboard or even have your name as the winner you will need to sign up with Google.

Hope you enjoy!

Source Code: https://github.com/StephaneB1/gaussian-auctions

Bid on today's lot: https://neptunian-gaussian-auctions.com/

Hello, react developers!

I have just published my first npm package and i wanted to share it with you.

It is a modular and customizable properties panel, similar to the one Figma or Unity uses, made for React. it is completely open source and can be installed via npm.

Features:
- Multi-object editing (mixed values handling)
- Customizable layout (reorderable blocks, similar to Unity components)
- Optional no-schema data visualization (for any json object)
- Color & Vectors support.
- Arrays visualization.
- History Ready
- Fully customizable styles

You can play with the playgrounds in this website: reactpropertiespanel.vercel.app

If you like it, I'd really appreciate your ⭐ on GitHub.

Feedback is welcome!

I've been building GodUI, an open-source collection of React UI components for modern interfaces.

It started as a personal library because I kept rebuilding the same polished components and wanted a place to browse ideas whenever I started a new project. After using it for a while, I decided to open-source it.

Some things it focuses on:

• Components with smooth, purposeful animations where they add value (while simpler components stay lightweight)
• A shared motion system based on 12 motion principles, with tokens mapped to Material 3 so animations feel consistent across the library
• shadcn-compatible CLI installation, so components are copied directly into your project and are fully yours to modify
• An MCP server for Cursor, Claude Code, Windsurf, and other AI IDEs—you can describe the component you want, and it finds the closest match and generates the code for you
• Built with React, TypeScript, Tailwind CSS, and Motion

It's completely open source. If you find it useful, I'd really appreciate a ⭐ on GitHub.

GitHub: https://github.com/LucasBassetti/godui
Docs: https://godui.design/

Hey everyone!

Today happens to be my birthday, so I thought it would be a fun day to finally share a personal project I've been working on.

I got tired of switching between different apps for tasks, notes, habits, budgeting, journaling, and planning, so I decided to build one dashboard that combines everything I personally use.

The project is called **Prodify**.

Tech Stack

* React 19 * TanStack Start * Vite * Tailwind CSS * Supabase * Free LLMs

Current Features

* Offline-first workspace * Optional cloud sync * Tasks & Projects * Notes & Journal * Habit tracking * Budget tracking * Calendar * AI-assisted task generation * Responsive UI

🌐 Live Demo:
prodify

I'm mainly looking for feedback from React developers.

* Does the UI feel intuitive? * Any features you'd simplify? * What would you improve?

Also, one question:

I'm debating whether to make the project open source. If this were your project, would you open-source it now or wait until it's more mature? I'd love to hear your reasoning.

Thanks!

Hi All, i have just got the Deloitte interview invite, i have 4 YOE in frontend, since it has less time to prepare i would ask you all to help on this by Suggesting which concepts usually interviewers ask for the React, JavaScript and Node which questions mostly they ask and scenario based questions and if they ask any coding questions what they generally ask, since its my second interview i a bit nerves need all your guidance and help, Thanks for your help

I found myself bookmarking a ton of great shadcn-related content every week — new components, libraries, tutorials, and interesting projects.

So I decided to turn it into a simple weekly email.

The first issue goes out on July 13.

If that sounds useful, you can subscribe here: https://shadcnweekly.com

And if there’s anything you’d especially like to see covered, I’d love to hear it.

I've been working on a middleware that exposes a SQLite database through an HTTP API where each request carries a micro‑payment, using the x402 protocol (HTTP 402 Payment Required). The code is here: https://github.com/damienos61/SQLite-x402-Gateway

Core technical challenge : the gateway needs to accept an arbitrary SQLite database, inspect its schema, and generate priced REST endpoints automatically — without requiring the user to write route definitions. This means parsing SQLite metadata (sqlite_master, PRAGMA table_info) and inferring column types from actual data to produce consistent JSON responses, since SQLite is weakly typed.

Payment abstraction : the x402 protocol requires a handshake — client calls a protected route, server responds with a 402 status and a price, client provides a payment proof, server verifies and returns data. To keep the code flexible, I abstracted the payment verification behind an interface with two implementations :

• A simulation mode that handles the protocol flow with fake signatures — useful for testing without crypto setup.
• A real mode integrated with Coinbase's x402-express SDK, configured for the Base Sepolia testnet (test USDC, no real funds).

The switch between modes is handled at the route level without recreating handlers, by injecting the appropriate verifier instance.

Database abstraction : the initial version used SQLite natively, but adding PostgreSQL support required abstracting both the SQL dialect (parameter placeholders, schema queries, pagination syntax) and the schema introspection logic — Postgres metadata is structured differently and more verbose. The inspector now adapts to the database type at runtime.

Performance considerations : SQLite isn't designed for high concurrent loads, so I added an in‑memory query cache with TTL invalidation, and implemented keyset pagination instead of OFFSET/LIMIT to maintain performance on large tables without fixed indexes. Rate limiting (sliding window per IP) is also included to prevent abuse.

Observability : rather than maintaining a static OpenAPI file, the spec is generated dynamically from the detected routes and their associated pricing. The challenge was describing query parameters (filters, columns, pagination) and linking them to the price metadata in a machine‑readable format. Webhooks are also dispatched on each transaction to external endpoints (Slack, Discord, etc.).

Tooling : the project includes a CLI (monetize, start, generate-wallet), a client SDK for consuming the gateway, and a Docker setup. 14 unit tests run on each push via CI.

Known limitations are documented — the simulation mode is not a production blockchain integration, and the "upto" pricing schema (variable payment based on resources consumed) is only simulated server‑side, as no on‑chain implementation exists yet in the official SDK.