Build beautifulpiece by piece.
A dark-mode React component library. 17 production-ready components built with TypeScript, Tailwind CSS, and Framer Motion.
Why piece-ui
Everything you need,
nothing you don't.
Zero config setup
One install command. All components ready with TypeScript definitions and Tailwind classes baked in.
Framer Motion powered
Smooth, production-quality animations built into components. No extra setup required.
Copy or install
Use via npm or copy source directly into your project. Your choice — zero lock-in.
Composable by design
Every component works standalone or composes with others seamlessly.
Library
17 components. One import.
Button
A versatile button component with multiple variants, sizes, and optional icon support.
formArticleCard
A rich card component for displaying article previews with cover image, title, description, tags, author info, and publish date.
contentProjectCard
A showcase card for portfolio projects with scroll-driven animations powered by Framer Motion, project image, tech stack tags, and action links.
contentCheckbox
An accessible, customizable checkbox component with support for indeterminate state, custom labels, and keyboard navigation.
formConfirmDialog
A modal confirmation dialog with customizable title, message, and action buttons.
formContactForm
A complete contact form with name, email, and message fields.
formCustomBtn
A highly flexible button component that accepts custom colors, background, padding, and icon.
formFooter
A full-featured footer with animated marquee text, navigation links, social icons, and copyright info.
layoutHeader
A responsive site header with logo, navigation links, and an integrated mobile hamburger menu.
layoutMenuButton
An animated hamburger menu toggle button.
layoutNoiseBackground
A utility component that renders a subtle noise texture overlay.
animationSocialIcon
An SVG icon component supporting 8+ social platforms: GitHub, Twitter/X, LinkedIn, Behance, Dribbble, Instagram, YouTube, and Website.
contentSectionWrapper
A responsive layout wrapper for page sections.
layoutSectionHeader
A section heading with an optional index number, title, subtitle, and a 'View All' action link.
layoutSpotlightReveal
An advanced Framer Motion animation component that reveals content with a spotlight effect on hover.
animationLine1
A decorative animated vertical line component for the left side of a layout.
animationLine2
A decorative animated vertical line component for the right side of a layout.
animationStart building in seconds.
Install piece-ui, import your components, and ship. No build steps, no configuration.