OOratiq

Blog Section

Ready

Post teaser cards.

Engineering

How Oratiq mirrors a whole page with zero conditionals

7 min read
Design

Designing one system for two reading directions

5 min read
Release

81 components: the registry is complete

3 min read

Installation

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

Style 02

Engineering

Mirroring a whole product with zero conditionals

The architecture behind Oratiq's RTL story — logical properties, bidi isolation, and the three glyphs you must never flip.

DesignDesigning one system for two reading directions5 min readRelease98/98: components and blocks, complete3 min readEngineeringWhat tabular figures fix in live UIs4 min read
$ npx @oratiq-js/ui add blog-section-02

Style 03

$ npx @oratiq-js/ui add blog-section-03

Style 04

Engineering

Anatomy of a direction-aware carousel

TRTomás Rivera · 29 Jul
Design

Choosing type that works in four scripts

LHLayla Haddad · 24 Jul
$ npx @oratiq-js/ui add blog-section-04

Style 05

Featured

The billion-reader blind spot in component libraries

Why RTL support keeps failing as an afterthought — and what building it first actually changes.

Release

Blocks now ship in 3 styles per category

Guide

Theming a whole product in one file

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

Style 06

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