This component no longer exists. It was in atlas-ui’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.

Project Gallery

atlas-ui/project-gallery-html

RemovedUtility

A Project Gallery with an interactive modal using HTML, CSS, JavaScript and Motion.

Install it

npx shadcn@latest add https://atlasui.dev/r/project-gallery-html.json

Source

registry/html/atlasui/project-gallery/index.htmlatlasui.dev/r/project-gallery-html.json

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Project Gallery - Atlas UI</title>
7    <link rel="stylesheet" href="style.css" />
8  </head>
9  <body>
10    <section id="project-gallery" class="project-gallery">
11      <a href="#" class="gallery-item">
12        <div class="project-image-container" style="background-color: #efe8d3">
13          <img src="https://atlasui.dev/assets/atlas-ui.png" alt="Atlas UI" />
14        </div>
15        <h2>Atlas UI</h2>
16        <p>Frontend</p>
17      </a>
18 
19      <a href="#" class="gallery-item">
20        <div class="project-image-container" style="background-color: #706d63">
21          <img src="https://atlasui.dev/assets/portfolio.png" alt="Portfolio" />
22        </div>
23        <h2>Portfolio</h2>
24        <p>Design &amp; Development</p>
25      </a>
26 
27      <a href="#" class="gallery-item">
28        <div class="project-image-container" style="background-color: #fafbfc">
29          <img
30            src="https://images.unsplash.com/photo-1540652980807-db4655e8fa60?q=80&w=2130&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
31            alt="Tokyo Art"
32          />
33        </div>
34        <h2>Tokyo Art</h2>
35        <p>Photography</p>
36      </a>
37 
38      <a href="#" class="gallery-item">
39        <div class="project-image-container" style="background-color: #404040">
40          <img
41            src="https://images.unsplash.com/photo-1515705576963-95cad62945b6?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
42            alt="Milky Way"
43          />
44        </div>
45        <h2>Milky Way</h2>
46        <p>Photography</p>
47      </a>
48    </section>
49  </body>
50  <script type="module" src="script.js"></script>
51</html>

What it pulls in

npm packages

motion

Files it writes

registry/html/atlasui/project-gallery/index.html
registry/html/atlasui/project-gallery/style.css
registry/html/atlasui/project-gallery/script.js

Project Gallery

Install it

Source

What it pulls in

Files it writes

Built for the same person as BlockDex