UI Frameworks Support
LogicStamp Context extracts style metadata from popular UI frameworks and styling solutions, including Tailwind CSS, Material UI, ShadCN/UI, Radix UI, Styled Components, CSS/SCSS, and Framer Motion.
Overview
LogicStamp Context extracts visual and design information from your components when you use the --include-style flag or stamp context style command. This enables AI assistants to understand your design system, color palettes, spacing patterns, and component styling.
Tailwind CSS
Material UI
ShadCN/UI
Radix UI
Styled Components
CSS/SCSS
Framer Motion
Usage
Enable style metadata extraction with the style command:
# Generate context with style metadata
stamp context style
# Or use the flag
stamp context --include-style
# Style metadata will be included in context bundles
# Extracts: colors, spacing, typography, layout, animations, etc.Tailwind CSS
LogicStamp extracts Tailwind CSS utility classes, responsive breakpoints, and design patterns. Classes are categorized by type (layout, spacing, typography, colors, etc.) and variant prefixes are stripped for cleaner organization.
Extracted categories:
- Layout (flex, grid, container, etc.)
- Spacing (padding, margin, gap)
- Typography (font size, weight, line height)
- Colors (background, text, border)
- Responsive breakpoints (sm:, md:, lg:, etc.)
- Pseudo-class variants (hover:, focus:, etc.)
Material UI (MUI)
LogicStamp detects Material UI components, theme usage, and the sx prop for system styling. Component variants, props, and theme values are extracted.
Extracted information:
- MUI component names and imports
- Component variants and props
sxprop styling- Theme provider usage
- Material Design patterns
ShadCN/UI
LogicStamp detects ShadCN/UI components from common import paths (@/components/ui/*), tracks component usage frequency, and extracts Tailwind classes used with ShadCN components.
Extracted information:
- ShadCN component names and imports
- Component usage frequency
- Compound component patterns
- Tailwind classes used with components
- Import aliases and mappings
Radix UI
LogicStamp detects Radix UI primitives and components, extracting component names, props, and styling patterns. Radix UI components are often used with Tailwind CSS or styled-components.
Extracted information:
- Radix UI component imports
- Component props and variants
- Primitive component usage
- Accessibility patterns
Styled Components & Emotion
LogicStamp extracts styled component declarations using AST-based extraction, detecting styled.div, styled(Component), and template literal patterns. Theme usage and CSS prop (Emotion) are also detected.
Extracted information:
- Styled component declarations
- CSS-in-JS patterns
- Theme provider usage
- Emotion
cssprop - Template literal styles
CSS & SCSS Modules
LogicStamp detects CSS Modules and SCSS imports, extracting class names, CSS variables, and styling patterns from your stylesheets.
Extracted information:
- CSS Module class names
- SCSS variables and mixins
- CSS custom properties
- Import patterns
Framer Motion
LogicStamp detects Framer Motion animations, variants, and motion components, extracting animation patterns, transition configurations, and gesture handlers.
Extracted information:
- Motion component usage
- Animation variants
- Transition configurations
- Gesture handlers
- Layout animations
Learn More
For detailed information about each UI framework's extraction capabilities, see the individual framework documentation in the docs/context/ui-frameworks/ directory.
Related documentation: See the style command documentation for more details on style metadata extraction.
Next Steps
Get started with LogicStamp Context or explore style metadata extraction.