Does Resources Library work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Resources Library

Resource library with type tabs and search across guides, webinars, templates and reports.

Type: Content section
Styles: Light, Enterprise
Licence: Charcoal UI Pro

About Resources Library

Resources Library collects guides, webinars, templates and reports in one grid, with tabs for each type, a search box and tiles that each get their own pattern so the page looks designed without cover images.

It is a full-width content section for React and Tailwind CSS 4, in a light and enterprise style. Preview it at any width above, then install it with one command.

When to use Resources Library

Marketing resource hubs.
Research institutes.
Developer portals.
Course and learning platforms.

How it is built

The active tab underline slides between types, tiles animate as the list changes, and resources take a title, type, meta and blurb.

It has no component dependencies beyond the shared utilities, so it is one file to read and change.

Goes well with Resources Library

Resources Library is part of a full template, so you can see it in a finished page.

Archive template: A library people can search.
Blog Grid: A React blog index with a wide featured post, grid and tag filters
Blog Featured: A magazine-style React front with a serif lead story and most-read list
Changelog: A React changelog with sticky version dates, screenshots and type filters
Newsletter Issues: A React newsletter landing block with sign-up, reader proof and archive

Install Resources Library

npx shadcn@latest add @charcoal/resources-library

Resources Library is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Resources Library work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Resources Library as Markdown