Jamal Rasool

Is Radix UI fading out in shadcn/ui? That’s the big question after a recent post by shadcn, and yes, Radix UI isn’t evolving like it used to. Its core maintainers have shifted focus to Base UI. But let’s be clear: Radix isn’t being removed. It’s being respected. This isn’t about obsolescence, it’s about maturity. Why does Radix UI still matter? Radix hit a milestone that many libraries never reach: it became complete. Over the past few years, it’s set the gold standard in headless UI primitives: • Accessibility-first: WCAG-compliant from the start • Keyboard + screen reader support out of the box • Unstyled components: ready for full design system control • Battle-tested in production by Vercel, WorkOS, Linear, Supabase, and more It’s always good to use libraries that are actively maintained for more modern and robust functionalities. But Radix already solves most of the hard problems very well and that’s exactly why shadcn/ui keeps it at the core. #ReactJS #shadcnui #RadixUI #FrontendDevelopment #HeadlessUI #DesignSystems #WebAccessibility #UIUX #ComponentLibraries #WebDev #BaseUI #Ariakit #TailwindCSS #ReactComponents #DevTools #CleanCode #FrontendArchitecture #BuildBetterUIs #OpenSource #TechStack

33

17 Comments

Week 2 building Atomica with Claude Code. Last week was AI color generation. That was just one piece. This week, the plugin handles the full color system, not just primitives. The user starts with primitives (AI, Tailwind, or manual) and can fully shape them before moving forward: tweak range of grades, adjust colors, rename, clean up. Once the base is solid, the user moves into mapped tokens: Alias, Semantic, Component-specific, or Custom. Start from scratch or use a quick preset. Documentation now generates across all collections. DTCG JSON exports too, ready for Tokens Studio or Style Dictionary. Rebuilt the color picker, added drag & drop, and cleaned up the architecture. Full pipeline works: Primitives → Mapped → Docs → JSON. It’s starting to feel like a real system builder 🙂 #BuildingInPublic #DesignSystems #DesignTokens #Atomica #ClaudeCode

59

3 Comments

Finally! 🎉 A UI library for Phoenix! One of the biggest complaints about Elixir and Phoenix was the lack of a robust UI library for LiveView. Well, not anymore! With Phoenix 1.8+, Daisy UI is officially included. This means you now have access to amazing components like calendars, dropdowns, and sidebars – previously almost exclusive to React & Shadcn. Curious how this changes the game for Phoenix development? Let's dive in! 👇 https://lnkd.in/d5Q-UcVj

41

4 Comments

Quick Switcher Interaction ⎯⟡° Crafted this macOS app interaction as part of my ongoing SwiftUI interaction explorations. If you haven’t seen my previous ones, you can check them out here: https://lnkd.in/gezCgtKi I used Figma for visual design and SwiftUI for micro-interaction, blending design precision with real-time motion. Every time I build with SwiftUI, I’m amazed by how simple modifiers can control intricate motion details and produce fluid, natural interactions. If you’re a designer curious about crafting such interactions without prior coding experience, here’s a simple roadmap to get started — • Basic Property Types (String, Int, Double, Array, Tuple) • Structs & Data Models • Custom Property Types • Conditionals & Functions • Working with Views (Text, HStack, VStack, ZStack) • States & Bindings • Transitions and Animations • Navigation & Built-In Components (Optional*) 💡 Pro tip: Use GenAI to quickly debug or experiment while learning. It won’t build your app, but it’ll help you untangle complex logic and move faster. If all this feels overwhelming — start small and keep going. I truly believe the future of prototyping is code + GenAI.

97

4 Comments

Unsolicited pro tip : Reading those detailed "game deconstruct flowchart" figma resources done by other people is only useful if you also PLAY the games yourself and experience them directly. You cannot do game design leaning on book knowledge. There is no substitute for direct experience. There are NO shortcuts. Play your own game obsessively. Play other games obsessively. There is no other way

72

11 Comments

Why Do Interviewers Love This Portfolio Structure? 🤔 If you’ve ever applied for front end roles, you know interviewers see so many portfolios. A lot of them show flashy UIs or random projects, but without real context or structure, they just don’t stick. What does stand out? Portfolios that show you think like a pro. Here’s what interviewers actually look for: 1. Clear, Scalable Architecture 🏗️ They want to see that you don’t just throw code together, you build maintainable, modular systems with clean architecture. That means thinking about boundaries, dependencies, and growth potential. 2. Real-World, Production-Ready Projects 💡 It’s not just about pretty demos. Interviewers want proof you can tackle real problems, integrating APIs, creating reusable libraries, optimizing performance, and making sure everything’s accessible and responsive. 3. Technical Breadth and Depth 🧠 Show off your skills clearly, from frameworks like React or Vue, to testing tools, deployment of pipelines, and beyond. This tells interviewers you’re ready to jump in and contribute. 4. Built With Purpose: Quality, UX, Accessibility, Performance 🎯 Good code isn’t enough. They want clean, fast, user-friendly, and accessible projects. Highlighting this mindset shows you share their standards. 5. Easy Access and Transparency 🔍 Live demos, public GitHub repos, solid docs, and case studies make it easy for interviewers to review your work quickly and confidently, a huge plus when they’re juggling dozens of candidates. Bottom line: This kind of portfolio isn’t just a showcase, it’s your professional mindset on display. It tells interviewers you’re ready for real-world challenges and can contribute from day one. 💪✨ Start building projects with GreatFrontEnd for your portfolio today! 👉https://lnkd.in/g5R479dS What’s the biggest challenge you face when structuring your front end portfolio? Drop your thoughts below, we’d love to hear! 👇 #frontenddevelopment #webdevelopment #ReactJS #JavaScript #FrontendInterview

128

2 Comments

Flexbox or Grid? 🤔 Flexbox works in one direction, but Grid works in two. With #Divi5’s CSS Grid, you can align rows and columns at the same time, creating layouts that stay perfectly balanced no matter the screen size.

5

1 Comment

Don't be perfect. 💅 Was what I told myself on my first project with AI coding tools. Why? because I know pixel perfect would hold me back from learning, which really was the point as a designer - learning these tools. If you are getting frustrated or stuck as a designer in these tools, I recommend not trying to get the UI down on your first idea. I built this project for myself but you can indeed sign up and use the PWA (progressive web app) yourself. Just click the share button when in the browser, scroll "add to homepage" and you have an "app." I do fully understand it is not the same as fully native app but for testing waters and expierence, not bad. https://lnkd.in/eR37Qy_m

11

shadcn is seriously one of the best things to happen to the front-end ecosystem. I always felt like fully-fledged component libraries were too limited. They work fine for prototyping or getting something out the door quickly; but they're also extremely hard to customize when trying to implement a bespoke design. shadcn/UI strikes the balance perfectly: giving you accessibile building blocks right out of the gate, with an opinionated layer of styling, but with the flexibility to change whatever you need as you actually own the code. Such a beautiful abstraction 👌

199

21 Comments

⚠️ 𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼 won't save you if your props are new every render ⚛️ Wrapping a child with 𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼 only helps when the prop references stay the same between renders. This way, the child can skip re-rendering even if its parent re-renders, as long as its own props and state are stable. But if you pass freshly created objects, arrays, or inline functions on every render, React sees them as new references → the child re-renders anyway. In that case, 𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼 is basically useless. 😬 𝗤𝘂𝗶𝗰𝗸 𝗳𝗶𝘅𝗲𝘀: 🧠 Use useMemo for objects/arrays you pass down. 🔁 Use useCallback for functions you pass down. ⚖️ Don’t memoize blindly, measure first. Memoization has runtime cost; use it where renders are frequent/expensive. 🔎 Remember: 𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼 does a shallow compare; it checks references, not deep equality. 𝗧𝗟;𝗗𝗥: new object/function = new reference = re-render. Keep props stable when you expect 𝗥𝗲𝗮𝗰𝘁.𝗺𝗲𝗺𝗼 to work. 🚀 #React #Performance #Frontend #WebDev #ReactTips

39

2 Comments

A few designers asked me how to get started coding and prototyping in Cursor and Claude. I feel like three things are important but seldom talked about: 1) Learn Git (with a GUI like SourceTree or GitKraken) I use GUI tools to make Git less scary. It lets you save every exploration and experiment safely. Being able to see commits, branches, and merges gives you a real workflow for trying ideas, comparing versions, and throwing away bad experiments without fear. 2) Learn the terminal Not to become an engineer. Just enough to set up projects, run them, install tools like Next, Shadcn, Claude Code, libraries, icon packs etc and fix things when they break. 3) Deploy to something like Vercel So you can send links of your explorations to teammates and let them click around the prototypes. Once you have these three, vibe coding stop feeling transient and fragile and start feeling like a real prototyping workflow. They are not flashy, but they are what makes design iterations in code not feel scary.

76

6 Comments