What does it generate — a file or a whole project?

A whole project. The output is a flat path→contents file map rendered as a file tree: every component you list gets its own folder under src/components with the component source, a co-located stylesheet (for CSS Modules or SCSS), an optional test, an optional Storybook story, an optional README, and an index barrel. On top of that it emits a root src/index barrel that re-exports each component, a package.json, a tsconfig.json (TypeScript only), and a top-level README. The result is a runnable starter, not a single snippet.

Which frameworks, languages, and styling approaches are supported?

Frameworks: React, Vue, and Svelte. Languages: TypeScript or JavaScript — TS uses .tsx/.ts extensions and typed props, JS uses .jsx/.js and plain destructuring. Styling: CSS Modules and SCSS emit a co-located *.module.css / *.module.scss file, styled-components co-locates a styled() block in the component, and Tailwind writes utility classes directly into the component with no separate stylesheet.

How does the live file-tree browser work?

The tree on the left is built directly from the generated file map and mirrors exactly what would land on disk — directories first, then files, sorted within each level. Selecting any file loads its contents into the output panel, where you can copy or download it. As you edit the stack or component list the tree and the selected file update instantly.

What is actually inside package.json and tsconfig.json?

package.json carries your kebab-cased library name, a version, the correct framework dependency (react, vue, or svelte), and dev dependencies that match your choices — typescript when TS is on, @testing-library/react when React tests are enabled, storybook when stories are enabled, and tailwindcss or styled-components for those styling modes. It also sets main/module/types to the src/index entry and adds build, test, and storybook scripts. tsconfig.json (TypeScript only) sets bundler-friendly compiler options with declaration output and the right JSX setting.

Can I control which extra files each component gets?

Yes. Three independent toggles control the unit test, the Storybook story, and the per-component README. The component source and its index barrel are always generated; everything else is opt-in, so you can scaffold a lean set or a fully documented, tested library.

Can I reproduce or share an exact scaffold?

Yes. The framework, styling, language, library name, component list, and the test/story/README toggles are all encoded into the page URL as you work. Copying the share link hands someone the identical configuration, so the scaffold they generate matches yours file for file.

Component Library Starter

Scaffold a complete, runnable component-library project — not a single snippet. Pick a framework (React, Vue, Svelte), a styling approach, and a language, list the components you want, and the tool generates the entire file tree: per-component source, styles, tests, stories, and barrels, plus a root index, package.json, tsconfig, and README. Browse the generated tree live and click any file to inspect, copy, or download it.

About this ToolHow it works, benefits & use cases

Most component scaffolders hand you a single snippet. This one generates an entire runnable project. Pick a framework — React, Vue, or Svelte — a styling approach (CSS Modules, SCSS, styled-components, or Tailwind), and a language (TypeScript or JavaScript), then list every component you want. The tool produces a complete virtual file tree: each component gets its own folder with source, a co-located stylesheet, an optional unit test, a Storybook story, an index barrel, and a README — wired up on top of a root src/index barrel, a real package.json with the right dependencies, a tsconfig.json, and a top-level README. A live file-tree browser mirrors exactly what lands on disk; click any node to inspect its contents, then copy or download it. Everything regenerates instantly as you change the stack, toggle the per-component files, or add and remove components, and the full configuration lives in a shareable URL so a teammate gets the identical scaffold.

How to Use

1Start from a stack preset (React + TS + CSS Modules, React + Tailwind, Vue + SCSS, Svelte) or set the framework, styling, and language yourself.
2Give the library a name — it becomes the kebab-cased name in package.json.
3Add the components you want by typing a name and pressing Enter or Add; remove any with the × chip.
4Toggle whether each component should also get a unit test, a Storybook story, and a README.
5Browse the generated file tree on the left and click any file to load its contents into the panel.
6Copy the file, download it, or share the URL to hand someone the exact same scaffold.

Key Benefits

Generates a complete, runnable project — not a single file — as a full virtual file tree
Per-component folders with source, styles, tests, stories, index barrels, and READMEs
Root scaffolding included: src/index barrel, package.json with correct deps, tsconfig, and README
React, Vue, and Svelte from one configuration, in TypeScript or JavaScript
Styling options: CSS Modules, SCSS, styled-components, or Tailwind utility classes
Live, clickable file-tree browser with per-file copy and download
Toggle tests, stories, and per-component READMEs on or off
The whole configuration is captured in a shareable URL

Common Use Cases

Bootstrapping a brand-new component library with consistent structure and tooling
Standardising the folder layout (source + style + test + story + barrel) across a team
Spinning up a multi-component starter to evaluate React vs. Vue vs. Svelte ergonomics
Generating a package.json + tsconfig + README so a library is publishable from the start
Handing a teammate an exact scaffold via a shared link instead of a screenshot

Project files

22 files

src

components

Button

Card

Input

package.json

json · click any file in the tree to view it

{
  "name": "my-ui-kit",
  "version": "0.1.0",
  "type": "module",
  "main": "src/index.ts",
  "module": "src/index.ts",
  "types": "src/index.ts",
  "scripts": {
    "build": "tsc",
    "test": "vitest",
    "storybook": "storybook dev -p 6006"
  },
  "dependencies": {
    "react": "^18.0.0"
  },
  "devDependencies": {
    "typescript": "^5.0.0",
    "@testing-library/react": "^16.0.0",
    "storybook": "^8.0.0"
  }
}

Start from a stack

Stack

Library name

Becomes the name in package.json (kebab-cased).

Framework

Styling

Language

Components

Add a component

Button
Card
Input

Per-component files

Unit test

Adds a *.test file per component.

Storybook story

Adds a *.stories file with primary/secondary/outline stories.

README

Adds a per-component README with a props table.

test story readme

A runnable starter, not one file

Instead of a single component snippet, this generates the whole project as a virtual file tree — per-component source, co-located styles, tests, stories, and barrels, plus a root src/index, package.json, tsconfig.json, and a top-level README. Everything regenerates instantly as you change the stack or the component list.

Browse before you ship

The tree on the left mirrors exactly what lands on disk. Click any node to inspect its contents in the panel, then copy or download it — and the full configuration lives in a shareable URL so a teammate gets the identical scaffold.

Was this tool helpful?

Share Your Experience

Help others discover this tool!

Share on

Component Library Starter

How to Use

Key Benefits

Common Use Cases

Project files

Start from a stack

Stack

Components

Per-component files

A runnable starter, not one file

Browse before you ship

Was this tool helpful?

Share Your Experience

Related tools

Frequently Asked Questions - Component Library Starter