Getting Started

Get IntentCSS installed and generate your first UI styles in less than a minute.

Installation

Install IntentCSS globally using npm:

BASH
npm install -g intentcss

Verify the installation:

BASH
intentcss --help

You should see:

TEXT
Usage: intentcss [options] [command]

Commands:
  generate
  explain
  help

Generate Your First Style

Create a button:

BASH
intentcss generate --prompt "blue button"

Output:

TEXT
rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700

Natural Language Prompts

IntentCSS understands common UI descriptions.

Buttons

BASH
intentcss generate --prompt "large red button"
TEXT
rounded-lg bg-red-600 px-6 py-3 text-lg text-white hover:bg-red-700

Forms

BASH
intentcss generate --prompt "glass login form"
TEXT
flex flex-col gap-4 backdrop-blur-md bg-white/30 border border-white/20 rounded-xl shadow-md p-6 space-y-2

Navigation

BASH
intentcss generate --prompt "responsive navbar"

Typo Correction

IntentCSS automatically corrects common mistakes.

Input:

BASH
intentcss generate --prompt "purpl buton"

Corrected internally to:

TEXT
purple button

Generated output:

TEXT
rounded-lg bg-purple-600 px-4 py-2 text-white hover:bg-purple-700

Output Targets

Tailwind (Default)

BASH
intentcss generate --prompt "card"

CSS

BASH
intentcss generate --prompt "card" --target css

Example:

CSS
.card {
  background-color: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
}

Supported Components

Currently supported intents:

  • Button
  • Card
  • Form
  • Navbar
  • Modal
  • Sidebar
  • Hero
  • Footer

Additional intents will be added in future releases.

Examples

Generate a hero section:

BASH
intentcss generate --prompt "dark large hero"

Generate a sidebar:

BASH
intentcss generate --prompt "glass rounded sidebar"

Generate a footer:

BASH
intentcss generate --prompt "centered dark footer"

Next Steps

Continue with:

  • Installation
  • Supported Intents
  • Modifiers
  • CLI Reference

to learn more about how IntentCSS works.