Stack

UI, Data & Forms

The libraries I reach for once the framework is set, building interfaces, fetching data, handling forms and validation, and adding animation.

UI Libraries

TailwindCSS

- A utility-first CSS framework. It’s easy to pick up and makes building UIs super fast.

HeadlessUI - UI Components built with Tailwind. Really useful for dropdown menus.

shadcn/ui - When I need a UI component I don’t want to build myself I go here first. Lots of great ones that are easy to integrate with.

Radix UI

- The primitives layer under most of my shadcn components. Unstyled, accessible, and handles all the keyboard/focus edge cases I don't want to build myself.

Lucide Icons

- Clean, consistent icon set that pairs naturally with shadcn/ui. Covers 95% of what I need without hunting for a custom SVG.

React Icons

- A broader icon set I reach for when Lucide doesn't have what I need, mainly brand and social icons.

Animation

Framer Motion

- My go-to for page transitions and micro-interactions. Makes an interface feel finished instead of just functional.

GSAP

- For animations that need more control than Framer Motion gives me, especially scroll-based or timeline-heavy sequences.

Data Fetching

GraphQL

- When a client's backend exposes it, this is my default over REST. Fetching exactly what I need without over-fetching matters a lot on bigger apps.

TanStack Query

- Handles caching, refetching, and loading/error states for API calls so I'm not reinventing that logic on every project. Pairs well with GraphQL and REST both.

Forms & Validation

React Hook Form

- My default for any form beyond two inputs. Minimal re-renders and it plays nicely with schema validation.

Zod

- Schema validation on the frontend, usually paired with React Hook Form. TypeScript inference out of the box is the main reason I reach for it over alternatives.

Joi

- Validation on the backend side when I'm working inside a Node.js project. Different tool, same job as Zod, just server-context.

Data Visualization

Recharts

- For dashboard analytics, stats views, and anywhere I need to turn numbers into a chart without building SVG visualizations from scratch.

Internationalization

next-intl

- Handles routing and translations together for Arabic/English projects, which matters a lot given who I build for.