OOratiq

Features Section

Ready

Feature grid with featured icons.

RTL-first

Logical properties end to end — layouts mirror with zero extra work.

Token-driven

Re-brand every section with one CSS override.

Fast by default

Static-friendly sections with no client JS unless needed.

Accessible

Landmarks, labels, and contrast handled for you.

Dark mode

Every section reads the theme — nothing to wire.

Composable

Built from Oratiq primitives you already own.

Installation

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

Style 02

Logical properties, everywhere

Layouts, borders, and radii are written once and mirror on their own — no rtl: forests, no second stylesheet.

  • ms-/pe- end to end
  • Direction-aware keyboarding
  • Bidi-safe numbers and codes

One token layer, any brand

Primitive ramps feed semantic roles feed utilities. Your rebrand is a CSS override that every block obeys instantly.

  • Light and dark from the same tokens
  • Radius scale from one variable
  • Native controls follow color-scheme
$ npx @oratiq-js/ui add features-section-02

Style 03

RTL-first

A billion readers, one codebase. Logical properties do the mirroring.

Token-driven

Rebrand with one override.

Dark by design

Surface-lift elevation, not heavier shadows.

Copy-in ownership

The CLI writes files into your repo — edit anything, keep everything.

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

Style 04

  1. 01

    Install the system

    One command writes the tokens, providers, and helpers into your repo.

  2. 02

    Compose your pages

    Components and blocks snap together — dark mode and RTL ride along.

  3. 03

    Ship every locale

    Flip dir per locale route. That's the whole migration.

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

Style 05

Everything in the box

  • 81 primitives
  • 51 marketing sections
  • Radix behaviour
  • Tailwind v4 tokens
  • Dark mode built-in
  • RTL built-in
  • Copy-in ownership
  • MIT license
  • CLI with dependency graph
  • llms.txt for agents
  • A11y contracts per component
  • Zero physical direction classes
$ npx @oratiq-js/ui add features-section-05

Style 06

RTL is the headline act

Logical properties, bidi isolation, mirrored glyphs, direction-aware keyboarding — measured at zero physical classes, not promised.

Token theming

One override, whole system.

Copy-in code

Your repo, your rules.

Agent-ready

llms.txt ships the conventions.

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