Initium

https://initium.sh/docs
Admin
Initium provides a design system for shadcn projects with installable styles, production-ready...
Tokens:9,358
Snippets:100
Trust Score:3.3
Update:1 week ago
Show doc for...
Tokens:
Raw
### Start AI Chat: Instructions to Read Files

Source: https://initium.sh/docs/getting-started

Tell your AI tool to read DESIGN.md and STRATEGY.md, follow the installed skill, and use Initium blocks while keeping the style preset intact.

```txt
Read DESIGN.md and STRATEGY.md from the project root.
Follow the installed Initium skill if available.
Use Initium blocks for major sections and keep the installed style preset intact.
```

--------------------------------

### Skill pack installation paths

Source: https://initium.sh/docs/skills

The registry installs the skill into .agents/skills/initium/ with the entrypoint SKILL.md and supporting workflow docs in references/.

```txt
.agents/skills/initium/
```

```txt
.agents/skills/initium/SKILL.md
```

```txt
.agents/skills/initium/references/
```

--------------------------------

### Install multiple Initium blocks

Source: https://initium.sh/docs/blocks

Representative commands for installing several Initium blocks. The Blocks browser is the source of truth for available block names; the docs show these examples instead of duplicating the full catalog.

```bash
npx shadcn@latest add @initium/hero-section-1
npx shadcn@latest add @initium/button-default
npx shadcn@latest add @initium/form-elements-default
```

--------------------------------

### Install base Initium style utilities

Source: https://initium.sh/docs/getting-started

Install the base Initium style utilities before installing blocks so classes like wrapper, tagline, paragraph, heading-xl, and heading-lg are available. Rich text article blocks also install @initium/typeset as a dependency; import it after Tailwind in your global CSS.

```bash
npx shadcn@latest add @initium/initium-styles
```

--------------------------------

### Manual install fallback file structure

Source: https://initium.sh/docs/skills

The manual install shape should match the registry output: SKILL.md and references/ directory.

```txt
.agents/skills/initium/SKILL.md
.agents/skills/initium/references/
```

--------------------------------

### Install a pro item

Source: https://initium.sh/docs/install-shadcn-and-registry.md

Install a pro item if you have a license key. If the free item works but this fails with an authorization error, the registry is configured correctly and the issue is the license key.

```bash
npx shadcn@latest add @initium/hero-section-2
```

--------------------------------

### Prompt to read source files before writing code

Source: https://initium.sh/docs/ai-workflow

Start a new chat and ask the AI tool to read the files before writing code. This prompt instructs the tool to treat the files as source material and to keep the installed style preset intact.

```txt
Read DESIGN.md and STRATEGY.md from the project root.
Treat them as source material for this page.
Use Initium blocks for major sections.
Keep the installed Initium style preset intact.
Do not invent proof, testimonials, logos, metrics, awards, guarantees, or customer names.
```

--------------------------------

### Initialize shadcn with npx shadcn@latest init

Source: https://initium.sh/docs/getting-started

Run this command in your project root to initialize shadcn if components.json is not present. Choose settings that match your app; Initium requires shadcn to be working before installing items.

```bash
npx shadcn@latest init
```

--------------------------------

### Install Initium skill pack via shadcn

Source: https://initium.sh/docs/skills

Run this command to install the Initium skill pack from the Initium registry. Requires shadcn initialized, the Initium registry configured in components.json, and INITIUM_LICENSE_KEY available.

```bash
npx shadcn@latest add @initium/initium-agent
```

--------------------------------

### Package Manager Alternatives for Installing Blocks

Source: https://initium.sh/docs/getting-started

Alternative commands for installing blocks with pnpm, yarn, and bun. Use the matching shadcn runner for your package manager.

```bash
pnpm dlx shadcn@latest add @initium/hero-section-1
```

```bash
yarn dlx shadcn@latest add @initium/hero-section-1
```

```bash
bunx --bun shadcn@latest add @initium/hero-section-1
```

--------------------------------

### Install Initium Block with npx shadcn

Source: https://initium.sh/docs/getting-started

Installs a block from the Initium registry. Use the Blocks browser to choose the exact block name. Pro blocks require INITIUM_LICENSE_KEY.

```bash
npx shadcn@latest add @initium/hero-section-1
```

--------------------------------

### Skill Installation Path

Source: https://initium.sh/docs/getting-started

The skill pack installs into this directory. Use the skill when your AI tool supports project skills; otherwise, tell the tool to read .agents/skills/initium/SKILL.md.

```txt
.agents/skills/initium/
```

--------------------------------

### Initialize shadcn and add Initium registry

Source: https://initium.sh/docs

Commands to initialize shadcn, add the Initium registry, install a preset style, and install base style utilities. The JSON configuration must be added to components.json with the Authorization header.

```bash
npx shadcn@latest init
```

```json
{
  "registries": {
    "@initium": {
      "url": "https://app.initium.sh/r/styles/{style}/{name}.json",
      "headers": {
        "Authorization": "Bearer ${INITIUM_LICENSE_KEY}"
      }
    }
  }
}
```

```bash
npx shadcn@latest add "https://app.initium.sh/r/preset?code=..."
```

```bash
npx shadcn@latest add @initium/initium-styles
```

--------------------------------

### Install typeset stylesheet

Source: https://initium.sh/docs/styles

Installs the shadcn typeset stylesheet for rich text article blocks. It adds app/typeset.css to your project.

```bash
npx shadcn@latest add @initium/typeset
```

--------------------------------

### Set INITIUM_LICENSE_KEY for pro blocks

Source: https://initium.sh/docs/blocks

Sets the license key environment variable required to install pro blocks. If a pro block fails with an authorization error while @initium/initium-styles installs successfully, the registry setup works and the license key needs attention.

```bash
INITIUM_LICENSE_KEY=your_polar_license_key
```

--------------------------------

### Set license key and retry pro install

Source: https://initium.sh/docs/troubleshooting

Set the INITIUM_LICENSE_KEY environment variable and retry the pro install command. Do not commit real license keys to your repository.

```bash
INITIUM_LICENSE_KEY=your_polar_license_key
```

```bash
npx shadcn@latest add @initium/hero-section-1
```

--------------------------------

### Install command variants with other package managers

Source: https://initium.sh/docs/install-shadcn-and-registry.md

Use your project's preferred package manager instead of npx. These commands install the same package.

```bash
pnpm dlx shadcn@latest add @initium/initium-styles
```

```bash
yarn dlx shadcn@latest add @initium/initium-styles
```

```bash
bunx --bun shadcn@latest add @initium/initium-styles
```

--------------------------------

### Install custom style with generated registry URL

Source: https://initium.sh/docs/getting-started

Use this command to install a custom style generated by the Style Builder. The URL is a generated registry URL that includes your style configuration.

```bash
npx shadcn@latest add "https://app.initium.sh/r/preset?code=..."
```

--------------------------------

### Prompt to build a landing page

Source: https://initium.sh/docs/ai-workflow

After the initial prompt, ask for a specific outcome. This prompt requests a landing page for the primary offer, using installed Initium blocks and matching the visual direction, while asking before filling in missing proof or claims.

```txt
Build a landing page for the primary offer in STRATEGY.md.
Use installed Initium blocks where possible.
Match the visual direction in DESIGN.md.
Ask before filling in missing proof or claims.
```

--------------------------------

### Point AI tool to skill pack

Source: https://initium.sh/docs/troubleshooting

If the Initium skill pack is installed, point the AI tool to the SKILL.md file.

```txt
.agents/skills/initium/SKILL.md
```

--------------------------------

### Prompt to follow Initium skill pack

Source: https://initium.sh/docs/ai-workflow

If the Initium skill pack is installed, add this instruction to the prompt to ensure the AI follows the skill pack before changing UI code.

```txt
Follow .agents/skills/initium/SKILL.md before changing UI code.
```

--------------------------------

### Add Initium registry to components.json

Source: https://initium.sh/docs/getting-started

Add this registry configuration to your components.json to enable Initium items. Keep the Authorization header even for free items; pro installs require the license key. The {style} placeholder is filled by the shadcn CLI from your project's style setting.

```json
{
  "registries": {
    "@initium": {
      "url": "https://app.initium.sh/r/styles/{style}/{name}.json",
      "headers": {
        "Authorization": "Bearer ${INITIUM_LICENSE_KEY}"
      }
    }
  }
}
```

--------------------------------

### Manual instruction for AI tool

Source: https://initium.sh/docs/skills

Tell the AI tool to read the SKILL.md file and follow the Initium workflow when it does not discover skills automatically.

```txt
Read .agents/skills/initium/SKILL.md before changing UI code.
Follow the Initium workflow for strategy, copy, block selection, implementation, and QA.
```

--------------------------------

### List of required files in project root

Source: https://initium.sh/docs/ai-workflow

Place DESIGN.md and STRATEGY.md in the project root while working. They are not required to be committed.

```txt
DESIGN.md
STRATEGY.md
```

--------------------------------

### Windsurf prompt to reference design and strategy files

Source: https://initium.sh/docs/ai-workflow

Use this prompt in Windsurf after placing the files in the root. It sets DESIGN.md as visual source of truth and STRATEGY.md as page strategy, and optionally follows the skill file.

```txt
Use DESIGN.md as the visual source of truth.
Use STRATEGY.md as the page strategy.
Follow .agents/skills/initium/SKILL.md if present.
```

--------------------------------

### Prompt AI tool to read design files

Source: https://initium.sh/docs/troubleshooting

Explicitly ask the AI tool to read DESIGN.md and STRATEGY.md from the project root before editing UI.

```txt
Read DESIGN.md and STRATEGY.md from the project root before editing UI.
Use DESIGN.md for visual direction and STRATEGY.md for page strategy.
```

--------------------------------

### Replit prompt to read design and strategy files

Source: https://initium.sh/docs/ai-workflow

Use this prompt in Replit after adding DESIGN.md and STRATEGY.md to the project root. It instructs the AI to read these files before editing the UI.

```txt
Read DESIGN.md and STRATEGY.md from the repository.
Use them before editing the UI.
```

--------------------------------

### Export DESIGN.md file

Source: https://initium.sh/docs/styles

Place this file in your project root while working. It serves as visual source material for AI tools, documenting intentional style decisions. You do not have to commit it.

```txt
DESIGN.md
```

--------------------------------

### Reference skill pack directly

Source: https://initium.sh/docs/troubleshooting

If the skill pack does not run automatically, reference it directly in the AI tool.

```txt
Read .agents/skills/initium/SKILL.md and follow its workflow before changing UI code.
```

--------------------------------

### Import typeset.css after Tailwind

Source: https://initium.sh/docs/styles

Import the typeset stylesheet after Tailwind in your global CSS file. The stylesheet derives from your theme tokens and follows your fonts and dark mode automatically.

```css
@import "tailwindcss";
@import "./typeset.css";
```
Tokens:
Raw