Header Section
ReadyCentred intro for a page or section.
Features
Everything you need to ship worldwide
One codebase, two directions, four themes — without a single conditional in your markup.
Installation
$ npx @oratiq-js/ui add header-sectionCopies 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 { HeaderSection } from "@/components/blocks/header-section";Style 02
Changelog
What's new
Every release, with migration notes where they matter.
$ npx @oratiq-js/ui add header-section-02Style 03
Engineering
Mirroring an entire product with zero conditionals
Ahosan Habib31 Jul 20267 min read
$ npx @oratiq-js/ui add header-section-03Style 04
How can we help?
Guides, references, and answers — searchable.
$ npx @oratiq-js/ui add header-section-04Style 05
Guides
Everything about theming Oratiq
Ramps, roles, radii, and the one rule that keeps rebrands to a single CSS file.
$ npx @oratiq-js/ui add header-section-05Style 06
The three glyphs you must never mirror
$ npx @oratiq-js/ui add header-section-06What 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/header-section.tsx