Web app · Component library · 2026

Ahmed Picks

A curated gallery of UI components with code, prompts, and install commands.

Dark navy hero section with the headline "The best UI components, hand-picked for you" and an electric-blue radial glow

Role: Design + Engineering
Timeline: Ongoing · 2026
Stack: Next.js 16 · Tailwind CSS 4 · shadcn/ui · i18next

Problem

Every good UI starts with a reference. Finding one shouldn't take twenty tabs.

Developers building dark-themed Next.js apps spend real time hunting for components that match their aesthetic. The good ones are scattered across Dribbble, X, and GitHub repos, and rarely come with usable code.

Ahmed Picks is a personal catalogue of components worth keeping: heroes, navbars, cards, pricing tables, animations. Each entry comes with a working code snippet, an AI prompt you can drop straight into a chat, and a shadcn install command for the components that map cleanly onto the library. The site itself is built with the same stack it showcases.

Ahmed Picks hero with floating pill navbar and electric-blue glow on dark navy background — The hero demonstrates what the site is about. The floating pill nav and the radial blue glow are themselves picks in the catalogue.

Decisions

The catalogue is the product, not the wrapper around it.

Early drafts had a separate landing page and a separate picks index. We collapsed them: the homepage scrolls straight into the component list. That decision removed one navigation decision for the visitor and let the UI do the selling immediately. Each pick card carries a category tag, a gradient preview, a copy-ready code block, and an AI prompt, four distinct ways to extract value from one entry, none of which require sign-up.

Ahmed Picks dark navy hero with pill navigation and electric blue glow — Hero: dark navy with an electric-blue radial glow.

Ahmed Picks blog index with a single card showing the welcome post — Blog: markdown posts alongside the component picks.

Ahmed Picks blog post detail showing markdown-rendered content — Post detail: markdown-first, no CMS overhead.

Ahmed Picks full mobile view showing component list with category filters and gradient previews — Mobile: the full catalogue, filterable by category.

The catalogue in motion: hero, full component list, blog, and post detail.

Outcome

8+: Curated picks at launch
6: Component categories
Free: No sign-up required

Ahmed Picks is a living reference: new components get added when something genuinely earns a place in the catalogue. The constraint (only what's actually reusable, with working code) keeps the quality bar honest. The next addition is a filterable tag system so visitors can narrow by visual style as well as category.

Back to Work