Skip to content
SEC // BLOCKS
okibi // EXAMPLE UIS

blocks区画

Full-page UIs assembled from okibi primitives and signature pieces, rendered live in a resizable frame. Open any block full-bleed, read its source, or install it into your project via the shadcn registry.

Browse components Get started

01 Marketing

1 ITEMS
BLK // signal-hero

Signal Hero

A landing page in the okibi skin with a decoding glitch headline, animated stat readouts, and a Reveal-staggered feature grid.

BracketFrameGlitchTextTickerMotionNumberReadoutReveal
npx shadcn@latest add https://okibi.cndr.dev/r/signal-hero.json

02 Auth

2 ITEMS
BLK // login-access

Clearance Login

A clearance-terminal sign-in screen with a brand lockup over a bracketed credential form and an SSO fallback.

CardInputLabelButtonSeparator
npx shadcn@latest add https://okibi.cndr.dev/r/login-access.json
BLK // access-verify

Access Verification

A two-factor verification screen with a segmented one-time-code field that flips to its destructive state on a wrong code and confirms on the right one.

InputOTPCardButtonBracketFrame
npx shadcn@latest add https://okibi.cndr.dev/r/access-verify.json

03 Dashboard

1 ITEMS
BLK // mission-control

Mission Control

A telemetry dashboard with a readout instrument row, duplex throughput chart, channel-level meters, live event stream, and node-roster table.

ReadoutChartProgressDataStreamConsolePanelTable
npx shadcn@latest add https://okibi.cndr.dev/r/mission-control.json

04 Data

1 ITEMS
BLK // fleet-manifest

Fleet Manifest

A full-page operator roster with a filterable, paginated data table, status badges, load bars, and row actions.

TableInputToggleGroupComboboxBadgeAvatarProgressDropdownMenu
npx shadcn@latest add https://okibi.cndr.dev/r/fleet-manifest.json

05 Scheduler

1 ITEMS
BLK // ops-scheduler

Ops Scheduler

A two-pane scheduler with an okibi Calendar beside a day panel of bookable time slots, status badges, and assignees.

CalendarDatePickerCardBadgeAvatarButton
npx shadcn@latest add https://okibi.cndr.dev/r/ops-scheduler.json

06 Forms

1 ITEMS
BLK // intake-form

Incident Report

A validated intake form on the okibi Form system with a combobox, toggle group, date picker, and inline validation messages.

FormComboboxToggleGroupDatePickerTextareaCheckbox
npx shadcn@latest add https://okibi.cndr.dev/r/intake-form.json

07 Pricing

1 ITEMS
BLK // pricing-tiers

Pricing Tiers

Three provisioning tiers with a badge-flagged recommended plan, price readouts and checked feature manifests.

CardBadgeButtonSeparator
npx shadcn@latest add https://okibi.cndr.dev/r/pricing-tiers.json

08 Settings

1 ITEMS
BLK // operator-settings

Operator Settings

A tabbed settings panel with profile fields, interface controls (theme, density, and motion), and signal routing toggles.

TabsSwitchSelectRadioGroupSliderInput
npx shadcn@latest add https://okibi.cndr.dev/r/operator-settings.json
okibi BLOCKS // INSTALLABLE VIA SHADCN CUSTOM REGISTRY
okibi // 20269 BLOCKS · 8 CATEGORIES