> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kombai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Inspiration Library

> The Inspiration Library is a curated, regularly updated collection of design references and production-ready templates. Use it to provide Kombai with a visual reference for your next design, or to remix a template into your own project.

export const Send = props => {
  return <div style={{
    display: "inline-flex",
    justifyContent: "center",
    alignItems: "center",
    width: "20px",
    height: "20px",
    borderRadius: "5px",
    backgroundColor: "#48de94"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="black" strokeWidth="2" aria-hidden="true" style={{
    display: "inline"
  }} {...props}>
        <path strokeLinecap="round" strokeLinejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
    </div>;
};

export const SparkleIcon = props => {
  return <div style={{
    display: "inline",
    justifyContent: "center",
    alignItems: "center"
  }}>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{
    display: "inline"
  }} {...props}>
        <path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z" />
        <path d="M20 2v4" />
        <path d="M22 4h-4" />
        <circle cx="4" cy="20" r="2" />
      </svg>
    </div>;
};

The Inspiration Library has two tabs:

* **Inspirations:** A curated universe of design references drawn from real brands. Use them as inspiration for your next design generation.
* **Templates:** Production-ready templates that you can remix and craft an original design from.

{/* ## Use cases

<AccordionGroup>

<Accordion title="Generate a design that matches a brand's aesthetic">

Find an inspiration whose visual style resonates with your project. Click **Use as inspiration** to attach it to the chat, then describe what you want to build. Kombai will generate a design that captures the same look and feel — color temperature, typographic rhythm, spacing density — without copying the brand's content or layout.

**Example prompt:** "Create a pricing page" (with a dark, high-contrast inspiration attached)

</Accordion>

<Accordion title="Kickstart a project's design system">

Open the detail page of an inspiration that fits your project's mood. Click **Copy to style guide** to save its color palette, typography, and corner radius settings as a [Style Guide](./design-system/style-guides). Apply that style guide to every new design you generate to maintain visual consistency from the start.

</Accordion>

<Accordion title="Explore design directions before committing">

Browse and filter the library to find two or three inspirations representing different directions. For example- one minimalist light design and one bold dark design. Use each as inspiration in separate generations to quickly produce side-by-side design explorations before deciding on a direction.

</Accordion>

<Accordion title="Study a brand's design tokens">

Open any inspiration's detail page and expand the **Design tokens** panel to inspect its exact color values, surface system, and accent choices. Use this as a reference when building a custom [Theme](../design/design-system/themes) or when you want to understand what makes a particular visual identity work.

</Accordion>

</AccordionGroup> */}

## Open the Inspiration Library

Click the **Inspirations** button below the chat input box. You can also access it from the [Canvas Gallery](../design/canvas) or the [Design System](../design/design-system/style-guides) page by clicking the **Inspiration Library** button at the top-right of either page.

## Browse inspirations

The Inspirations tab shows a grid of cards, each representing a different brand. Click on a card to open the detail page for that inspiration, or hover over the card and click the **Use as style guide** button to download and attach the inspiration's Style Guide to the chat.

{/* ## Card actions

Hover over any card to reveal the **Use as inspiration** button. Click the arrow on the button to expand the dropdown:

| Action                 | Description                                                                        |
| ---------------------- | ---------------------------------------------------------------------------------- |
| **Use as inspiration** | Attaches the inspiration to the Kombai chat as design context for your next prompt |
| **View details**       | Opens the full detail page for the inspiration                                     | */}

## Inspiration detail page

Click any card to open its detail page. Here's the list of actions and information you can find on the detail page:

### Use as style guide

The primary action on the detail page is the **Use as style guide** button. Clicking it saves the inspiration's color palette, typography, and other tokens as a new [Style Guide](../design/design-system/style-guides) in your workspace and attaches it to the Kombai chat so it's applied to your next generation.

### Preview

The top of the page shows a live preview of the brand's site.

### Design Reference

Below the preview is the **Design Reference**: A structured write-up of the brand's visual system, covering colors, typography, layout, shapes, motion, iconography, dos & don'ts, and known gaps. Expand the **Design tokens** panel inside it to inspect raw token values (color variables, type ramp, radius scale, etc.).

### Palette and Typography panels

The pallete and typography panels on the right side of the page list out the hex values of the colors used in the brand's palette and the font families used in the brand's typography.

## Browse templates

Templates are production-ready tasteful designs that you can remix in Kombai to create original work. Unlike inspirations, which serve as visual references, a template is a complete design that lands directly on your canvas, ready to be customised with your own content and branding.

To browse all the templates, switch to the **Templates** tab in the Inspiration Library.

### Preview a template

Click any template card to open a full live preview of the template in a new browser tab. Use the preview to inspect the design at full fidelity, typography, imagery, layout, and interactions, before deciding to remix it.

### Use a template

Hover over a template card to reveal the **Use template** button. Click **Use template** to download the canvas file of the template in your repo. This also attaches the canvas file to the chat input, along with the **Remix Design** chip, so you can immediately start customizing it. See [Remix a template](#remix-a-template) for what to do next.

## Remix a template

Remixing takes an existing template and repurposes it for a **different use case** while keeping the design itself unchanged. The output is a brand new design that faithfully mirrors the source: same sections, same layout, same animations, same colors, same typography. Only the copy (text content) and the assets (images / videos / illustrations / icons) change, so the design now speaks to your product, audience, and value proposition.

### How to remix

1. Open the **Templates** tab and click **Use template** on the design you want to start from.
2. The template canvas is added to your repo and attached to the chat with a **Remix Design** chip.
3. Describe the new use case in your prompt, e.g.:
   > *"Remix this into a landing page for a meal-kit delivery service."*
4. Before generating any new images or videos, Kombai will list the assets it plans to replace and ask for your approval (including cost). You can approve generation, choose stock alternatives, or fall back to neutral placeholders.
5. Kombai generates a new design with your copy and assets in place. The original template node is never overwritten, so you can iterate or branch off it freely.

***

## Resource Library

Kombai's Resource Library contains external frontend resources for UI libraries, design inspirations, colors, typography, animations, and assets. Use it to discover high-quality resources and creative inspiration for building beautiful interfaces.

## Get started

There are two ways to attach a resource:

### `@Resources` command

1. [Launch Kombai extension](/get-started/set-up#launch-kombai-extension) in your IDE.
2. Type `@` in Kombai's chat input box and select **Resources** from the list.
3. Select a resource category from the list, e.g., **Colors**.
4. Select the resource you want to attach, e.g., **Color Hunt**.
5. Prompt Kombai to use the resource.
6. Press <kbd>Enter</kbd> or click the <Send /> button to send the message.

### Resources button

1. [Launch Kombai extension](/get-started/set-up#launch-kombai-extension) in your IDE.
2. Click the **Resources** button below Kombai's chat input box.
3. Click on the resource you want to access.
4. Follow the instructions in the modal to use the resource.

## Usage examples

<AccordionGroup>
  <Accordion icon="cube" title="UI Libraries">
    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 `@magicui` for the cover image of my product cards.
    * `@aceternityui` What component can I use to highlight the product demo on my website?
    * Instead of a carousel, what can I use from `@smoothui` to showcase the client testimonials on my website?
  </Accordion>

  <Accordion icon="wand-magic-sparkles" title="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

    * `@saasframe` suggest 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 some options from `@mobbin`
    * I want to create my portfolio website. Suggest some beautiful, modern portfolio websites from `@framer`
  </Accordion>

  <Accordion icon="palette" title="Colors">
    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 some color palettes that go with my green theme from `@colorhunt`
    * Explore `@goodpalette` and generate some color palettes for my e-commerce website.
    * `@brandcolors` Give me a color palette that is similar to the brand Adidas.
  </Accordion>

  <Accordion icon="font" title="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

    * `@fontpair` What font pair goes best for the title and description of my product card
    * Use Montserrat from `@googlefonts` for all headings in my codebase.
    * Generate a modern, minimal font pair from `@fontpairstudio` for the new blog post page.
  </Accordion>

  <Accordion icon="film" title="Animation Libraries">
    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 `@motion` and apply it to my product catalog cards.
    * Suggest some smooth page scroll animations from `@CodePen GreenSock`
    * Add a confetti animation from `@GSAP` when the user finishes their account wallet setup
  </Accordion>
</AccordionGroup>

## Supported resources

Find the complete list of supported resources [here](/context/mentions#supported-resources).