Your personal vault for React components. Push, pull, and sync reusable components across projects ā like shadcn/ui but for YOUR code.
npm install composter-cli> Your personal vault for storing, syncing, and retrieving reusable React components from the command line.



Composter is like your personal shadcn/ui ā but for YOUR components. Push components from any project, pull them into new ones, and let AI assistants access your vault via MCP.
---
Ever built an amazing component and wanted to reuse it in another project? Tired of copy-pasting files and forgetting dependencies? Composter solves this:
- No more copy-paste chaos ā Push once, pull anywhere
- Dependencies tracked automatically ā Never forget to install packages again
- Smart bundling ā Relative imports are bundled, npm packages are tracked
- AI-ready ā Let Claude, Cursor, or Copilot access your vault via MCP
- Private by default ā Your components, your vault, your control
---
| Feature | Description |
|---------|-------------|
| š¤ Push | Upload components with all local dependencies auto-bundled |
| š„ Pull | Download components with original folder structure preserved |
| š Categories | Organize components into logical groups (UI, Hooks, Utils) |
| š Smart Bundling | Automatically crawls ./ and @/ imports |
| š¦ Dependency Detection | Reads your package.json and tracks npm packages |
| ā ļø Missing Dep Alerts | Tells you exactly what to npm install after pulling |
| š¤ MCP Integration | Works with AI assistants via Model Context Protocol |
---
``bash`
npm install -g composter-cli
`bash`
npx composter-cli login
`bash`
composter --version
---
Visit composter.vercel.app and sign up.
`bash`
composter login
`
=== Composter Login ===
? Email: you@example.com
? Password: **
Logged in successfully!
Session expires: 2025-01-09T12:00:00.000Z
`
`bash`
composter mkcat ui
`bash`
composter push ui "Fancy Button" ./src/components/FancyButton.tsx
``
Scanning FancyButton.tsx and its dependencies...
š¦ Bundled 3 file(s) and detected 2 external package(s).
ā
Success! Component 'Fancy Button' pushed to 'ui'.
`bash`
composter pull ui "Fancy Button" ./src/components/
`
ā³ Fetching 'Fancy Button' from 'ui'...
š¦ Unpacking 3 file(s) into: /Users/you/new-project/src/components
+ FancyButton.tsx
+ FancyButton.module.css
+ useButtonAnimation.ts
ā ļø Missing Dependencies (Run this to fix):
npm install framer-motion clsx
ā
Component 'Fancy Button' pulled successfully!
`
---
Authenticate with your Composter account.
`bash`
composter login
What happens:
- Prompts for email and password
- Creates a JWT session token
- Stores session at ~/.config/composter/session.json
- Session lasts 30 days
---
Create a new category to organize your components.
`bash`
composter mkcat hooks
Output:
``
Category 'hooks' created successfully!
ID: clx1234567890
Rules:
| Rule | Example |
|------|---------|
| No spaces | ā my buttons ā ā
buttons |superlongname
| Max 10 characters | ā ā ā
utils |
| Unique per user | Each category name must be unique |
---
List all your categories.
`bash`
composter ls
Output:
``
ui hooks utils layouts forms
---
Push a component to your vault.
`bash`
composter push ui "Data Table" ./src/components/DataTable/index.tsx
Arguments:
| Argument | Description | Example |
|----------|-------------|---------|
| category | Target category name | ui |title
| | Human-readable component name | "Data Table" |file-path
| | Entry file path | ./src/components/DataTable.tsx |
What gets bundled:
``
Your Entry File
ā
āāā ./relative/imports ā ā
Bundled into package
āāā @/alias/imports ā ā
Bundled (assumes @/ = src/)
āāā ./styles.css ā ā
Bundled
ā
āāā External packages ā š¦ Tracked as dependencies
āāā react
āāā framer-motion
āāā @tanstack/react-table
Example Output:
``
Scanning DataTable.tsx and its dependencies...
š¦ Bundled 5 file(s) and detected 4 external package(s).
ā
Success! Component 'Data Table' pushed to 'ui'.
---
Pull a component from your vault.
`bash`
composter pull ui "Data Table" ./src/components/
Arguments:
| Argument | Description | Example |
|----------|-------------|---------|
| category | Source category name | ui |title
| | Component name to pull | "Data Table" |target-directory
| | Where to save files | ./src/components/ |
What happens:
1. Fetches component bundle from your vault
2. Recreates original folder structure
3. Writes all files to target directory
4. Checks your package.json for missing dependenciesnpm install
5. Suggests command if needed
Example Output:
`
ā³ Fetching 'Data Table' from 'ui'...
š¦ Unpacking 5 file(s) into: /Users/you/project/src/components
+ DataTable/index.tsx
+ DataTable/DataTableHeader.tsx
+ DataTable/DataTableRow.tsx
+ DataTable/DataTablePagination.tsx
+ DataTable/data-table.css
ā ļø Missing Dependencies (Run this to fix):
npm install @tanstack/react-table lucide-react
ā
Component 'Data Table' pulled successfully!
`
---
When you push a component, the CLI performs intelligent dependency crawling:
`tsx
// Entry: src/components/Button.tsx
import { cn } from "@/lib/utils" // ā
Bundled (alias import)
import { useToggle } from "./hooks/toggle" // ā
Bundled (relative import)
import "./button.css" // ā
Bundled (CSS import)
import { motion } from "framer-motion" // š¦ Tracked as npm dependency
import React from "react" // š¦ Tracked as npm dependency
`
The @/ alias is automatically resolved to your src/ directory:
``
@/components/Button ā src/components/Button
@/lib/utils ā src/lib/utils
@/hooks/useAuth ā src/hooks/useAuth
The crawler automatically resolves these extensions:
``
import { Button } from "./Button"
ā
Tries: Button.tsx ā Button.ts ā Button.jsx ā Button.js ā Button/index.tsx
npm dependencies are tracked with versions from your package.json:
`json
// Your package.json
{
"dependencies": {
"framer-motion": "^10.16.0",
"clsx": "^2.0.0"
}
}
// Stored with component
{
"framer-motion": "^10.16.0",
"clsx": "^2.0.0"
}
`
---
Let AI assistants like Claude, Cursor, and GitHub Copilot access your vault via MCP.
Login once, then auto-configure your IDE/assistant:
`bashLogin (if you haven't)
composter login
Then restart your AI assistant ā done!
#### Manual config (if you prefer)
`json
{
"mcpServers": {
"composter": {
"command": "npx",
"args": ["composter-mcp"]
}
}
}
`Config file locations:
- Cursor:
.cursor/mcp.json (project root)
- VS Code: .vscode/mcp.json (project root)
- Claude Desktop (Linux): ~/.config/claude/claude_desktop_config.json
- Claude Desktop (macOS): ~/Library/Application Support/Claude/claude_desktop_config.json
- Claude Desktop (Windows): %APPDATA%\\Claude\\claude_desktop_config.json
- Windsurf: ~/.codeium/windsurf/mcp_config.json$3
| Tool | Description |
|------|-------------|
|
search_components | Search your vault by name or category |
| list_categories | List all your categories |
| list_components | List components in a category |
| read_component | Read full source code of a component |$3
- "Search my Composter vault for button components"
- "What categories do I have in Composter?"
- "Read the DataTable component from my ui category"
---
š File Locations
| File | Location | Purpose |
|------|----------|---------|
| Session |
~/.config/composter/session.json | JWT auth token |
| Config Dir | ~/.config/composter/ | All CLI data |$3
`json
{
"jwt": "eyJhbGciOiJSUzI1NiIs...",
"cookies": "session_token=...",
"createdAt": "2024-12-10T10:00:00.000Z",
"expiresAt": "2025-01-09T10:00:00.000Z"
}
`---
š Troubleshooting
$3
Your session doesn't exist or has expired.
`bash
composter login
`$3
Sessions last 30 days. Re-authenticate:
`bash
composter login
`$3
Category names have strict rules:
`bash
ā These will fail
composter mkcat "My Components" # No spaces
composter mkcat verylongcatname # Max 10 charsā
These work
composter mkcat ui
composter mkcat hooks
composter mkcat utils
`$3
Check your file path:
`bash
Make sure you're in the right directory
pwdUse relative path from current directory
composter push ui "Button" ./src/components/Button.tsxOr use absolute path
composter push ui "Button" /Users/me/project/src/components/Button.tsx
`$3
- Check the exact component title (case-sensitive)
- Verify the category name
- List your components on the web dashboard
$3
The CLI tells you what's missing. Just run:
`bash
npm install package1 package2 package3
`$3
- Check your internet connection
- Verify the backend is accessible:
https://composter.onrender.com/api/health
- Try logging in again---
š Web Dashboard
Manage your components visually at composter.vercel.app
- š Browse all components
- šļø Live code preview with Sandpack
- āļø Edit component metadata
- š View dependency graphs
- š Copy code snippets
- šļø Delete components
---
š Security
| Feature | Description |
|---------|-------------|
| š JWT Auth | Secure token-based authentication |
| š Local Storage | Tokens stored locally, never shared |
| š User Isolation | Each vault is completely private |
| š HTTPS | All API traffic encrypted |
| ā° Expiring Sessions | 30-day token lifetime |
---
š Examples
$3
`bash
Push a button with all its dependencies
composter push ui "Shadcn Button" ./src/components/ui/button.tsx
`$3
`bash
composter push hooks "useLocalStorage" ./src/hooks/useLocalStorage.ts
`$3
`bash
Push a data table that imports multiple files
composter push features "User Table" ./src/features/users/UserTable.tsx
`$3
`bash
Create components folder if needed
mkdir -p src/componentsPull your button
composter pull ui "Shadcn Button" ./src/components/ui/Install any missing deps
npm install
``---
| Resource | URL |
|----------|-----|
| š Web App | composter.vercel.app |
| š¦ npm | npmjs.com/package/composter-cli |
| š» GitHub | github.com/binit2-1/Composter |
| š Issues | Report a bug |
| š¤ MCP Docs | MCP Setup Guide |
---
Contributions welcome! See CONTRIBUTING.md
---
MIT Ā© binit2-1
---
Built with ā¤ļø for developers who hate copy-pasting components