Components Folder

An interactive multi-tab component folder showcasing live AI Chat, Real-time Analytics, Auth Form, and CLI Terminal components inside a sleek desktop window interface. Built with Tailwind CSS and native CSS transitions — no animation library.

Design components folder

The cards fan out once the folder scrolls into view, then retract one at a time on hover.

color: accents the folder and every card — a preset name (indigo, rose, emerald, zinc) or any CSS colour. It works by overriding the --primary variable on the wrapper, so leaving it unset inherits your theme.

Accent Color

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 Design Components Folder

npx shadcn@latest add @algorize-ui/design-components-folder

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

Install dependencies

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

Custom labels

title"Design": is the first line of the wordmark on the folder tab, defaulting to Design.
subtitle"Components": is the second line, defaulting to Components.

Installation

Install Design Folder Box

npx shadcn@latest add @algorize-ui/design-folder-box

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

Install dependencies

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

Props Reference

Component	Prop	Type	Default	Description
`DesignComponentsFolder`	`color`	`string`	`undefined`	Accent for the folder and its cards. Accepts `"indigo"`, `"rose"`, `"emerald"`, `"zinc"` or any CSS color; it is applied by overriding the `--primary` variable on the wrapper. Left unset (or set to `"primary"`) it inherits your theme.
`DesignComponentsFolder`	`className`	`string`	`undefined`	Merged onto the outer section for layout overrides.
`DesignFolderBox`	`title`	`string`	`"Design"`	First line of the wordmark on the folder tab.
`DesignFolderBox`	`subtitle`	`string`	`"Components"`	Second line of the wordmark on the folder tab.
`DesignFolderBox`	`color`	`string`	`undefined`	Same accent resolution as the hub — a preset name, a CSS color, or unset to inherit the theme.
`DesignFolderBox`	`...divProps`	`React.HTMLAttributes<HTMLDivElement>`	`—`	Every remaining prop is spread onto the root `section`, and the component forwards its ref.