Skip to content

Open source. Yours to build with.

Good interfaces.
Even on a bad day.

210 React components for slow connections, different languages, and people who navigate by keyboard. Copy the source. Make it yours.

Explore components Get started

One command. Source in your project.

npx shadcn@latest add https://gear5-ui.vercel.app/r/async-boundary.json

React + Tailwind CSSMIT licensedNo extra runtime packages

playground.tsx

Live component

Try a different state

Your workspace

  • Review the first draft
  • Make room for every language
  • Ship something useful

1,234,567 visitors this month

A local simulation. Change the state or language to see the actual component respond. No requests are sent.

Built with AsyncBoundary

Built for the states between the happy paths.

01 / Accessible02 / Locale-aware03 / Source-owned

Start with a real problem

The little details.
The difference people feel.

All 210 components

Break it. Then recover.

A failed request should not mean starting over.

Type a sample answer, choose a response, and submit. See what happens to the draft when the connection drops or a session expires.

Recovery lab

A local simulation. No application or email is sent.

Draft will save as you type
Choose a response

An interrupted request is intentionally not labelled “failed”. The server may have received it, so the product must check before retrying.

Use made-up details. This demo saves them in this browser.

Try typing here, then refresh the page to restore this draft.

Do not enter sensitive information.

Read the ResilientForm docs

Beyond English defaults

Same value. Different context.

These examples compare a simple formatting shortcut with a locale-aware component. Both sides are computed in your browser.

CompactNumber

हिन्दी

A K/M/B ladder is not how most of the world shortens numbers. India groups by lakh and crore; Japan and China group by ten-thousands.

Formatting shortcut

1.2M

`${(n / 1e6).toFixed(1)}M`

CompactNumber

12.3 लाख

compact-number

BidiText

العربية

A right-to-left name next to a number pulls the number to the wrong side of it. Here the naive version renders the reply count before the name instead of after. The sentence reads backwards, and only for users with RTL names.

Formatting shortcut

إيان - 42 replies

<span>{name} - {n} replies</span>

BidiText

إيان - 42 replies

bidi-text

SortableTable

Deutsch

Array#sort compares UTF-16 code points, not letters. Accented names file after Z, and lowercase files after uppercase.

Formatting shortcut

Zebra · apple · Ångström · Élodie

names.sort()

SortableTable

Ångström · apple · Élodie · Zebra

sortable-table

CurrencyField

Deutsch

parseFloat on a German-formatted amount silently truncates at the thousands separator. Twelve hundred euros becomes one euro twenty-three.

Formatting shortcut

€1.23

parseFloat("1.234,56")

CurrencyField

1.234,56 €

currency-field

Check the receipts

Source you can read.
Checks you can run.

Size budgets, accessibility fixtures, SSR, and source scans run in CI. Your application still needs testing with its own content and users.

View CI results

  • Bundle budgets

    Every registry item is bundled and gzipped against its declared size ceiling.

    Read the tests ↗

  • Accessible fixtures

    Each documented component fixture is rendered and checked with axe.

    Read the tests ↗

  • Server rendering

    Component fixtures are rendered with react-dom/server to catch browser-only assumptions.

    Read the tests ↗

  • Locale behaviour

    Tests cover direction, calendars, numerals, and locale-aware form handling.

    Read the tests ↗

The collection

Find your next building block.

210 components · 8 categories

A few good questions

Before you install.

Need something else? Open an issue.

Is Gear5 UI free for commercial projects?

Yes. The source is MIT licensed, including commercial use. Keep the copyright and licence notice with copies or substantial portions of the software.

Is this a package I need to keep upgrading?

No. The shadcn CLI copies the component and its shared helpers into your project. You own those files and choose which future changes to adopt. React, React DOM, and Tailwind CSS are prerequisites.

Does it work outside Next.js?

The registry components do not import Next.js. They are React source files styled with Tailwind CSS. This documentation site uses Next.js, but your application does not have to.

Do components translate themselves?

LocaleProvider controls formatting and writing direction where a component supports them. You supply translated labels and application content. Changing a locale is not an automatic translation service.

Will forms submit automatically when I reconnect?

No. ResilientForm preserves permitted drafts locally and asks the user to submit again. Reliable background delivery and duplicate prevention need an application-owned queue and an idempotent server endpoint.

What should I test before shipping?

Test your own content, labels, keyboard flows, screen readers, target browsers, and server integration. The library's automated checks are a useful baseline, not an accessibility certification or a guarantee about your complete application.

Your source. Your next idea.

Take one. Build something.

No account, no subscription. Just code in your project.

npx shadcn@latest add https://gear5-ui.vercel.app/r/async-boundary.json
Installation guide