scaff-ui

Scaffold the UI. Make it your design.

Scaff UI is a CLI for generating minimalistic, customizable Tailwind CSS components for frontend projects.

Generate ready-made UI components directly into your project, then modify the source code and make each component fit your own design.

Features

• Generate ready-made frontend components
• Supports React and HTML
• Multiple variants for each component
• Built with Tailwind CSS
• Generates directly into src/components
• No unnecessary abstractions

Requirements

• Node.js 20+
• An existing frontend project
• Tailwind CSS installed and configured

scaff-ui does not install or configure Tailwind CSS, React, Vite, or other build tools.

Installation

Local installation

Install scaff-ui in your existing project:

npm install scaff-ui

Global installation

Install scaff-ui globally to use the scf command directly:

npm install -g scaff-ui

Usage

Run the interactive generator:

npx scf add

Select a framework, component, and variant:

? Select Framework
❯ HTML
  React

? Select Component
❯ Header
  Hero
  Footer
  Text Area
  Newsletter

? Select Variant
❯ Logo + Navigation Links
  Logo + Navigation Links + CTA Button
  Navigation Links Only

You can also generate a specific component directly:

npx scf add header
npx scf add hero
npx scf add footer
npx scf add text-area
npx scf add newsletter

View available components:

npx scf list

Generated Files

Components are generated into your project's src/components directory.

React

src/
└── components/
    ├── Header.jsx
    ├── Hero.jsx
    └── Footer.jsx

HTML

src/
└── components/
    ├── header.html
    ├── hero.html
    └── footer.html

Components

Header

Available variants:

• Logo + Navigation Links
• Logo + Navigation Links + CTA Button
• Navigation Links Only

Hero

Available variants:

• Heading + Description + Button
• Heading + Description + Button + Image
• Heading + Description Only

Footer

Available variants:

• Copyright Only
• Copyright + Navigation Links
• Copyright + Social Links

Text Area

Available variants:

• Actions Inside
• Actions Outside

Newsletter

Available variants:

• Basic Newsletter

Tailwind CSS

Generated components use Tailwind CSS utility classes.

Scaff UI assumes Tailwind CSS is already installed and configured in your project.

It does not:

• Install Tailwind CSS
• Configure Tailwind CSS
• Install React
• Configure Vite
• Create a project
• Manage build tools

Scaff UI focuses on generating frontend source code that you can modify freely.

Development

Clone the repository:

git clone https://github.com/carleoj/scaff-ui.git
cd scaff-ui
npm install

Link the package locally:

npm link

Run the CLI:

scf add

Run tests:

npm test

License

MIT