Designs Toolkit

A pinned resource toolkit grid inspired by creative studio moodboards and curated design directories. Cards feature authentic glossy 3D pushpins, custom brand icon badges, staggered column vertical rhythm, and connected corkboard path lines across a subtle blueprint grid.

Each card highlights a curated tool with bold numbering, custom accent-themed borders and glows, brand insignia, and customizable interactions. Built with pure React, Tailwind CSS, and zero external dependencies.

Pinned toolkit corkboard

Staggered 3-column pinned resource cards with 3D pushpins, custom icons, and connected dashed paths.

itemscreativeTools: passes custom toolkit items with titles, descriptions, icons, and empty onClick handlers.
showDashedLinetrue: renders decorative dashed path lines connecting the cards across columns.
showGridtrue: overlays a subtle blueprint grid texture with soft radial fade mask.
interactivetrue: enables hover lift, accent glow shadow, and pushpin bounce micro-interactions.

Animation Duration1150ms

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Designs Toolkit

npx shadcn@latest add @algorize-ui/designs-toolkit

components/custom/blocks/DesignsToolkitBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Designs Toolkit needs only the cn helper and lucide-react, which the installation guide already put in place.

Examples

Winding Roadmap Pathway

Tilted pastel cards pinned along an alternating zigzag timeline with notebook ruled lines and a design partner note.

Setvariant"roadmap": switches to the alternating winding S-curve pathway layout.
showLinestrue: overlays subtle notebook ruled lines across the board background.
showDashedLinetrue: draws a continuous curved S-path connecting the pushpins to the footer partner note.

Clean Grid (Without Dashed Lines)

Minimal pinned card layout configured with custom developer stack tools and icons.

itemsdeveloperTools: passes developer stack items with custom icons, text, and empty onClick handlers.
SetshowDashedLinefalse: to hide the decorative connecting dashed lines.

Features

Authentic 3D Pushpins

Hyper-realistic SVG 3D pushpins with multi-stop radial highlights, depth bevels, and natural contact drop shadows.

Multiple Layout Variants

Switch effortlessly between the staggered 3-column corkboard grid and the winding alternating roadmap timeline pathway.

Brand Badges & Glowing Borders

Each card carries individual accent palettes with matching pastel tinted borders, glowing hover shadows, and custom icon badges.

Pure Reusability & Zero Navigations

Pass any custom items with your own icons, titles, and descriptions. Cards trigger customizable onClick handlers without navigating.

Props Reference

Prop	Type	Default	Description
`variant`	`"grid" \| "roadmap"`	`"grid"`	Layout variant: `"grid"` for the staggered 3-column corkboard, or `"roadmap"` for the winding S-curve pathway.
`items`	`ToolkitItem[]`	`DEFAULT_TOOLKIT_ITEMS`	Array of pinned toolkit cards with number, title, description, icon, colors, and onClick handler.
`title`	`string`	`undefined`	Optional title shown above the pinned toolkit board.
`description`	`string`	`undefined`	Optional subtitle description below the title.
`showDashedLine`	`boolean`	`true`	Whether to render the dashed corkboard or roadmap connecting path lines.
`showGrid`	`boolean`	`true`	Renders subtle blueprint grid pattern across the board background (for grid variant).
`showLines`	`boolean`	`false`	Renders subtle horizontal notebook ruled lines across the background (default true in roadmap).
`footerNote`	`FooterNote`	`undefined`	Custom avatar, text, and highlightText for the roadmap pathway end badge.
`interactive`	`boolean`	`true`	Enables card lift, pin zoom, and accent glow hover micro-interactions.
`animated`	`boolean`	`true`	Enables the graceful sequential card emergence choreography.
`autoStartOnView`	`boolean`	`true`	Triggers the animation when the component scrolls into viewport.
`animationDuration`	`number`	`1150`	Duration in milliseconds for each card's emergence transition and proportional step timing.