Top-class UI.Built for Next.js.

Premium components that help you build faster. Server-first on React 19 and Tailwind CSS v4, in English and Arabic from the same code.

npm i topclassui@beta zod

Read the docs Star on GitHub

v0.1 beta is on npm. Read the docs to get started.

TopClass UI
Overview
Components
Icons
Themes
Settings

Components

46 components, 3 kinds

Components
Component	Name	Client JavaScript	Status	Updated
`button`	Button	0 KB	Server	Oct 2026
`select`	Select	19.1 KB	Client	Oct 2026
`date-picker`	DatePicker	19.7 KB	Client	Oct 2026
`input`	Input	0 KB	Server	Oct 2026
`tag`	Tag	16.9 KB	Split	Oct 2026
`table`	Table	15.9 KB	Split	Oct 2026
`dialog`	Dialog	16.7 KB	Client	Oct 2026

Showing 1 to 7 of 46

Button added to your project

npx topclassui add button

Every piece of this screen is a component from the library, showing the library itself.

What makes it different

Three things you get from day one

Every example on this page is a real component. Each one has its own page in the docs.

Less JavaScript

5 of the 6 components in this card add no JavaScript to your page. Only the dialog does.

Invoice TC-2041

Paid

Issued 12 Sep 2026

1,240.00 SAR

client - Dialog

The solid border marks what renders on the server.

Renders on the server: 0 KB
Runs in the browser: 16.7 KB gzipped

The component tree

Icon
Card
Badge
Separator
Button
Dialog

5 server, 0 KB each

1 client

How the size is checked

size-budget.json

{
  "kb": { "overlay": 14 },
  "components": { "dialog": "overlay" }
}

Every client component has a size budget. pnpm size --check fails the build when one goes over it, so the number on the chip cannot quietly drift.

Arabic, built in

The same form in English and in Arabic. Layout, icons and digits mirror on their own.

dir="ltr"

dir="rtl"

Every demo, 6 pages
	Light	Dark	Ocean
ltr	checked	checked	checked
rtl	checked	checked	checked

3 modes x 2 directions, checked in a real browser.

Caret and arrow icons flip; the magnifying glass does not. The components use logical utilities such as ps-, pe-, inset-s- and text-start, never left or right.

Tested, not promised

Every gate runs before a release, in a real browser, on every demo of every component.

3054 pages checked by axe
3054 pages measured for 24 px targets
3054 pages checked for a visible focus ring
390 color pairs held to AA contrast

The commands that run them

terminal

# in a clone of the repository
pnpm install

# axe, 24 px targets, focus ring
pnpm test:e2e

# 390 color pairs, AA in every mode
pnpm check:contrast

# every gate, in order
pnpm check

Each number above is counted from the library when this site is built, so it cannot drift from what the gates check.

Theming

Light, dark, or your own

A theme is one small CSS block. Switch modes, or add your brand colors, without touching a component.

Light

data-theme="light"

PaidPendingOverdue

Weekly digest

Dark

data-theme="dark"

PaidPendingOverdue

Weekly digest

Ocean

data-theme="ocean"

PaidPendingOverdue

Weekly digest

Same components, three themes.

By the numbers

What is inside

Everything counted, nothing rounded up.

46components
84icons, 16 flip automatically in Arabic
6pages per demo, across every mode and direction
0 KBJavaScript added by a server-rendered component

The catalog

46 components, one consistent layout

Each chip carries a badge. S renders on the server and adds no JavaScript. C runs in the browser. Sp renders on the server with one small interactive part.

One handle, everywhere

@topclassui on GitHub, YouTube and X. Star, subscribe or follow, and you will hear the moment a new version ships.

GitHub
@topclassui
Star the repository, read the source and open issues.
Star on GitHub
github.com/TopClassUI/topclassui
YouTube
@topclassui
Short videos on how each component is built.
Subscribe
youtube.com/@topclassui
X
@topclassui
Release notes, previews and answers.
Follow
x.com/topclassui

Install

Copy the source, or import the package

Copy a component into your project and edit it, or install the package and import it. Same component either way.

Copy the source

npx topclassui add button

The component and its files are copied into your project, ready to edit.

Import from the package

import { Button } from 'topclassui/button'

Import only what you use. Nothing else ends up in your bundle.

What you need

Three things, current versions

If your project runs these, it runs TopClass UI.

15+
Next.js
App Router. Server components and Server Actions come from here.
19+
React
ref is an ordinary prop and a form takes an action. Nothing older works.
4.2+
Tailwind CSS
Configured in CSS with three import lines. No config file.