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

    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">
    <span class="flex h-[1lh] items-center">
      <Icon class="size-[1em] flex-none" name="badge-check" />
    </span>
    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.

  • Your component library ships bundled CSS via CSS-in-JS. You want folks to opt in to being able to toggle between light/dark mode but you don’t know how they are handling toggling between light/dark.

    Use CSS var toggle hack?

    /* Component library styles */
:root {
  --dark-mode: ;
}

button {
  padding: 1rem;
  background-color: var(--dark-mode, white) black;
  color: var(--dark-mode, black) white;
}

/* User styles turn on dark mode */
.dark {
  --dark-mode: initial;
}

@media (prefers-color-scheme: dark) {
  :root {
    --dark-mode: initial;
  }
}

    This gives the user the ability to enable dark mode based on how they have their app configured. @⁠media query, class, data-attr, etc.

    They can even be very targeted on which components this is enabled for.

  • Agentic Engineering

    zed.dev

    Software development is changing and we find ourselves at a convergence. Between the extremes of technological zealotry (“all code will be AI-generated”) and dismissive skepticism (“AI-generated code is garbage”) lies a more practical and nuanced approach—one that is ours to discover together.

  • Clerk CSS variables are now available!

    clerk.com

    Theme your Clerk components directly from your CSS files where your design tokens live – no more CSS-in-JS required.

    :root {
  --clerk-color-primary: #6d47ff;
}

    We learned from our own experience: the variables appearance option had limited adoption because it was hard to integrate with existing design systems. Even we had to use workarounds with elements prop + Tailwind classes in our dashboard.

    Now you can theme components where your tokens are already defined. Plus we’ve improved variable naming and added new ones like colorRing, colorMuted, and colorShadow for more flexible theming.