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- TopClass UI
- Overview
- Components
- Icons
- Themes
- Settings
Components
46 components, 3 kinds
Showing 1 to 7 of 46
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
PaidIssued 12 Sep 2026
1,240.00 SAR
client - DialogThe solid border marks what renders on the server.
- Renders on the server
- 0 KB
- Runs in the browser
- size not measured yet
The component tree
IconCardBadgeSeparatorButtonDialog
5 server, 0 KB each · 1 client
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
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.
- 2826 pages checked by axe
- 2826 pages measured for 24 px targets
- 2826 pages checked for a visible focus ring
- 390 color pairs held to AA contrast
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"Dark
data-theme="dark"Ocean
data-theme="ocean"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.
- ServerButton
- SplitTag
- ServerKbd
- ClientSegmentedControl
- ServerInput
- SplitTextarea
- ClientSelect
- ClientCombobox
- ClientCheckbox
- ClientRadioGroup
- ClientSwitch
- ClientSlider
- ClientNumberField
- ClientOtpField
- ClientDatePicker
- ClientFileUpload
- SplitRating
- ServerBadge
- SplitAvatar
- ServerAvatarGroup
- ServerCard
- ServerSeparator
- ServerSkeleton
- SplitCodeBlock
- SplitTable
- ClientTreeView
- ServerTimeline
- ServerStepper
- ServerAlert
- ClientToast
- SplitBanner
- ServerProgress
- ServerSpinner
- ServerEmptyState
- ClientDialog
- ClientDrawer
- ClientPopover
- ClientTooltip
- ClientDropdown
- ClientCommand
- SplitNavbar
- SplitSidebar
- SplitTabs
- SplitAccordion
- ServerBreadcrumb
- ServerPagination
Install
One import per component
Install the package once, then import only the components you use.
Import from the package
import { Button } from 'topclassui/button'Import only what you use. Nothing else ends up in your bundle.
npm i topclassui@beta zodWhat you need
Three things, current versions
If your project runs these, it runs TopClass UI.
- 15+Next.jsApp Router. Server components and Server Actions come from here.
- 19+Reactref is an ordinary prop and a form takes an action. Nothing older works.
- 4.2+Tailwind CSSConfigured in CSS with three import lines. No config file.