Introduction

What it is

The building blocks are here - buttons, inputs, modals, tables, menus - next to the pieces most projects keep putting off: a command palette, date and time pickers, carousels, file uploaders, text effects, backgrounds.

Everything is typed, animated where movement helps, and works in light and dark from the start. Components are plain React with Tailwind classes, so they behave the same in Next.js, Vite or Remix.

New components land regularly.

Made to be changed

Most components ship with variant, size and similar props, so the common cases are already covered. Past that, every component takes a className that is merged through cn, a small helper built on clsx and tailwind-merge.

Merging matters: tailwind-merge resolves conflicts in your favour, so passing rounded-full replaces the component's own radius instead of fighting it in the cascade. No !important, no wrapper div, no specificity games.

import { Button } from '@/components/stepwise/button'

// props for the common cases
<Button variant="solid" size="lg">Save</Button>

// className for everything else - tailwind-merge lets these win
<Button variant="solid" className="rounded-full px-8" />

And when a prop and a class are not enough, the file is in your project. Open it and change whatever you need.

Squircle corners

Every rounded surface in Stepwise uses a squircle rather than border-radius. A CSS radius is a circular arc, so curvature jumps from zero to full the moment the corner starts. A squircle is a superellipse: the curve eases in from the flat edge, which is what makes iOS icons and hardware look smoother than a plain rounded rectangle.

The math is handled by Lisse, an MIT-licensed library by JaceThings that generates the clip-path for smooth corners. We use its SmoothCorners component through a small internal wrapper called Surface, which sets our defaults and passes everything else through:

import { SmoothCorners } from '@lisse/react'

export const Surface = forwardRef<HTMLDivElement, SurfaceProps>(({
  radius = 12,
  smoothing = 0.6,
  corners,
  ...rest
}, ref) => (
  <SmoothCorners corners={corners ?? { radius, smoothing }}>
    <div ref={ref} {...rest} />
  </SmoothCorners>
))

Smoothing is 0.6 across the library.0 is an ordinary circular corner and 1 is fully continuous; 0.6 is close to Apple's value and reads as intentional without looking soft. Components accept radius and smoothing, or a corners object when corners need to differ from each other.

@lisse/react is installed automatically with the first component you add. If corners ever render square, that install is usually the reason.

Where this is going

This is the first thing Stepwise Studio has put out in the open, and it came from the obvious place: we kept rebuilding the same components across client projects. More tools are coming from that same place, each one meant to stand on its own and to work well next to the others.

Stepwise UI is MIT licensed and stays that way. Issues and pull requests are welcome on GitHub, and if you build something with it we would like to see it.

Where to go next

Quick Start gets a project configured and a component on screen. CLI covers the commands and flags in full. Otherwise, pick anything from the sidebar - each component page has a live preview and its source.