Qeetrix

Patterns

Blocks and patterns — compositions of Qeetrix components you copy into your app, rather than import.

@qeetrix/ui is a component library: reusable, product-neutral pieces that each solve one interface problem. Blocks and patterns are built from those components and live beside the library as source code you copy:

  • A block is a ready-made section of a product screen, with a product idea baked in — an access review, an audit record, a notification inbox.
  • A pattern is a proven arrangement of components for a recurring layout or flow, such as a list beside the selected item's detail.

Each one imports only the public @qeetrix/ui and @qeetrix/icons APIs, so a copied file works in any app that has the package. Strings travel with the file, with a messages prop to override them.

Moving in @qeetrix/ui 3.0

In the 2.x releases these modules are still exported by the package, and each has a component page. From 3.0 they leave the package for the src/blocks/ and src/patterns/ folders of the qeetrix-ui repository, where they are today on the develop branch.

Blocks

BlockWhat it isSource
AccessReviewAccess assignment and certification table with a bulk-review baraccess-review.tsx
AuditEventOne audit record, and a feed of them (AuditLog)audit-event.tsx
CommentThreadThreaded comments with replies, reactions, edit and deletecomment-thread.tsx
LogoUploaderBrand-logo picker: drop zone, preview and URL fallbacklogo-uploader.tsx
NotificationCenterA bell with an unread count, opening a notification inboxnotification-center.tsx
NotificationPreferenceMatrixChannel × category notification preferencesnotification-preference-matrix.tsx
SecurityItemOne row of a security settings page: a session, device, passkey or keysecurity-item.tsx

Patterns

PatternWhat it isSource
MasterDetailA list beside the selected item's detail: two resizable panes on wide screens, the detail in a sheet on narrow onesmaster-detail.tsx

Using one

  1. Copy the .tsx file into your app — for example src/components/blocks/.
  2. Install @qeetrix/ui and @qeetrix/icons if you have not (Installation).
  3. Import it from where you put it, and adapt it: it is your code now.

On this page

BlocksPatternsUsing one