@akhatmirzo/ui

All blocks

Ready-made sections to copy into your app: auth, pricing, dashboard, data table and a full app layout.

Blocks are ready-made page sections built from the library's components. Each one is a single self-contained file: it owns its state, uses only @akhatmirzo/* packages and lucide-react icons, and ships with Uzbek copy. Copy the file into your project and make it yours.

All blocks

LoginAuth

Sign in with phone or email and password: remember me, a Google button and an error state.

RegisterAuth

Sign-up form with name, +998 phone, a password strength meter and terms consent.

OTP verificationAuth

Verify a 6-digit SMS code with OtpInput and a useCountdown resend timer.

PricingMarketing

Three pricing cards with a monthly/yearly switch and prices in so'm.

Dashboard statsDashboard

Four KPI cards with sparklines, an AreaChart and a share-by-region list.

Profile settingsSettings

Avatar upload, name, email, phone and RegionSelect — validated with @akhatmirzo/ui/form and zUz.

Data table pageData

Page header, search and filters, DataTable, Pagination and an empty result state.

Checkout summaryCommerce

Cart list, promo code, total in so'm and checkout steps with a Stepper.

App shell layoutLayout

A complete admin layout with AppShell, Sidebar and Header.

How to add a block

Prepare the project

Installs the packages and wires the tokens into your global CSS (see CLI):

npx @akhatmirzo/cli init

Add a block

npx @akhatmirzo/cli add login pricing

Files land in components/blocks/. Or copy the code by hand from the "Code" tab on a block page.

Use it on a page

app/login/page.tsx
import Login from '@/components/blocks/login';

export default function Page() {
  return <Login />;
}

Responsive by container

Blocks respond to their container width (@container), not the viewport: drop one into a narrow column and it switches to its mobile layout. Check it with the desktop / tablet / mobile buttons above each preview, or drag the bottom-right corner.

Toast messages

Some blocks call toast() — render <Toaster /> at the root of your app (Toast).

Hooks

@akhatmirzo/hooks — 27 dependency-free React hooks that are safe during SSR.

Login

Sign-in form with phone or email and password, remember me, a Google button and an error state.