My Component

overview my components is your personal library for creating, saving, and reusing custom ui components inside simplitа ai it acts like your own design kit that you can quickly drop into any project to maintain consistency and accelerate build time across all your applications what is my components? my components empowers users to build a centralized repository of reusable ui elements without writing code from scratch whether you're designing navigation bars, form layouts, data tables, or interactive modals, my components allows you to create once and deploy everywhere—maintaining visual and functional consistency across your entire project portfolio current status my components section active and ready for use access control private/public toggle available organization tabs all, public, private default state "no custom components available" primary action "create your first component" button key features centralized component library store all custom built components in one location for quick reuse across projects visual canvas editor design, edit, and preview components in real time before saving to the library smart categorization organize components by type (navigation, forms, tables, components, modals, media) dual editing modes switch seamlessly between code view (raw html) and preview view (rendered output) flexible saving options save individual components or entire pages as reusable components access control designate components as private (personal use) or public (shareable across projects) ai assistant integration generate or refine component code using the built in ai assistant how to create components method 1 from scratch click create your first component in the my components panel enter the component name and select a category write or paste html code in the code editor preview the component using the preview tab click create component to save method 2 using ai assistant open the component creation dialog in the ai assistant section at the bottom, describe what you need (e g , "create a hero banner with image and cta button") the ai will generate component code automatically review and edit the generated code if needed click create component to save method 3 save entire page as component design a complete layout on your canvas click save entire page instead option in the component editor name the component and assign it to a category save to your library for future use managing components viewing components all displays all saved components (private + public) public shows components shared across projects private shows personal components for this project only organizing components use search functionality (ctrl+f) to quickly find components components are automatically grouped by category for easy navigation editing components select any saved component from the library use the component editor panel to modify properties switch between code and preview modes for real time feedback save changes to update the component reusing components drag and drop components into your current design canvas components maintain their structure and styling when placed edit instance specific properties without affecting the original component access control mark components as private for personal use mark components as public to share patterns across projects change access settings anytime from the component properties use cases design system building create a unified component library that represents your brand's design language team collaboration share public components across team members to ensure consistent ui patterns multi project consistency reuse the same components across different projects without redesigning rapid prototyping quickly assemble pages using pre built, tested components pattern documentation document and standardize common ui patterns used across your organization summary my components transforms your design workflow by eliminating repetitive work and ensuring consistency across your simplitа ai applications by building a curated library of reusable components and following best practices for organization, naming, and documentation, you can accelerate development, improve code quality, and maintain a cohesive user experience across all your projects