Mentions
Quickly reference and insert components, designs, and library elements using the @ mention system in chat.
What are Mentions?
Mentions allow you to reference existing components, library elements, or other designs directly in your AI chat conversations. Simply type @ followed by the component name, and the AI will understand the context and use it in your design.
How to use Mentions:
- In any chat conversation, type @ symbol
- A dropdown will appear showing available components and library elements
- Select the component you want to reference or continue typing to filter
- The mentioned component will be highlighted in your message
- The AI will understand and use this component as context or reference
What you can mention:
- •Library components: Reference reusable components from your libraries
- •Project components: Reference other components in the current project
- •Design elements: Point to specific designs for the AI to use as reference
Example use cases:
"Use the styling from @PrimaryButton for this new CTA""Create a card similar to @ProductCard but for blog posts""Apply the same layout as @HeroSection"Combining Components
One of the most powerful uses of mentions is combining multiple components into more complex designs. You can focus on perfecting individual components, then easily reuse them in bigger, more complex designs.
Example workflows:
"Take this @HeroSection and add the @Navbar to it""Combine @Header, @FeaturesSection, and @Footer into a landing page""Add @Sidebar to this @Dashboard layout"This workflow lets you build complex applications piece by piece - perfect each component individually, then combine them seamlessly using mentions.
Mentioning Images
You can also mention images that you've added to your . This is perfect for using screenshots, mockups, or inspiration images as visual references when generating new components.
Image mention use cases:
"Make a component that looks like @screenshot.png""Use the color palette from @brand-colors.jpg for this design""Create a hero section inspired by @inspiration.png""Match the style of @competitor-ui.png but with our branding"To add images to your canvas, simply drag and drop them from your computer. Learn more about working with images on the page.
Pro tip:
Mentions are especially powerful when combined with . You can build up a library of your brand's components and easily reference them across all projects, ensuring consistency.