vault

A lightweight CLI tool for managing reusable React and Next.js components.

Save components from any project into a local registry, list them, and sync them with a GitHub repository for reuse across multiple codebases. Instead of copy-pasting components between projects or maintaining separate component libraries, vault provides a fast, filesystem-based workflow that fits naturally into existing development habits.

Features

• Save - Store .tsx and .jsx components in a local vault organized by file type
• List - View all saved components at a glance, grouped by TSX and JSX
• Get - Copy components from the vault into your project's components directory
• Delete - Remove specific components from the vault
• Clear - Remove all components from the vault with confirmation prompt
• Global Storage - Components are stored in ~/.vault/ (user's home directory) for access from any project
• Duplicate Detection - Case-insensitive duplicate checking prevents accidental overwrites
• Sync - Push/pull components to GitHub for cross-project sharing (coming soon)

Installation

Using Go Install (Recommended)

go install github.com/Ayroid/vault@latest

Make sure $GOPATH/bin (usually ~/go/bin) is in your PATH:

# Add to your ~/.bashrc or ~/.zshrc
export PATH="$PATH:$(go env GOPATH)/bin"

After installation, you can save files from any project:

vault save ./components/Button.tsx

From Source

git clone https://github.com/Ayroid/vault.git
cd vault
go build -o vault

Move to PATH (optional, if building from source)

# Linux/macOS
sudo mv vault /usr/local/bin/

# Or add to your local bin
mv vault ~/.local/bin/

Usage

Save a component

vault save <path-to-file>

Save .tsx or .jsx component files to your local vault:

vault save ./components/Button.tsx
vault save ./components/Card.jsx

Save with a custom name:

vault save ./Button.tsx --name RoundButton.tsx

Note: Only .tsx and .jsx files are supported. Components are automatically organized into separate folders based on their extension.

List saved components

vault list

View all components currently stored in your vault, organized by file type:

TSX Components
├── Button.tsx
├── Card.tsx
└── Modal.tsx
JSX Components
├── Header.jsx
└── Footer.jsx

Get a component

vault get <component-name>

Copy a component from the vault into your project's components directory:

vault get Button.tsx
vault get Card.jsx

Get with a custom name:

vault get Button.tsx --name PrimaryButton.tsx

The command will:

• Look for components/, app/components/, or src/components/ in your current directory
• If no components directory exists, prompt to create components/vault/
• If a file with the same name exists, prompt to replace, rename, or abort

Delete a component

vault delete <component-name>

Remove a specific component from the vault:

vault delete Button.tsx
vault delete Card.jsx

Clear the vault

vault clear

Remove all components from the vault. You'll be asked to confirm before deletion:

This will delete 5 component(s) from the vault.
Are you sure you want to clear the vault? (y/N):

How It Works

vault uses a simple filesystem-based approach:

1. Components are stored globally in ~/.vault/components/ (user's home directory)
2. TSX components are saved to ~/.vault/components/tsx/
3. JSX components are saved to ~/.vault/components/jsx/
4. Files are saved with their original filenames (or custom names via --name)
5. Duplicate detection is case-insensitive to prevent naming conflicts
6. No configuration files or databases required

Storage Location

Components are stored in the user's home directory:

~/.vault/                   # e.g., /home/username/.vault/
└── components/
    ├── tsx/                # TypeScript React components
    │   ├── Button.tsx
    │   └── Modal.tsx
    └── jsx/                # JavaScript React components
        ├── Header.jsx
        └── Footer.jsx

Commands Reference

Command	Description
vault save <file>	Save a component to the vault
vault save <file> --name <name>	Save a component with a custom name
vault list	List all saved components
vault get <component>	Copy a component from the vault to your project
vault get <component> --name <name>	Copy a component with a custom name
vault delete <component>	Remove a specific component from the vault
vault clear	Remove all components from the vault

Roadmap

• Custom naming with --name flag
• Separate TSX and JSX folders
• Global storage in user's home directory
• Case-insensitive duplicate detection
• vault get command to copy components into projects
• vault delete command to remove specific components
• vault clear command to remove all components
• GitHub sync support
• Component categories/tags
• Search functionality
• Config file support

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

License

MIT