Skip to content

Alex Carpenter

Staff UI Engineer at Clerk

Grand Rapids, MI.

Notes on engineering, developer experience, design systems, and agentic engineering.

Page 4

  • Open demo in a new tab

    Preserve modal aspect ratio across viewport sizes

    This is one of those that feels like it should be easier than it ends up being, but here is where I landed at to ensure a modal image preserves its 3/2 aspect ratio no mater the viewport width/height.

    .modal {
  aspect-ratio: 3 / 2;
  height: min(calc(100vh - 2rem), calc((100vw - 2rem) * 2 / 3));
  margin: auto;
  position: relative;
}

    See it in action on I Brew My Own Coffee.

  • Open demo in a new tab

    It’s always felt weird using opacity for disabled buttons for situations where its not placed on a solid background.

    In this alternative approach I am using color-mix to create a similar disabled effect without the opacity.

    <button
  class="bg-[color-mix(in_srgb,var(--color-blue-500)_50%,var(--color-background))] text-[color-mix(in_srgb,var(--color-white)_50%,var(--color-background))]"
  disabled
>
  Hello world
</button>

  • My shadcn/ui registry

    ui.alexcarpenter.me

    I’ve been slowly working on my own shadcn/ui registry while learning more about the whole component distrubution setup at work. So far I have the following components:

    • <InfoList />
      A list component with support for items, headers, and icons slots.
    • <InlineText />
      An inline text component with an icon slot that wraps perfectly with the text.
    • <PricingTable />
      A pricing table component with support for monthly/yearly pricing.
  • Open demo in a new tab

    Another use case for absolute positioning elements within inline text to support hanging punctuation.

    Supports varying sizes of text, without the need for custom negative text indent values.

    <p class="relative inline-block">
  <span class="absolute right-full">“</span>Lorem ipsum dolor sit amet
  consectetur adipisicing elit. Iste officia quasi fugiat, dolores ab nam
  repellendus voluptate”
</p>
  • Open demo in a new tab

    Ensure the trailing icon never orphans itself on to a new line. Paired with the icon alignment technique I shared last week to vertically center it.

    <p class="relative inline-block pr-[1.25em]">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia, ducimus
  <span class="absolute ml-[.25em] inline-flex h-[1lh] items-center">
    <Icon name="arrow-up-right" class="size-[1em]" />
  </span>
</p>

    Picked this tip of from John Phamous some time ago.

  • Open demo in a new tab

    How to properly align icons within list items

    My current favorite approach to building bullet proof icon alignment within list items. Ensures icons are always vertically aligned to the first line of text, and ensures the icons do not shrink when text wraps to two lines.

    <ul>
  <li class="flex gap-2">
    <Icon class="h-[1lh] flex-none" name="badge-check" />
    List item 2 that is longer than the others and wraps to two lines
  </li>
</ul>

    With this approach, you can apply a font size to the list item, and the icon will scale accordingly.

  • We shipped a shadcn/ui registry

    clerk.com

    npx shadcn@latest add https://clerk.com/r/nextjs-quickstart.json

    This single command will install:

    • App layout with ClerkProvider and theme integration
    • Sign-in and sign-up pages with catch-all routes
    • Clerk middleware for route protection
    • Header component with authentication buttons
    • Theme provider for dark/light mode support
  • Open demo in a new tab

    For when <mark /> elements wrap to multiple lines, use box-decoration-break: clone; to render each fragment with their own specified border, padding, and margin.

    mark {
  box-decoration-break: clone;
  padding-inline: 0.25rem;
}
  • Open demo in a new tab

    Using background-repeat: round; to get that repeated dot background to fit perfectly across differing viewport widths.

    div {
  background-image: radial-gradient(red 1px, transparent 1.3px);
  background-size: 24px 24px;
  background-position: 0 0;
  background-repeat: round;
}

  • Had a quick chat with Hamed about the recent work we have done to improve the customization of Clerk UI components. Watch it on YouTube.