Parts

The UI parts.

What Are Parts?

Each directory in this repo (except docs) represents a Part - a basic React component. For example:

• Metrics - Displays metrics like numbers or short strings
• Layout - Layout components for structuring your UI

Getting Started

1. Install Git (if you don't have it)

First, check if you have Git installed by opening your terminal and running:

git --version

If you see a version number, you're all set! If not, download and install Git from git-scm.com.

2. Clone This Repository

Open your terminal and navigate to where you want to save this project, then run:

git clone https://github.com/lokico/Parts.git

This will download all the files to a folder called Parts. Navigate into it:

cd Parts

Creating New Parts with Claude Code

Claude Code is an AI assistant that can help you create new Parts quickly and easily.

Installing Claude Code

1. Make sure you have Node.js installed (see "Live Preview" section below if you don't)

2. Install Claude Code globally:

curl -fsSL https://claude.ai/install.sh | bash

3. Run Claude Code for the first time:

claude

It will guide you through the setup process and ask you to authenticate with your Anthropic account.

Using Claude Code to Create Parts

Once you're in the Parts directory, start Claude Code:

claude

Then you can ask it to create new Parts for you. For example:

Create a new Part called "Button" that's a customizable button component with different sizes and colors

Claude Code will:

• Create the directory structure
• Write the React component code
• Add a README with a description
• Follow the existing patterns in the repo

You can also ask it to:

• Modify existing Parts
• Add new features to components
• Fix bugs or issues
• Explain how any Part works

Live Preview

You can preview your Parts in a live development environment using Blockparty.

Installing Node.js

Before you can use Blockparty, you need Node.js installed on your computer.

1. Check if you already have Node.js:

node --version

2. If you see a version number (like v20.0.0), you're good to go! If not, download and install Node.js from nodejs.org. We recommend the LTS (Long Term Support) version.

Running the Live Preview

Once Node.js is installed, you can start the live preview server:

npx blockparty

The first time you run this, it will download Blockparty automatically. After that, it will start a development server and open your browser to show your Parts in action.

As you make changes to your Parts, the preview will automatically update - no need to refresh!

Repository Structure

Parts/
├── README.md           # This file
├── docs/               # GitHub Pages documentation
├── Metrics/            # A Part for displaying metrics
│   ├── README.md       # Part description
│   └── index.tsx       # Component code
├── Layout/             # A Part for layouts
│   └── ...
└── [Your Parts]/       # Add your own Parts here

Tips for Designers

• Each Part is self-contained: Everything related to a Part lives in its own directory
• Use Claude Code liberally: Don't be afraid to ask it questions or request changes
• Preview often: Run npx blockparty to see your changes live
• Check the README: Each Part has its own README explaining what it does

Need Help?

• Ask Claude Code questions while working in the repo
• Check individual Part READMEs for component-specific documentation
• Look at existing Parts to understand the patterns

Happy building!