Tech Stack

The "Built with" line: a label, then the marks of the tools a product is made with, in two rows — an odd group staggers as three over four, so the smaller row sits between the marks below it. Put related tools in a group — the front end, the services, the tooling — and the strip shows one group at a time, every mark blurring out upwards and the next group blurring in, a beat after the one before it.

It is composed, not configured: a TechStack holds TechStackGroups, and each group holds TechStackTools, so your list of tools never has to take a particular shape. Component Wall takes one in its stack slot.

Built with

Two groups taking turns: seven front-end tools, three over four, then four services. Wait a few seconds for the swap. Names sit beside the marks on wide screens.

TechStackGroup: is one batch of tools, shown on its own. Four to eight read well: an odd count puts the smaller row on top, starting half a slot in, so it sits between the marks below; an even count lines up.
interval3600: is how many milliseconds each group stays. The strip turns only while it is on screen; 0 holds the first group. Under prefers-reduced-motion the swap is a cut.
variant"labelled": is the default: the label on the left and each name beside its mark from xl up; below that the marks show alone, a touch larger.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Tech Stack

npx shadcn@latest add @algorize-ui/tech-stack

components/custom/blocks/TechStackBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Tech Stack to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

icons is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/icons

Examples

Compact

Marks only, the label centred between two hairlines — for a narrow column, like the centred Component Wall.

variant"compact": drops the names from view; each is the mark's tooltip and is still read to screen readers.
icon: is any node. An <img> is sized like an SVG, so map your own data straight into TechStackTool — no reshaping.

One group

A single group holds still — a plain logo strip.

TechStackGroup: used once means there is nothing to turn to, so no timer runs.

Features

Composed, not configured

Groups and tools are elements, so your data keeps whatever shape it has — map it straight into TechStackTool, or write the marks out by hand.

A swap that never jumps

The leaving group is lifted out of the flow where it stood and plays its way out on top, so the new one takes its place at once. Each mark goes a beat after the last, the way a headline word blurs in.

Idle off screen

The groups turn only while the strip is in view, so a footer strip costs nothing until someone scrolls to it. Under prefers-reduced-motion each swap is a cut.

Your theme

The label, hairlines and names read theme tokens; pass a node as label to set it in your own type.

Props Reference

TechStack

Prop	Type	Default	Description
`children`	`TechStackGroup` elements	Required	The groups, shown one at a time in order.
`label`	`ReactNode`	—	The line over the marks.
`interval`	`number`	`3600`	Milliseconds each group stays, while on screen; `0` holds the first.
`variant`	`"labelled" \| "compact"`	`"labelled"`	Label on the left and names beside the marks from `xl` up, or the label between hairlines and marks only.

TechStackGroup

A <ul>; takes TechStackTool children and any list attribute.

TechStackTool

Prop	Type	Default	Description
`name`	`string`	Required	Shown beside the mark (labelled) or as its tooltip (compact); always read to screen readers.
`icon`	`ReactNode`	Required	The mark — an inline SVG or an `<img>`, sized for you.