Flexlayout React
If you're building anything that needs IDE-style window management, this is the React component for it. Drag and drop panels, tabbed interfaces, resizable splitters, the whole docking layout experience you'd expect from Visual Studio Code or similar tools. It's TypeScript-ready and handles layout persistence, so users can arrange their workspace and come back to it later. The 49 GitHub stars suggest it's somewhat niche, but that's typical for specialized layout libraries. Best fit for dashboards, admin panels, or any app where users need to customize their workspace. It's one of those libraries you don't need until you absolutely do, and then you're glad someone already solved the hard parts.
- skills.sh installs
- 337
- GitHub stars
- 79
- last updated
- Aug 21, 2026
Install
$ npx -y skills add bobmatnyc/claude-mpm-skills --skill flexlayout-react --agent claude-codeInstalls into .claude/skills of the current project.
Files
FlexLayout-React - Professional Docking Layouts
Overview
FlexLayout-React provides IDE-quality docking layouts with drag-and-drop, tabs, splitters, and complex window management. Perfect for dashboards, IDEs, admin panels, and any interface requiring flexible, user-customizable layouts.
Key Features:
- Drag-and-drop panel repositioning
- Tabbed interfaces with close, maximize, minimize
- Splitters for resizable panes
- Border docking areas
- Layout persistence (save/restore)
- Programmatic layout control
- TypeScript support
Installation:
npm install flexlayout-react
Basic Setup
1. Define Layout Model
import { Model, IJsonModel } from 'flexlayout-react';
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/bobmatnyc/claude-mpm-skills
- Category
- Frontend Development
- First seen
- Jun 3, 2026
More from bobmatnyc/claude-mpm-skills
All 158- Digitalocean Agentic Cloud334
- Artifacts Builder333
- Vercel Ai333
- Terraform332
- Validated Handler332
- Bad Example Skill329
- Emergency Release Workflow328
- Digitalocean Teams327
- Vector Search Workflows324
- Vercel Storage Data324
- Example Framework Skill323
- Vercel Teams Billing320
- Spring Boot319
- Rust Desktop Applications263
- Api Security Review257
- Anthropic Sdk254
- Testing Anti Patterns226
- Root Cause Tracing216
- Mcp206
- Tauri Event System203
- Condition Based Waiting199
- Mcp Builder188
- Writing Plans187
- Dispatching Parallel Agents185
Recommended
More Frontend Development
frontend-engineersiviter-xyz/dot-agentFrontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with fe322skills.sh installs
integration-nextjs-app-routerposthog/skillsPostHog integration for Next.js App Router applications316skills.sh installs
nextjs-use-search-params-suspensewsimmonds/claude-nextjs-skillsPattern for using useSearchParams hook with Suspense boundary in Next.js. Covers the required combination of 'use client' directive and Suspense wrapper when ac313skills.sh installsnextjs-pathname-id-fetchwsimmonds/claude-nextjs-skillsFocused pattern for fetching data using URL parameters in Next.js. Covers creating dynamic routes ([id], [slug]) and accessing route parameters in server compon296skills.sh installs
wix-cli-site-widgetwix/skillsUse when building interactive widgets, custom data displays, or configurable site components with settings panels. Triggers include widget, custom element, inte288skills.sh installs
perf-astrotech-leads-club/agent-skillsAstro-specific performance optimizations for 95+ Lighthouse scores. Covers critical CSS inlining, compression, font loading, and LCP optimization. Use when opti286skills.sh installs