Installation

Set Up Next.js

System Requirements

Node.js 20 or later.

Automatic Installation

We recommend starting a new Next.js project using create-next-app, which sets everything up automatically. To create a project, run:

npx create-next-app@latest

During installation, you will see the following prompts:

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

After answering the prompts, create-next-app will create a folder with your project name and install the required dependencies.

Install Star Forge

For Next.js Projects

Initialize the Project

Run the init command to set up Star Forge in a new or existing Next.js project:

npx shadcn@latest init

You can use the -d flag to apply default settings, such as the new-york style, the zinc base color, and CSS variables support.

npx shadcn@latest init -d

Configure components.json

You will be guided through a few questions to configure the components.json file:

Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

This file will be created in the root directory of your project and will define the style and theme preferences for Star Forge components.

Add Components

Once configuration is complete, you can start adding components to your project:

npx shadcn@latest add https://starforge-docs.vercel.app/r/typography.json

The command above will add the Typography component to the components/star-forge directory. You can import it like this:

index.tsx

import { Typography } from '@/components/star-forge/typorgaphy';

export default function Home() {
  return (
    <>
      <Typography.H1> Hello World </Typography.H1>
    </>
  );
}

Customize the Theme

Adjust the CSS variables in the src/app/globals.css file to align components with your design system:

globals.css

:root {
  --background: 0 0% 100%;
  --primary: 222.2 47.4% 11.2%;
  --radius: 0.5rem;
}

Ready to Use

You are now ready to forge amazing interfaces with Star Forge! Explore the components documentation to add more elements and customize them as needed.

Additional Dependencies

Star Forge relies on the following libraries, which are installed automatically by the npx shadcn@latest init command:

Tailwind CSS: For fast and flexible component styling.
Radix UI: To ensure accessibility and robust component behavior.
Class Variance Authority (CVA): To efficiently manage style variants.

If you started the project with create-next-app and selected Tailwind CSS, it will already be configured. Otherwise, follow the Tailwind CSS installation instructions to set it up manually.

For feedback or contributions, visit our GitHub repository.