penpot/docs/user-guide/design-systems/libraries.njk

---
title: Libraries
order: 2
desc: Use Penpot's libraries for reusable design elements! Learn to create, manage, and share components, colors, and typography. Try Penpot - it's free!
---
<h1 id="libraries">Libraries</h1>

<p class="main-paragraph">Libraries may include components, colors and typographies. Learn how to create and manage them to better organize the pieces of your designs and speed your workflow.</p>

<h3 id="file-libraries">File libraries</h3>
<p>Each file has its own file library which is where the assets that belong to this file are stored.</p>
<p>You have two ways to access the file library from the file <a href="/user-guide/first-steps/the-interface/#interface-workspace">workspace</a>:</p>
<ul>
  <li>Click the assets tab icon at the left sidebar.</li>
  <li>Press <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</li>
</ul>
<figure>
  <img src="/img/libraries/assets-tab.webp" alt="Library assets tab">
</figure>

<h3 id="shared-libraries">Shared libraries</h3>
<h4>Publish as shared library</h4>
<p>You can publish any regular file as a shared library. This means that the file library of this file will be available to be connected to other files that exist in the same team, so its library assets can be reused.</p>
<p>There are two ways to publish a library:</p>
<ul>
  <li>Using the file main menu.</li>
  <li>From the libraries panel, that you can launch by clicking on the "Libraries" button that is found at the assets tab.</li>
</ul>
<figure>
  <img src="/img/libraries/libraries-publish-menu.webp" alt="Publish library">
  <figcaption>Publishing a library from the main menu</figcaption>
</figure>
<figure>
  <img src="/img/libraries/libraries-publish-panel.webp" alt="Publish library">
  <figcaption>Publishing a library from the libraries panel</figcaption>
</figure>

<h4>Unpublish a shared library</h4>
<p>You can unpublish any library anytime the same way you can publish it, both from the file menu and the libraries panel.</p>
<p>Unpublishing a library will disconnect it from the files where it was connected. The assets that have already been used in other files will remain, but no longer linked with the now unpublished library.</p>

<h4>Library updates</h4>
<p></p>
<figure>
  <img src="/img/libraries/libraries-updates.webp" alt="Update libraries">
</figure>

<h4>Connect shared libraries</h4>
<p>To add a Shared Library from another file, launch the libraries panel, then search and select the available libraries. If you see the message "There are no Shared Libraries available", start by <a href="/user-guide/design-systems/libraries/#shared-libraries">publishing other files as a shared library</a> or add from our <a href="https://penpot.app/libraries-templates">Libraries & templates</a>.</p>
<figure>
  <video title="Connecting a shared library" muted="" playsinline="" controls="" width="100%" poster="/img/libraries/libraries-launch.webp" height="auto">
    <source src="/img/libraries/libraries-launch.mp4" type="video/mp4">
  </video>
</figure>

<h4>Disconnect shared library</h4>
<p>You can disconnect any library anytime from the libraries panel just by clicking on the disconnect button.</p>
<figure>
  <img src="/img/libraries/libraries-disconnect.webp" alt="Disconnect libraries">
</figure>

<h4>Use shared libraries</h4>
<p>Shared libraries will be listed at the assets panel, at the workspace left sidebar. You can expand and collapse them to access the assets of each connected shared library.</p>
<figure>
  <img src="/img/libraries/libraries-sidebar.webp" alt="Connected libraries list">
</figure>

<h4>Open shared library file</h4>
<p>Click on the arrow icon at the right of a shared library name to go to the file where the library is and edit its contents.</p>
<figure>
  <img src="/img/libraries/libraries-open.webp" alt="Open libraries">
</figure>

<h4 id="import-tokens-from-library">Import tokens from a connected library</h4>
<p>If a shared library you have connected includes design tokens, you can copy them into the current file from the <strong>Libraries</strong> modal.</p>
<p>The <strong>Import tokens</strong> button appears only next to connected libraries that define tokens. Libraries without tokens do not show this control.</p>
<ol>
  <li>Open the <strong>Libraries</strong> panel from the assets tab.</li>
  <li>Under <strong>Libraries in this file</strong>, find the connected library that includes tokens and click <strong>Import tokens</strong> (beside the disconnect control).</li>
  <li>Review the confirmation dialog. Importing brings in the library's full token data, including sets and themes when the library defines them.</li>
  <li>Click <strong>Import tokens</strong> to apply, or <strong>Cancel</strong> to go back without changes.</li>
</ol>
<p class="advice">Importing tokens from a library replaces all tokens, sets and themes in the current file. Export your tokens first (from the Tokens tab → Tools → Export) if you need to keep a backup.</p>
<p>This is separate from connecting the library for components, colors and typographies. You can use shared assets without importing tokens, and import tokens only when you want the file's token setup to match the library.</p>
<figure>
  <img src="/img/libraries/libraries-import-tokens-button.webp" alt="Import tokens button in the Libraries modal">
  <figcaption>The Import tokens button on a connected library that includes tokens.</figcaption>
</figure>
<figure>
  <img src="/img/libraries/libraries-import-tokens-confirm.webp" alt="Import tokens from library confirmation dialog">
  <figcaption>Confirm before importing. All current tokens, sets and themes in this file will be replaced.</figcaption>
</figure>