OOratiq

Hero Section

Ready

Headline, sub, and CTA pair.

Now with RTL, out of the box

Launch pages that read both ways

Production-ready marketing sections on Oratiq — copy in, wire your content, ship to every locale you serve.

Installation

$ npx @oratiq-js/ui add hero-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 { HeroSection } from "@/components/blocks/hero-section";

Style 02

New · Blocks are free

The design system that ships in every locale

98 components and sections on Radix + Tailwind — RTL, dark mode, and accessibility included, not promised.

  • One command install
  • Your repo, your code
  • MIT licensed
Weekly goal

↑ Real Oratiq components — this panel is the product.

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

Style 03

Build once.
Read everywhere.

npx @oratiq-js/ui init
components & blocks
98
directions
2
lock-in
0
$ npx @oratiq-js/ui add hero-section-03

Style 04

v0.2 is out

Interfaces without borders

98 components and sections that render beautifully in every language your users speak — including the ones that read right-to-left.

$ npx @oratiq-js/ui add hero-section-04

Style 05

Product tour

See the whole system at a glance

Docs, registry, and CLI — one pipeline from install to production.

ui.oratiq.com
$ npx @oratiq-js/ui add hero-section-05

Style 06

Join the waitlist for Oratiq Cloud

Hosted registries, team theming, and preview deploys for your design system.

LH
TR
AC
NP
+2136

2,140 already in line

$ npx @oratiq-js/ui add hero-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/hero-section.tsx