CocoKits is everything you need to build your project with any framework.
We provide you with all you need, such as utilities, CDK (Component Development Kit), and core components.
CocoKits is a professionally crafted toolkit for product design and development teams and individuals.
We provide the core components you need for every project, component composition, and development experience.
CocoKits is a collection of core UI components and tools designed to bridge the gap between designers and developers. Whether you're a designer looking to bring your designs to life without deep coding knowledge or a developer seeking customizable components, CocoKits streamlines your workflow.
All-in-One Solution: Get everything you need to build your project with any framework—utilities, CDK, and core components. Bridge Design and Development: Streamline collaboration with tools and components that both designers and developers can use effectively. No Need to Learn New Frameworks: Designers can convert their Figma components into code without needing to learn new programming frameworks. Customization and Flexibility: Fully customizable components and theming options allow you to tailor everything to your project's needs. Efficiency and Speed: Accelerate your development process with ready-to-use components and design tokens. Community and Support: Join a community of professionals and enthusiasts, with full support available to guide you through any challenges.
-
Frames X UI Kit: Frames X is the largest web design system in the world. With un-styled UI components and support for multiple color and brand themes. Learn more.
-
CocoKits UI Kit: Designed by the CocoKits team, this theme provides a consistent, balanced look across all components for a seamless user experience.
- Convert Figma Components to Code: Transform your Figma components into popular framework components (Angular, React, Vue, or just HTML) without needing to learn any frameworks. You only need to know CSS.
- Design Package Creation: We provide you with fully functional components in each framework without any styles. You can then create your design package (only CSS/SCSS) to style the components and make them ready for developers.
- Support for Existing Design Systems: If you have an existing design system and want to convert it to include component code for developers, CocoKits is your best solution.
- Full Support: We offer comprehensive support during the process with various examples and online sessions to answer any of your questions.
How to Add Your Design System to CocoKits
Just send us an email with a link to your design system at hello@cocokits.com, and we will schedule a meeting to help you become part of our community and create your components in just a week.
- Production-Ready Components: CocoKits is ready to be used in your production environment with the core components of your favorite design system.
- Fully Customizable: Depending on your project and requirements, you can easily change the style of any component and modify the theme of your design system quickly and effortlessly.
- Component Examples: All components come with various examples, so you can see how each component looks in different scenarios.
- Override Default Configurations: You can override the default configurations of the components based on your specific requirements.
- Essential and Functional: The CocoKits core components are fully functional essential components without any design, which almost all design systems should have.
- Design System Integration: Each design system will style the components based on different configurations (such as size, color, etc.). Ensure you import your favorite design system to see the styled components accordingly.
- Quality Over Quantity: We focus on the quality of core components familiar to you and widely used across the web, rather than a large number of components or one-off variations.
- Simplified Experience: Our goal is to make your experience simple and efficient. We handle implementation details like flexible architecture, and theming, so you can start building your product immediately.
- Design Tokens Conversion: All tokens from your favorite design system have been converted to CSS and SCSS variables, allowing you to use them and follow your design system's style guide.
- Use Predefined Styles: Utilize spacing, color palettes, or branding colors defined in your design system to implement any feature or extend the UI components.
- Override Token Values: You can override any token values based on your project needs, such as changing the brand color or other elements.
- Collections and Modes: We provide you with all collections and modes from your favorite design system, and you can choose which collection or mode you want to use in your project.
- Flexible Theming Approach: CocoKits offers a flexible and easy-to-use theming approach.
- Semantic Design Tokens: We provide semantic design tokens, like colors and typography values based on your favorite design system, that you can customize to match your brand.
- Create New Themes: You can create new themes with full control over every value or use our color generator for faster results.
- Accessible Themes: With semantic design tokens, your themes will be accessible and include light/dark mode support.
- Composable UI Pieces: We create highly composable atomic UI pieces that you can easily assemble based on your product needs.
- Automatic Layout Handling: We automatically handle all layout edge cases, making it effortless to combine components together.
If you’re interested in contributing, please review the guidelines below. They cover best practices for refining features, fixing bugs, and submitting pull requests. Check these lines for more details:
Have questions or need assistance? Don't hesitate to reach out:
Email: hello@cocokits.com