/ COMPSc
  • Premium
  • Comps
  • Icons
  • Tools
  • Pricing
  • Contact
  • Templates
  • Premium
  • Comps
  • Icons
  • Tools
  • Pricing
  • Contact
  • Templates
K

Foundation

IntroductionQuick Start

Orchestration

Wireframe Builder
NEW
Background Tool
Coming soon
Icon Library
Palette Studio
NEW

Components

Loading...
Free AccessRegistry v1.0

Pro Tip: Full Preview

Click the Maximize button in the top-right corner of any component card to open it in Full Preview mode. This allows you to inspect layouts and test responsiveness on desktop, tablet, and mobile viewports with ease.

Upgrade Now

Access Pro Library

Unlock source code for 500+ premium animated modules.

Go Pro

Premium Benefits

  • 500+ Premium Components
  • Clean Copy-Paste TSX/JSX Code
  • Responsive Framer Motion Layouts
  • Direct Figma & Palette Tools Support
  • Lifetime Updates & Access

Quick Start Guide

Follow this 3-step setup guide to seamlessly implement premium animated modules in your React and Next.js projects.

01

Install Dependencies

Compiece components are powered by Framer Motion for premium animations and Lucide React for consistent icons. Run this setup command in your frontend root directory:

npm install framer-motion lucide-react
02

Configure Tailwind Styling (Optional)

Ensure Tailwind CSS is installed in your project. Optionally, append our custom scrollbars and dark-mesh tokens inside your globals.css to align card displays:

/* Custom scrollbar config for modular frames */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}
03

Copy Component Logic

Go to any component page via the sidebar. Open the options menu and select 'Copy Code'. You will see two options: • TypeScript (TSX): Copies strict type definitions and interfaces. Best if your project files use the .tsx extension. • JavaScript (JSX): Copies standard React logic without strict types. Best if your project files use the .jsx extension.

// Click the TSX or JSX button to copy, then paste it directly into your project's component file.

Component Interaction & Copy Workflow

Each component in the registry is wrapped inside an interactive card system designed to make visual testing, code extraction, and deployment simple and seamless. Here is how you can interact with and copy components:

A

Full Preview Guide

Clicking the Maximize button in the top-right corner opens the component isolated in a new tab. In this view, you can easily test responsiveness by resizing the browser and verify exact animations and states without any layout restrictions.

B

Menu Options & Action Panel

Clicking the Arrow Icon in the top-right opens the Action Panel overlay. Inside this menu, you have three core options:

  • Copy CodeAllows you to copy either JavaScript (JSX) or TypeScript (TSX) source code directly to your clipboard.
  • Full ViewOpens the component in a clean, sandboxed tab for dedicated full-viewport testing.
  • DetailsOpens the documentation profile containing customization properties, layout options, and design variants.
C

How to Use Details Page

Details Page ko open krke aap kisi bhi component ki real-time behaviour aur output dynamically analyze kr skte hain:

  • Simulator ControlsNavbar me top-right corners me toggle options hain (Desktop & Mobile view). Inhe switch krke check krein ki aapka component multi-viewport screens pr perfectly scale ho rha hai ya nhi.
  • TS / JS FormatsSidebar me format indicators pr click krke 'TypeScript' (TSX structure support ke liye) ya 'JavaScript' (standard JSX structure) format customize kr skte hain.
  • Tier VerificationComponent locked hai ya unlocked, ye aapko left side me custom badge block ke physical metadata se clear ho jayega. FREE and unlocked modules me dynamic status code extraction clear rehta hai.
  • Detailed Code ViewPage ke extreme bottom section me deep-code scroll box implementation code highlight krke clear representation layout screen pr highlight krta hai, jise single click se target location code copies complete kr skte hain.