Banner
ReadyDismissible announcement bar.
Oratiq Blocks is live — 17 sections, RTL-ready.
See what's newInstallation
$ npx @oratiq-js/ui add bannerCopies 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 { Banner } from "@/components/blocks/banner";Style 02
Launch week:every block is free, forever.Read the announcement
$ npx @oratiq-js/ui add banner-02Style 03
v0.2 migration guide is available for the new token names.Migration guide
$ npx @oratiq-js/ui add banner-03Style 04
-40%
Launch-week pricing ends Friday.
$ npx @oratiq-js/ui add banner-04Style 05
Free updates foreverMIT licensedRTL included
$ npx @oratiq-js/ui add banner-05Style 06
Workshop: Shipping RTL right — Aug 14, live.
Save a seat$ npx @oratiq-js/ui add banner-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/banner.tsx