Docs / Blocks
Block Catalog
14 ready-to-paste sections from @artificialsenselabs/blocks — composed from @artificialsenselabs/ui primitives. Browse below and copy a snippet to drop a block into your app.
Install: pnpm add @artificialsenselabs/blocks @artificialsenselabs/ui @artificialsenselabs/tokens
AI
Agent Dashboard
premiumAgent run status, key metrics, and recent activity.
sense-agent-dashboard-block<sense-agent-dashboard-block [agentName]="agent().name" [status]="agent().status" [metrics]="agent().metrics" [activity]="agent().activity" />Composes:
sense-badgeChat Thread
freeConversation transcript with roles, citations, and a streaming indicator.
sense-chat-thread-block<sense-chat-thread-block [messages]="messages()" [streaming]="pending()" />Composes:
sense-badgesense-spinnerPrompt Manager
premiumA versioned prompt library with status badges and a variable inspector.
sense-prompt-manager-block<sense-prompt-manager-block [prompts]="prompts()" [activePromptId]="activeId()" (promptSelect)="open($event)" (createPrompt)="create()" />Composes:
sense-badgesense-buttonsense-spinnerRAG Review Panel
premiumReview the passages retrieved for a query and approve or reject each one.
sense-rag-review-panel-block<sense-rag-review-panel-block [query]="query()" [chunks]="chunks()" (chunkDecision)="onDecision($event)" />Composes:
sense-badgesense-buttonsense-spinner
Application
App Shell
freeTopbar, sidebar navigation, and a main content area — the application scaffold.
sense-app-shell-block<sense-app-shell-block brand="Console" [navItems]="nav()" [activeNavId]="active()" (navSelect)="go($event)"> <router-outlet /> </sense-app-shell-block>Composes:
sense-badgeData Table Toolbar
freeSearch, quick filters, and bulk actions for the bar above a results table.
sense-data-table-toolbar-block<sense-data-table-toolbar-block [(searchTerm)]="term" [filters]="filters" [activeFilterIds]="activeFilters()" [selectedCount]="selection().length" [bulkActions]="bulkActions" (filterToggle)="toggleFilter($event)" (bulkAction)="runBulk($event)" (clearSelection)="clearSelection()" />Composes:
sense-inputsense-buttonsense-badge
Marketing
Hero
freeEyebrow, headline, subheadline, and CTAs with an optional split visual.
sense-hero-block<sense-hero-block eyebrow="AI-Native Enterprise Studio" headline="Engineering enterprise systems," headlineAccent="accelerated by AI." subheadline="Modernise platforms and ship scalable software." [actions]="actions()" />Call to Action
freeCentered headline, supporting copy, action buttons, and an optional note.
sense-cta-block<sense-cta-block headline="Build faster. Scale smarter." subheadline="Let's talk about the next 90 days." note="No commitment. Just a conversation." [actions]="actions()" />Feature Grid
freeSection header above a responsive grid of feature cards with optional icons.
sense-feature-grid-block<sense-feature-grid-block eyebrow="Why us" title="Built for production from sprint one" [features]="features()" [columns]="3" />Composes:
sense-iconNavigation Bar
freeBrand wordmark, a row of links, and a mobile menu toggle.
sense-nav-block<sense-nav-block brand="Acme" brandAccent="Co" [links]="links()" />Footer
freeBrand wordmark, columns of links, and a copyright line.
sense-footer-block<sense-footer-block brand="Acme" brandAccent="Co" tagline="We build things." [groups]="groups()" />Logo Cloud
freeAn optional caption above a row of partner/customer logos or text marks.
sense-logo-cloud-block<sense-logo-cloud-block caption="Trusted by teams at" [logos]="logos()" />
Auth
Auth Sign-In
freeEmail/password sign-in form with optional OAuth provider buttons.
sense-auth-sign-in-block<sense-auth-sign-in-block [(email)]="email" [(password)]="password" [providers]="providers" [error]="error()" (submitted)="signIn($event)" (providerSelect)="oauth($event)" />Composes:
sense-inputsense-button
Vertical
Fintech Overview
premiumHeadline KPI cards and a recent-transactions panel for a financial dashboard.
sense-fintech-overview-block<sense-fintech-overview-block title="Operating account" [metrics]="metrics()" [transactions]="transactions()" />Composes:
sense-badgesense-spinner