Resources 1 - Library grid with type filterPro
A resource library with segmented filter buttons for guides, ebooks, webinars and templates above an animated three-column card grid with cover image, type label and meta. Use it as the main resources hub on a SaaS marketing site.
About Resources 1
A resource library with segmented filter buttons for guides, ebooks, webinars and templates above an animated three-column card grid with cover image, type label and meta. Use it as the main resources hub on a SaaS marketing site.
Resources 1 is a resources block for React and Tailwind CSS, included in Chocolate UI Pro with motion animations that respect reduced-motion settings. It ships as 105 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- resources
- library
- filter
- grid
- guides
- ebooks
Installation
- Set up your project with
npx chocolateui initandnpx chocolateui login(see the installation guide). - Run the Chocolate UI CLI:
npx chocolateui add resources-01Dependencies installed automatically: lucide-react, motion.
Uses: reveal, use-reduced-motion, utils.
Usage
import Resources01 from "@/components/blocks/resources-01"
export default function Page() {
return <Resources01 />
}