How to access a resource
There are two ways to access a resource:@resources command
- Type
@the chat input box and select Resources from the list. - Select a resource category from the list, e.g., Colors.
- Select the resource you want to attach, e.g., Color Hunt.
- Prompt Kombai to use the resource.
Resource library button
- Click the Resource Library button below the chat input box.
- Click on the resource you want to access.
- Follow the instructions in the modal to use the resource.
How to use resources
UI library
UI library
You can ask Kombai to search and use components from the attached UI library. It will navigate to the site, extract the component code and apply it to your app.
Example prompts
- Use the
<PixelImage />component from@magicuifor the cover image of my product cards. @acerternityuiWhat component can I use to highlight the product demo in my website?- Instead of a carousel, what can I use from
@smoothuito showcase the client testimonials on my website?
Design inspirations
Design inspirations
Attach one of the resources and ask Kombai to search for design inspirations for a site, page, section or layout. Kombai will then navigate to the site and find relevant inspirations based on your task and apply it to your app.
Example prompts
@saasframesuggest me some page inspirations that I can use for my website’s 404 pages- I want to add a Scheduled Maintenance banner to my app. Suggest me some options from
@mobbin - I want to create my portfolio website. Suggest me some beautiful, modern portfolio websites from
@framer
Colors
Colors
You can ask Kombai to generate a color palette for your app or select from existing ones. It will use the browser to navigate to the site and retrieve options to choose from. It will then apply those colors to your app.
Example prompts
- Recommend me some color palettes that goes with my green theme from
@colorhunt - Explore
@goodpaletteand generate some color palettes for my e-commerce website. @brandcolorsGive me a color palette that is similar to the brand Adidas.
Typography
Typography
Ask Kombai to use a font from the attached font library. Or, ask Kombai to get a font pair for your app based on your theme and niche. Kombai will then navigate to the site, get/generate the font/font pairs and use it in your app.
Example prompts
@fontpairWhat font pair goes best for the title and description of my product card- Use Montserrat from
@googlefontsfor all headings in my codebase. - Generate a modern, minimal font pair from
@fontpairstudiofor the new blog post page.
Animation library
Animation library
You can ask Kombai to search and use animations from the attached animation library. It will navigate to the site and find relevant options based on your task and apply it to your app.
Example prompts
- Get card swipe animation from
@framermotionand apply it to my product catalog cards. - Suggest me some smooth page scroll animations from
@codepen(gsap) - Add a confetti animation from
@gsapwhen user finishes their account wallet setup
Supported resources
| Category | Sub-category | Resource name | Access using |
|---|---|---|---|
| UI library | UI library | Magic UI | @resources |
| UI library | UI library | Aceternity UI | @resources |
| UI library | UI library | Badtz UI | @resources |
| UI library | UI library | Kokonut UI | @resources |
| UI library | UI library | Hover | @resources |
| UI library | UI library | Animate UI | @resources |
| UI library | UI library | Smooth UI | @resources |
| Design inspiration | Design inspiration | Saasframe | @resources |
| Design inspiration | Design inspiration | Framer | @resources |
| Design inspiration | Design inspiration | One Page Love | @resources |
| Design inspiration | Design inspiration | Mobbin | @resources |
| Colors | Palette generator | Coolors | @resources |
| Colors | Palette generator | Goodpalette | @resources |
| Colors | Palette library | Brandcolors | @resources |
| Colors | Palette library | Coolors Palette | @resources |
| Colors | Palette library | Color Hunt | @resources |
| Colors | Gradient library | Colortopia | @resources |
| Colors | Gradient library | Gradient Page | @resources |
| Typography | Font library | Google Fonts | @resources |
| Typography | Font pair library | Fontpair | @resources |
| Typography | Font pair generator | Font Pairing Studio | @resources |
| Animation library | Animation library | GSAP | @resources |
| Animation library | Animation library | Framer Motion | @resources |
| Animation library | Animation library | Codepen (GSAP) | @resources |
| Assets | Illustration library | StreamlineHQ | Resource library button |
| Assets | Logo library | Brandlogos | Resource library button |
| Assets | Logo library | Logo.dev | Resource library button |