ProjectCard

contentnew

A showcase card for portfolio projects with scroll-driven animations powered by Framer Motion, project image, tech stack tags, and action links.

Piece UI

A modern component library built with React, TypeScript, and Tailwind CSS. Designed for portfolio sites with dark aesthetics.

ReactTypeScriptTailwind CSS

Live Site

Project preview

1Installation

Install the package:

$npm install piece-ui

Import the component:

tsx

1import { ProjectCard } from "piece-ui";

⚠

Peer dependencies required

This component requires: framer-motion

$npm install framer-motion

2Usage

Basic usage

tsx

1import { ProjectCard } from "piece-ui";
2
3export default function Example() {
4  return (
5    <ProjectCard
6      title="Piece UI"
7      description="A modern component library built with React, TypeScript, and Tailwind CSS."
8      image="/project-preview.jpg"
9      tags={["React", "TypeScript", "Tailwind"]}
10      liveUrl="https://piece-ui.dev"
11      repoUrl="https://github.com/aymaneatigui/piece-ui"
12    />
13  );
14}

3Props

Prop	Type	Default	Description
`title`req	`string`	—	Project name.
`description`req	`string`	—	Project description.
`image`	`string`	—	Project screenshot or preview image.
`tags`	`string[]`	—	Tech stack or feature tags.
`liveUrl`	`string`	—	Link to live demo.
`repoUrl`	`string`	—	Link to source repository.
`motionValue`	`MotionValue<number>`	—	Framer Motion value for scroll-driven effects.

ArticleCard

Checkbox