Installation

Requirements

To install the components, your project must meet the following requirements:

1. Tailwind CSS — The components use Tailwind for styling. Refer to the official installation guide for setup instructions.
2. Import aliases — This allows us to avoid making assumptions about how your project is structured or how your imports are organized.

If you encounter any issues or blockers while configuring these requirements, let us know and we’ll be happy to help.

1. Tailwind CSS installation

Tailwind's default installations come with something called Preflight, a set of base styles that are designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.

If you have an existing project with other component libraries, this might break some existing styling behaviours. If you do not want to change your base styles according to Tailwind's standards, follow the official guide to disable Preflight.

2. Import aliases guide

The shadcn official guide assumes TypeScript usage and configuration through tsconfig.json. If your project uses JavaScript instead, the following approach may be more appropriate:

1. Create a jsconfig.json in case you didn’t have it and add the following configuration. The following example assumes your source code is located in the src directory, but feel free to change this however your project might be configured:

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
  }
}

If you are using Vite, you will also need to configure alias resolution there. A typical configuration would look like this:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import path from 'node:path'

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

Installation instructions

Once you have completed the previous steps, run the following command:

# Initializes shadcn
npx shadcn@latest init --preset b1Z5d0f9U

You’ll notice the --preset flag. This preset has already been configured for you, but you are free to customize it however you see fit using the shadcn preset editor. Through this interface, you can adjust colors, fonts, spacing, border radius values, and other UI aspects.

Once you are satisfied with the preset, run the command above to install all required configuration files and dependencies.

After completing this step, you’ll be ready to use any of the shadcn components or blocks. However, the custom components we provide require one final configuration step.

One of the files generated by the shadcn initialization process is components.json, which contains information about your current project setup. In this file, you will need to add our custom registry configuration.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "radix-vega",
  "rsc": false,
  "tsx": false,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "stone",
    "cssVariables": true,
    "prefix": ""
  },
  "iconLibrary": "lucide",
  "rtl": false,
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "menuColor": "default",
  "menuAccent": "subtle",
  "registries": {
    "@ecodeliver": "https://gls-component-registry.ecodeliver.tech/r/{name}.json"
  }
}

Your components.json may look a bit different depending on the preset you used. After init, add the @ecodeliver registry so shadcn knows where to fetch our components.

Each component and block page has the install command. For example, to install the DailyMetricsCard component, run the following command:

npx shadcn@latest add @ecodeliver/daily-metrics-card

That's it! Now that component lives in your project, you can use it like any other component.