OOratiq

Metrics Section

Ready

Big-number stats band.

81

components shipped

2

writing directions

40+

countries served

99.9%

uptime

Installation

$ npx @oratiq-js/ui add metrics-section

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { MetricsSection } from "@/components/blocks/metrics-section";

Style 02

Weekly installs

12,480+18.2%

vs. last week

GitHub stars

4,912+6.4%

vs. last week

Teams in production

320+9.1%

vs. last month

$ npx @oratiq-js/ui add metrics-section-02

Style 03

Teams stop fighting direction and start shipping

Numbers from teams that moved their marketing and product UI onto Oratiq.

48 hrs
median time to first shipped page
-92%
RTL bug reports after adopting
4.9/5
developer satisfaction
$ npx @oratiq-js/ui add metrics-section-03

Style 04

Where the project stands

Component coverage100%
Docs with live demos100%
A11y contracts written92%
Figma parity40%
$ npx @oratiq-js/ui add metrics-section-04

Style 05

12k+

weekly installs

136

registry items

40+

countries

0

physical classes

$ npx @oratiq-js/ui add metrics-section-05

Style 06

100

Lighthouse a11y

100

RTL coverage

96

Bundle discipline

$ npx @oratiq-js/ui add metrics-section-06

What a block is

  • A full section, composed from the components in the sidebar — copy it in, replace the demo content, ship.
  • Every style is its own registry item: the command under each preview installs exactly that file.
  • Blocks read the same semantic tokens as everything else — your brand override applies instantly.
  • Logical properties throughout: flip dir on <html> and any style mirrors.

Content is yours

The text, links, and data inside are demo content by design. Blocks are starting points, not configurable widgets — edit the file directly.

View source on GitHub → components/blocks/metrics-section.tsx