LiftKit Documentation

The fastest way to get started is to clone the pre-configured LiftKit template project, which includes LiftKit Core's config files.

1. Clone the template:

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

2. Navigate to the directory:

   cd liftkit-template

3. Install dependencies:

   npm install

4. Install desired components (see Install LiftKit Components & Styles).
5. Import LiftKit's CSS into your globals.css:

   @import url("@/lib/css/index.css");

To integrate LiftKit into an existing Next.js project, follow these steps:

1. Install the LiftKit CLI as a dev dependency:

   npm install @chainlift/liftkit --save-dev

2. Initialize LiftKit:

   npx liftkit init

   • When prompted to add an add script to package.json, select yes.
   • When prompted to install shadcn as a devDependency, select yes.
3. Install desired components (see Install LiftKit Components & Styles).
4. Import LiftKit's CSS into your globals.css:

   @import url("@/lib/css/index.css");

Note: npx liftkit init creates components.json and tailwind.config.ts in your project root. You do not need Tailwind itself to use LiftKit, but the tailwind.config.ts file is required by the current registry.

LiftKit Core provides the base configuration, while LiftKit Components provide the actual UI components and their associated CSS. Unused CSS is automatically tree-shaken at build time.

Use the following commands to add components to your project:

Troubleshooting: If you encounter React 19 compatibility warnings, append the --force flag to your command.

The Dropdown component provides a controlled menu system that uses a portal to render content at the document body level. It consists of three main parts: Dropdown (the provider), DropdownTrigger (the element that toggles the menu), and DropdownMenu (the container for the menu items).

Key features:

• Click-outside to close: The menu automatically closes when clicking outside the trigger or the menu content.
• Smart Positioning: The menu calculates its position based on the trigger's quadrant in the viewport.
• Singleton Behavior: Only one dropdown can be open at a time; opening a new one will automatically close the previous one via an internal DropdownRegistry.

Component Dependencies

Some components automatically install dependencies. For example, installing Badge will also install Icon.

CSS Management

• Unused CSS: LiftKit may install CSS for components you aren't explicitly using to allow for free experimentation. However, unused styles are automatically removed at build time.
• Tailwind Requirement: LiftKit does not require Tailwind as a dependency. It only requires a tailwind.config.ts file to satisfy the current registry requirements.

Production Warning

NOT RECOMMENDED FOR PRODUCTION USE. The current version of LiftKit is undergoing a rewrite to satisfy modern best practices and wrap around Base UI primitives. A more stable version is expected following the current development initiative.

The NavBar component accepts the following props:

The Button component is a customizable interactive element that supports various visual styles, sizes, and icon placements. It uses a variant system (fill, outline, text) and a color system to manage themes. Icons can be placed at the start or end of the button using startIcon and endIcon props.

<Button
  label="Click me"
  variant="outline"
  color="secondary"
  size="lg"
  startIcon={<ChevronIcon />}
/>

The Section component accepts the following props:

SpacingSize values: "xs", "sm", "md", "lg", "xl", "none"