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.
3. @daypicker/react (v10) and date-fns — Required by the date range picker, calendar, billing table, and chart components for range selection, parsing, filtering, and Spanish date formatting.

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

A note on 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.

A note on the 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"
  }
}

Please note that depending on what preset you've used for the installation this configuration might look a little differently. The key change you must do after the initialization step is adding the ecodeliver registry. This will tell shadcn how to use the @ecodeliver component registry, enabling installation of our custom components.

You can install them like this:

# Adds just one component
npx shadcn@latest add @ecodeliver/daily-metrics-card

# Adds all components
npx shadcn@latest add @ecodeliver/billing-table @ecodeliver/chart-area @ecodeliver/daily-metrics-card @ecodeliver/date-range-picker @ecodeliver/finances-chart-card @ecodeliver/kpi-card @ecodeliver/paginated-table

These components will now live directly in your codebase, and you are free to use and customize them however you like.