LinkApp Component Registry

Component registry for LinkApps using the shadcn/ui registry system.

Components

• Button - Versatile button component with multiple variants
• Switch - Toggle switch component for on/off states

Development

# Install dependencies
npm install

# Build the registry
npm run registry:build

# Start dev server
npm run dev

Building the Registry

The registry uses the shadcn CLI to build component JSON files:

npm run registry:build

This will generate JSON files in public/r/ directory:

• public/r/button.json
• public/r/switch.json
• public/r/utils.json

Deploying to Vercel

The registry is configured to deploy to Vercel as a static site.

Prerequisites

1. Install Vercel CLI globally:

npm install -g vercel

2. Login to Vercel:

vercel login

Deployment Steps

1. Navigate to the registry directory:

cd packages/registry

2. Build the registry:

npm run registry:build

3. Deploy to Vercel:

npm run deploy

Or use Vercel CLI directly:

# Deploy to preview
vercel

# Deploy to production
vercel --prod

First-Time Setup

When deploying for the first time, Vercel will ask:

• Set up and deploy: Yes
• Which scope: Select your account/team
• Link to existing project: No (for first deployment)
• Project name: Accept default or choose a custom name
• Directory: ./ (current directory)
• Override settings: No

Custom Domain (Optional)

After deployment, you can configure a custom domain:

1. Go to your project in Vercel Dashboard
2. Navigate to Settings > Domains
3. Add your custom domain (e.g., registry.linktr.ee)
4. Follow the DNS configuration instructions

Environment Configuration

By default, the linkapp add command uses http://localhost:3001/r for local development.

To use your deployed registry:

1. Option 1: Environment Variable

Set the registry URL in your LinkApp project:

# In your LinkApp project .env file
LINKAPP_REGISTRY_URL=https://your-registry.vercel.app/r

2. Option 2: Command Line Flag

linkapp add button --registry https://your-registry.vercel.app/r

3. Option 3: Update Default in Code

Modify packages/linkapp/src/commands/add.ts to change the DEFAULT_REGISTRY constant.

Using Components in LinkApps

Once the registry is deployed, developers can install components using:

# Using the linkapp CLI
linkapp add button
linkapp add switch

# Or using a custom registry URL
npx shadcn@latest add https://registry.linktr.ee/r/button.json

Adding New Components

1. Create your component in registry/default/ui/[component-name].tsx
2. Add the component definition to registry.json
3. Run npm run registry:build
4. Test the component installation

Registry Structure

packages/registry/
├── lib/
│   └── utils.ts              # Utility functions
├── registry/
│   └── default/
│       └── ui/
│           ├── button.tsx    # Button component
│           └── switch.tsx    # Switch component
├── public/
│   └── r/                    # Generated registry JSON files
├── components.json           # shadcn configuration
├── registry.json            # Registry definition
└── package.json

License

UNLICENSED - © Linktree