Skip to content

Alex Carpenter

User Interface Engineer at Clerk

Links ¬

Archive of interesting links.

The Founder of The James Brand Everyday Carry Essentials

Been such a big fan of Ryan and what he has done with The James Brand over the years. Very cool to see what he carries and his philosophy.

Building a Multi Brand Design System with Tailwind: Tips, Tricks and Tradeoffs

Magic UI

UI library for Design Engineers built with React, Typescript, Tailwind CSS, and Framer Motion.

Promises From The Ground Up

Migrating from Radix to React Aria: Improving Accessibility and UX

Concise explanations accelerate progress

If you want to progress faster, write concise explanations. Explain ideas in simple terms, strongly and clearly, so that they can be rebutted, remixed, reworked — or built upon.

CSS Triggers

Push and Pull

Emotionally durable design

The Basics

The Cascade

A blog about the past, present, and future of CSS by Robin Rendle.

Johannes Llingebiel's personal website

The Ejection Site

I love highly specific nerdy sites like this. Discovered via Best Made Co. newsletter.

RKRN Bookcase

Nicolas Solerieu's personal website

Alexander Sandberg's personal website

Simone Silvestroni's personal website


A system to organise your life

Kieran Parker's personal website

Write code that is easy to delete, not easy to extend.

Good code is easy to delete.

auto-grid utility

.auto-grid {
  --max-column-width: 100% / var(--auto-grid-max-columns, infinity) - var(--auto-grid-gap);
  --column-width: max(
    min(var(--auto-grid-min-size, 10rem), 100%)
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
  gap: var(--auto-grid-gap-vertical, var(--auto-grid-gap, 1rem)) var(

Animate element's height with grid-template-rows

#TIL you can animate an element’s height with CSS grid.

.disclosure {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease-in-out;
} {
  grid-template-rows: 1fr;

Katherine Yang's personal website


Smart spinner helper for React, to manage the duration of loading states.

The open/closed React component

A component that is based on the open/closed principle, which states that “software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification”.


shadcn/ui compatible react aria components that you can copy and paste into your apps.


A react component that implements the treeview pattern as described by the WAI-ARIA Authoring Practices.

Use Zod to parse env variables

Easing Functions Cheat Sheet

See also Raycast Easings extension.

The Fifty-Fifty Split and Overflow

#TIL about contain: size; CSS

CSS :has() Interactive Guide

Chase McCoy's personal website

Shadow Stack

Linus Rogge's personal website