Croct Templates
A library of curated templates for UI components, projects, and personalization strategies.

📘 Browse templates →

Introduction

We're creating the largest CMS-powered UI component library — think of it as shadcn for CMS.

Just run croct use <template> to integrate a component into your application with CMS, analytics, A/B testing, and personalization.

What's Croct?

Croct is a Component CMS designed for modern stacks with a developer-first mindset. Built by seasoned open-source contributors, we offer a 💚 forever-free plan — no credit card required — perfect for most teams and projects.

👉 Try it in Next.js

To use it with Next.js, run:

croct use nextjs:/croct

This will either set up a new Next.js project or add the component to an existing one, fully configured.

Installation

To use the Croct CLI, you need to have Node.js installed.

You can install the CLI globally using NPM:

npm install -g croct

Or run it directly using npx:

npx croct@latest use <template-url>

Basic usage

To use a template, copy the URL of the template you want to use and run:

croct use <template-url>

For example:

croct use https://github.com/croct/templates/tree/main/templates/magicui/ui/marquee

This command will fetch and apply the template to your project automatically.

For more information, check the documentation.

Aliases

We support aliases for popular libraries, so you can skip the full URL. For example, to use the Marquee component from Magic UI, you can run:

croct use magicui:/ui/marquee

Or use the component's registry URL:

croct use https://magicui.design/r/marquee

Supported aliases

These are the currently supported aliases:

Project	Short URL	Alternative URL
Any	github:/<user>/<repo>/<template>	https://github.com/<user>/<repo>/<template>
NPM	npm:/<package>	-
Croct	croct:/<template>	-
Next.js	nextjs:/<template>	-
Shadcn	shadcn:/<template>	-
Magic UI	magicui:/<template>	https://magicui.design/r/<component>

To add a new alias, open a pull request with the new entry in the registry.

Contribute

Contributions are always welcome!

• Report any bugs or issues on the issue tracker.
• For major changes, please open an issue first to discuss what you would like to change.

New templates

The best way to create a new template is to base it on an existing one. However, if you want to start from scratch, you can use:

npx croct create template --empty

This will generate a minimal template file ready for customization.

Folder structure

This repository contains a structured folder system for organizing templates:

templates/
 ├── [organization]/
 │   ├── example/
 │   │   ├── template.json5
 │   ├── another-example/
 │   │   ├── template.json5

The [organization] should be the company's domain without .com, .io, or similar. For example, for croct.com, the folder name should be croct.

Documentation

Check the documentation for more information on how to create and publish templates.

License

This library is licensed under the MIT license.