Archive: Research library template

A library people can search.

For research libraries, knowledge hubs and resource centres: a search hero, a typed resource library, a blog grid, a newsletter archive and a sitemap footer.

About the Archive template

Archive is for research libraries and resource centres. A search hero over twenty years of documents, a typed resource library, a blog grid and a monthly newsletter.

A library people can search. It is a complete research library landing page for React and Tailwind CSS 4, assembled from 6 Charcoal UI sections.

Who Archive is for

• Research institutes.
• Think tanks and foundations.
• Marketing resource hubs.
• University libraries.

What is inside

6 sections, top to bottom:

• Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
• Hero Search: Marketplace hero built around one big search box with typed example queries and category chips.
• Resources Library: Resource library with type tabs and search across guides, webinars, templates and reports.
• Blog Grid: Blog index where the newest post runs wide, the rest sit in a grid and tag chips filter them.
• Newsletter Issues: Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
• Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.

How it is built

Resource tiles get patterns by type, so no cover images are needed. Every section is a separate Charcoal UI section, so you can reorder, remove or restyle any of them, and the accent colour is one CSS variable on the page wrapper.

Install Archive

npx shadcn@latest add @charcoal/archive

Templates are part of Charcoal UI Pro. One seat covers all 100 templates, 107 sections and 300 Pro components. The command installs the page and every section and component it uses, so it runs the moment it lands.

Frequently asked questions

Can I use Archive for a client site?

Yes. A Pro seat covers unlimited personal and commercial projects, client work included.

Is Archive a Next.js template?

It is a React 19 page that works in Next.js (App Router or Pages Router), Vite, Remix and Astro. Drop it into a route and it renders.

Sections in this template

• Navbar Floating: A glass pill that hides on scroll down, with a gliding hover highlight and a mobile sheet.
• Hero Search: Marketplace hero built around one big search box with typed example queries and category chips.
• Resources Library: Resource library with type tabs and search across guides, webinars, templates and reports.
• Blog Grid: Blog index where the newest post runs wide, the rest sit in a grid and tag chips filter them.
• Newsletter Issues: Newsletter landing block: subscribe form with reader count beside an archive of recent issues.
• Footer Columns: Brand, four link columns, a newsletter field and a bottom bar.

Archive as Markdown