Chipa Kit is a marketplace for production-ready UI components. You can browse, download, copy, or import components directly into your IDE -- all for free. This guide walks you through every step.
Create an Account#
Chipa Kit uses OAuth authentication so you never need to remember another password. We support two providers:
- GitHub -- recommended for developers. We pull your avatar, display name, and username automatically.
- Google -- sign in with your Google account for a quick setup.
How to sign up
- Click Sign In in the top navigation bar.
- Choose Continue with GitHub or Continue with Google.
- Authorize the Chipa Kit application when prompted.
- You will be redirected back to Chipa Kit with your account ready to use.
No account required for browsing. You can search and view the full gallery without signing in. An account is only needed to download, copy code, upload components, or use premium features.
Browse the Gallery#
The Component Gallery is the main way to discover components. You can access it from the homepage or the navigation bar.
Search and filter
- Keyword search -- type any term (e.g. "hero section", "pricing table") to find matching components by title, description, or tags.
- Category filter -- narrow results to a specific category like Navigation, Forms, Hero Sections, Cards, etc.
- Framework filter -- filter by React, Vue, HTML, or Svelte.
- Styling filter -- filter by Tailwind CSS, plain CSS, or SCSS.
Component cards
Each component card shows a preview thumbnail, title, creator name, download count, and tags. Click a card to view the full component detail page with live preview, file list, and metadata.
Pro tip: Use the sort options to find trending components (most downloads this week) or the newest additions.
Download Components#
Every component can be downloaded as a ZIP file containing all source files, assets, and a README.
Steps to download
- Navigate to a component detail page.
- Click the Download ZIP button.
- Extract the ZIP into your project directory.
- Install any listed dependencies (shown in the component metadata).
- Import the component into your code.
File size limits: Individual code files are capped at 500KB, images at 5MB, and the total package at 10MB. Most components are well under these limits.
Copy Code#
If you only need one or two files, you can copy code directly from the component detail page without downloading the full ZIP.
Steps to copy
- Navigate to the component detail page.
- Scroll to the Files section.
- Click on a file to expand its contents.
- Click the Copy button (clipboard icon) in the top-right corner of the code viewer.
- Paste the code into your project.
Each file has its own copy button, so you can pick and choose exactly which files you need.
MCP Quick Start#
The MCP (Model Context Protocol) server lets you search and import components directly from AI-powered IDEs like Claude Desktop, Cursor, VS Code, and Windsurf.
Quick setup
Add the Chipa Kit MCP server to your IDE configuration. Here is the minimal config for Claude Desktop:
{
"mcpServers": {
"chipa-kit": {
"command": "npx",
"args": ["@chipa-kit/mcp"]
}
}
}Once configured, ask your AI assistant to search for and import components:
"Find a React hero section component with Tailwind and import it into my src/components/ folder"For complete setup instructions for all supported IDEs, see the MCP Integration guide.
Next Steps#
Now that you know the basics, explore these guides:
- Creator Guide -- learn how to upload and manage your own components.
- MCP Integration -- full MCP server setup for Claude Desktop, Cursor, VS Code, and Windsurf.
- API Reference -- build your own integrations with the public REST API.
- FAQ -- answers to common questions about licensing, moderation, and features.