Actyra Building Blocks Repository

Central repository of reusable UI building blocks for multi-platform applications.

Quick Stats

Category	Count	Description
Components	49	Atomic UI elements (buttons, forms, dialogs)
Plugins	12	Standalone features (dashboard, settings, documents)
Kits	10	Reusable patterns (admin-panel, list-nav)
Shells	2	Layout containers (app-shell, sidebar-shell)
Cores	1	SDK foundations (plugin-sdk)

Structure

blocks/
├── components/ui/   # 49 atomic UI elements (shadcn/ui based)
├── plugins/         # 12 standalone features
├── kits/            # 10 reusable patterns
├── shells/          # 2 layout containers
├── cores/           # SDK and platform foundations
├── insights-list/   # Insight browser with filtering
├── solution-generator/  # Solution generation UI
├── stats-dashboard/ # Statistics dashboard
└── projects-sidebar/    # Project navigation sidebar

registry/
└── manifest.json    # Auto-generated catalog

mcp/                 # MCP server for AI access

Block Categories

Category	Description	When to Use
Component	Atomic UI element	Basic UI primitives (button, input, dialog)
Plugin	Standalone feature	Drop-in functionality (calendar, settings)
Kit	Reusable pattern	Needs assembly (nav list, form kit)
Shell	Layout container	Structure with slots (sidebar, modal)
Core	SDK/Foundation	Platform abstraction, shared utilities

Available Blocks

Components (49 UI Primitives)

Based on shadcn/ui, these are atomic UI elements:

Component	Description
accordion	Collapsible content sections
alert / alert-dialog	Notifications and confirmations
avatar	User profile images
badge	Status indicators
breadcrumb	Navigation trail
button	Interactive buttons
calendar	Date picker
card	Content containers
carousel	Image/content slider
chart	Data visualization
checkbox / radio-group	Selection controls
collapsible	Expandable sections
command	Command palette
context-menu / dropdown-menu	Context actions
dialog / drawer / sheet	Modal overlays
form	Form handling
hover-card	Hover previews
input / textarea / input-otp	Text inputs
label	Form labels
menubar / navigation-menu	Menu systems
pagination	Page navigation
popover / tooltip	Info overlays
progress / skeleton	Loading states
resizable	Resizable panels
scroll-area	Custom scrollbars
select / combobox	Selection dropdowns
separator	Visual dividers
sidebar	Navigation sidebar
slider	Range input
sonner / toast / toaster	Notifications
switch	Toggle switch
table	Data tables
tabs	Tab navigation
toggle / toggle-group	Toggle buttons

Plugins (12 Standalone Features)

Plugin	Description
activity	Activity feed and timeline
calendar	Full calendar with events
clients	Client management interface
contacts	Contact list and details
dashboard	Main dashboard view
documents	Document browser
google-drive	Google Drive integration
portals	Portal management
settings-alpha	Settings panel (v1)
settings-beta	Settings panel (v2)
web-scraper	Web scraping interface

Kits (10 Reusable Patterns)

Kit	Description
admin-panel	Complete admin interface with sidebar, tables, stats
ai-service	AI service integration pattern
export-modal	Export functionality modal
filterable-list	List with search and filters
list-nav	Navigation list component
page-templates	Common page layouts
platform-utils	Platform detection utilities
plugin-routing	Plugin-based routing system
settings-kit	Settings management pattern
sse-progress	Server-sent events progress

Shells (2 Layout Containers)

Shell	Description
app-shell	Main application shell with header/sidebar/content
sidebar-shell	Sidebar layout container

Cores (SDK Foundations)

Core	Description
plugin-sdk	Multi-platform plugin SDK (Web, Tauri, Electron, Capacitor)
plugin-sdk-extensions	Routing and other SDK extensions

Standalone Blocks

Block	Description
insights-list	Insights browser with severity filtering
solution-generator	Solution generation UI
stats-dashboard	Statistics dashboard with charts
projects-sidebar	Project navigation sidebar

Using Blocks

Via MCP (AI-assisted)

Claude can search and retrieve blocks:

search_blocks(query: "sidebar navigation")
get_block(id: "sidebar-shell")
get_block_code(id: "list-nav", file: "all")
get_example(id: "admin-panel")
list_categories()

Manual Copy

1. Find the block in blocks/
2. Copy to your project
3. Adjust imports as needed

Using the Plugin SDK

npx create-plugin-app my-app
cd my-app
npm run dev        # Web development
npm run tauri:dev  # Desktop (Tauri)
npm run electron:dev  # Desktop (Electron)

Platform Support

The plugin-sdk core supports:

Platform	Technology	Status
Web	Next.js 16+	Ready
Desktop	Tauri 2.9.5+	Ready
Desktop	Electron 33+	Ready
Mobile	Capacitor 7+	Ready

Adding Blocks

Option 1: Script

npm run add -- --name "my-block" --category "kit"

Option 2: Manual

1. Create folder: blocks/<category>/<block-name>/
2. Add required files:
   • metadata.json (required)
   • src/index.ts or src/index.tsx
   • styles/default.css (optional)
   • config/index.ts (optional)
3. Run npm run build to update registry

Metadata Format

Each block needs a metadata.json:

{
  "id": "my-block",
  "name": "MyBlock",
  "category": "kit",
  "version": "1.0.0",
  "description": "What this block does",
  "useWhen": [
    "Scenario 1",
    "Scenario 2"
  ],
  "props": {
    "propName": {
      "type": "string",
      "required": true,
      "description": "What this prop does"
    }
  },
  "tags": ["tag1", "tag2"],
  "example": {
    "basic": "<MyBlock prop=\"value\" />"
  }
}

MCP Server Setup

Add to ~/.claude/claude_desktop_config.json:

{
  "mcpServers": {
    "building-blocks": {
      "command": "node",
      "args": ["/path/to/building-blocks-repo/mcp/dist/index.js"]
    }
  }
}

Version

1.1.0

Contact

• Email: hello@actyra.com
• Phone: +1 (407) 222-5432
• Website: https://actyra.com