Install

Pre-Requisite Knowledge

This documentation assumes the following:

• You already have Node.js, npm, and Git installed on your local machine
  
• You're familiar with basic terminal commands like cd

Summary

LiftKit consists of config files and actual components. The config files are just utility files needed in order to connect to the component registry so you can install components from the command line.

1. Create the Config Files

Option 1. Clone Template Project

• Paste the following command into your terminal to clone the template.

git clone https://github.com/Chainlift/liftkit-template.git

• cd into the newly-created project.
  
  • If you get an error that says direnv: error, just ignore it. It's a bug we'll have fixed soon.
• Run npm install to install dependencies.
• Install the components you need. See below.
• Once you've installed your components, make sure to import LiftKit's index.css to your app's globals.css.

What's in the template?

The template is just a blank Next.js project with LiftKit Core's config files pre-installed. It's the fastest way to get up and running with a new project running LiftKit.

Option 2: Add to Existing Next.js Project

• cd into your project's root directory from the command line.
• Install LiftKit CLI as a dev dependency
  

npm install @chainlift/liftkit --save-dev

• Initialize LiftKit
  

npx liftkit init

• If prompted to add an "add" script to package.json, say yes
• If prompted to install shadcn as a devDependency, say yes
• Install the components you need. See below.
• Once you've installed your components, make sure to import LiftKit's index.css to your app's globals.css.

@import url('@/lib/css/index.css')

What does npx liftkit init actually do?

Running this command adds two files to the root of your project:

• components.json
• tailwind.config.ts*

_{*You do not need tailwind itself to use LiftKit. Just this file, for now. See FAQ below.}

Install LiftKit Components & Styles

LiftKit Core is just the base configuration files you need in order for it to work.

LiftKit Components are actual UI components. When you install components, it installs the minimum required CSS for it to work.

If warned that you're using React 19, select Use --force and proceed.

npm run add all

npm run add component-name-kebab-case

npm run add base

FAQ

• I only installed one component, but it installed multiple. Why?
  
  • You likely installed a component that imports other components. For example, if you install the Badge component, it will also install the Icon component, because Badge imports the Icon component in its source code.
• Why did it install CSS for components I'm not using?
  
  • This is by design. It ensures developers can customize and play around freely. At build time, unused styles are removed automatically.
• How can I get rid of unused CSS?‍
  
  • Unused CSS is automatically removed at build time.
• Does LiftKit require Tailwind to work? / Why is it adding a tailwind.config file?
  
  • No. It literally just needs a file called tailwind.config.ts. If you check your package.json, tailwind is not a dependency. This is a requirement of the shadcn component registry we're using for delivery at the moment, and it will be removed when we no longer use it.