3.4 KiB
Private Registry Authentication
The Creative Tim UI registry supports private components that require API key authentication. This allows you to secure premium or internal components while maintaining the same installation experience.
Private Components
The following components are currently private and require authentication:
testimonials-03- Testimonial with statistics and metricstestimonials-04- Three column testimonials with star ratings
Authentication Methods
The private registry supports multiple authentication methods:
1. Environment Variable (Recommended)
Add your API key to .env.local:
API_KEY=your_api_key_here
Then install private components normally:
npx @creative-tim/ui@latest add testimonials-03
2. Authorization Header
Use Bearer token authentication:
curl -H "Authorization: Bearer your_api_key" \
https://ui.creative-tim.com/r/testimonials-03.json
3. X-API-Key Header
Use custom API key header:
curl -H "X-API-Key: your_api_key" \
https://ui.creative-tim.com/r/testimonials-03.json
4. Query Parameter
Pass the token as a query parameter:
curl https://ui.creative-tim.com/r/testimonials-03.json?token=your_api_key
CLI Configuration
To use private components with the shadcn CLI, configure your components.json:
{
"registries": {
"@creative-tim": {
"url": "https://ui.creative-tim.com/r/{name}.json",
"headers": {
"Authorization": "Bearer ${API_KEY}"
}
}
}
}
Error Handling
401 Unauthorized
If you see this error, ensure your API key is set correctly:
Authentication required for private components. Set API_KEY in your .env.local file
or provide it via Authorization header, X-API-Key header, or ?token= query parameter.
Solutions:
- Set
API_KEYin your.env.localfile - Check that your API key is valid
- Ensure you're not committing your API key to version control
403 Forbidden
This means your API key is valid but doesn't have access to the requested component.
404 Not Found
The component either doesn't exist or is not a private component.
Security Best Practices
-
Never commit API keys to version control
- Always use environment variables
- Add
.env.localto your.gitignore
-
Use HTTPS
- Always use HTTPS URLs to protect your API key in transit
-
Rotate keys regularly
- Change your API key periodically for better security
-
Use different keys for different environments
- Development, staging, and production should use separate keys
Getting Your API Key
Contact us to get your API key for accessing private components:
- Email: support@creative-tim.com
- Website: https://ui.creative-tim.com/contact
Example Usage
# Set your API key
export API_KEY=your_api_key_here
# Install a private component
npx @creative-tim/ui@latest add testimonials-03
# Or use curl to download directly
curl -H "Authorization: Bearer $API_KEY" \
https://ui.creative-tim.com/r/testimonials-03.json -o testimonials-03.json
Technical Details
Private components are served through an authenticated API route (/api/r/[name]) that validates your API key before returning the component definition. The registry middleware automatically redirects requests for private components to this authenticated endpoint.
Public components continue to be served statically from /r/*.json without authentication.