Component Grabber

Component Grabber is the ultimate developer tool for extracting everything you need to recreate any UI component — design tokens, CSS rules, accessibility data, animations, assets, and more — directly from any website. Select any element, get a full component breakdown in a clean side panel, and export production-ready specs in seconds. Stop manually digging through DevTools. Stop copying CSS one property at a time. Component Grabber gives you the complete picture with a single click. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1. Click the Component Grabber icon in your toolbar (or press Alt+Shift+C) 2. Hover over any element on the page — a blue highlight overlay shows exactly what you're targeting 3. Click to select the element 4. The side panel instantly displays a complete component breakdown: HTML, CSS, design tokens, accessibility data, assets, and more 5. Copy what you need in one click — as raw code, AI-ready prompts, or framework-specific formats That's it. No setup, no configuration, no learning curve. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ELEMENT PICKER ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ The element picker overlays the page with a visual highlight that follows your cursor: • Blue border and background on the hovered element • Tag label showing tag name, ID, and class names • Full DOM path showing your position in the page structure After selecting, you can: • Navigate ancestors via the breadcrumb Target Bar • Toggle "Element Only" vs "Element + Children" scope • Press Escape to switch between picking and selection modes ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HTML EXTRACTION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Complete HTML structure with syntax highlighting, line count, file size, and DOM metadata (tag, ID, classes, child count, URL, ancestor path). One-click copy to clipboard. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ CSS EXTRACTION (Pro) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ This is where Component Grabber really shines. The CSS extraction engine pulls every style that affects your selected element: MATCHED CSS RULES Every CSS rule that applies to the selected element, with the source file URL or "inline" attribution. You see exactly which stylesheet each rule comes from and in what order they cascade. CSS VARIABLES All custom properties (--var-name) resolved from both :root and element-level scopes. See the variable name and its computed value side by side. Essential for understanding design systems. INLINE STYLES Any styles applied directly via the style attribute on each element. COMPUTED STYLES The final, non-default computed properties from getComputedStyle(). This strips out all browser defaults, showing you only the styles that actually matter — the ones that make this element look the way it does. MEDIA QUERIES All responsive breakpoint rules that apply to the element, sorted by breakpoint value. See exactly how the element adapts at different screen sizes. ANIMATIONS & TRANSITIONS Complete animation details including: • CSS keyframe animations with the full @keyframes CSS text • CSS transitions with property, duration, and timing function • Pseudo-state styles for :hover, :focus, and :active • Pseudo-element styles for ::before and ::after ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DESIGN TOKENS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Component Grabber automatically extracts and categorizes the design tokens used by the selected element. This is invaluable for building or auditing design systems. COLORS Every color value used by the element — extracted from CSS rules and computed styles. Supports hex, rgb/rgba, hsl/hsla, and oklch formats. See all the colors at a glance to understand the element's color palette. SPACING Margin, padding, gap, row-gap, and column-gap values in px and rem. Instantly understand the spacing system used by the component. TYPOGRAPHY Font families, font sizes (in px), and font weights extracted from getComputedStyle(). Map out the typographic scale used across components. BORDER RADIUS All border-radius values collected from the element and its children. Useful for documenting the rounding conventions in a design system. BOX SHADOWS Every box-shadow value used, with "none" values filtered out. Capture the elevation system at a glance. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ACCESSIBILITY ANALYSIS ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Built-in accessibility auditing helps you catch issues before they reach production. The a11y panel analyzes the selected element and its children for: ARIA ROLES Lists every element with an explicit role attribute so you can verify the semantic structure is correct. ARIA LABELS Shows all aria-label and aria-labelledby attributes to ensure interactive elements are properly labeled for screen readers. TAB ORDER Displays all focusable elements with their tabindex values. Flags anti-patterns like positive tabindex values that can break natural keyboard navigation. HEADING STRUCTURE Validates the heading hierarchy (h1 through h6) and detects level skipping. For example, jumping from h2 directly to h4 is flagged because it can confuse assistive technology users. AUTOMATED ISSUE DETECTION Component Grabber checks for common accessibility violations: • Missing alt text on images • Buttons and links without accessible text or aria-label • Inputs without associated labels or aria-label • Color contrast ratio failures against WCAG AA minimum (4.5:1 for normal text) • Missing lang attribute on the html element • Heading level skips (e.g., h2 followed by h4) • Positive tabindex values (an anti-pattern that disrupts focus order) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ASSET EXTRACTION ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Grab every visual asset from the selected component: IMAGES Extracts all <img> elements with their src URL, alt text, and natural dimensions (width × height). SVGS Captures inline SVG elements w…