Getting Started

DS was designed for use with Next.js (opens in a new tab) and TailwindCSS (opens in a new tab). Therefore, some dependencies are necessary for the DS to work properly.

Create a project with Next.js (optional)

Start by creating a new project with Next.js. If you already have an existing project, you can skip this step.

pnpm create next-app@latest

Remember to choose to use Tailwind CSS when creating the project.

Add dependencies

After creating a project with Next.js, you will have already installed some obvious dependencies from a React-based project.

{
  "dependencies": {
    ...
    "next": "^13.5.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "^3.4.1",
    ...
  }
}

In addition to these, you will also need to install some extra dependencies. Here they are:

{
  "dependencies": {
    ...
    "@inpulse-ds/core": "^0.4.1",
    "@phosphor-icons/react": "^2.0.14",
    "@xpd/tailwind-3dtransforms": "^1.0.3",
    "date-fns": "^3.6.0",
    "react-hook-form": "^7.51.2",
    "tailwind-variants": "^0.2.1",
    "tailwindcss-animate": "^1",
    "tailwindcss-text-fill": "^0.2.0",
    ...
  }
}

Here's what each of these dependencies does:

@phosphor-icons/react: It is the icon pack that DS uses.
@inpulse-ds/core: Contains the basic styles and animations used by our components.
@xpd/tailwind-3dtransforms: Adds support for 3D transforms in TailwindCSS.
date-fns: Date manipulation library.
react-hook-form: Library for managing forms.
tailwind-variants: Adds support for custom variants in TailwindCSS.
tailwindcss-animate: Adds support for animations in TailwindCSS.
tailwindcss-text-fill: Adds support for the text-fill property in TailwindCSS.

In addition to these dependencies, some DS components may need additional dependencies. For example, the loading animations of the Button component are inherited from Loading and therefore, it depends on this second component. See the peerDependencies of each component's package for more information.

If you don't want to worry about this right now, you can install all of these dependencies at once and do the filtering later.

{
  "dependencies": {
    ...
    "@inpulse-ds/calendar": "^0.1.3",
    "@inpulse-ds/flip": "^2.0.0",
    "@inpulse-ds/loading": "^1.0.0",
    "@inpulse-ds/progress": "^0.1.11",
    "@inpulse-ds/popover": "^1.0.0",
    "@inpulse-ds/slot": "^0.2.1",
    "@inpulse-ds/visually-hidden": "^1.0.2",
    ...
  }
}

After editing the package.json file, run the installation command.

pnpm i

Configure shortcuts (optional)

We use @ as a shortcut when importing files. This configuration can be done in tsconfig.json.

tsconfig.json

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

This is just a suggestion. Add more shortcuts as needed for your project.

Configure TailwindCSS

Apply the configuration below so that Tailwind loads all classes used by DS components correctly.

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
 
import { DS } from "@inpulse-ds/core";
 
const config = {
  content: {
    relative: true,
    files: [
      "./node_modules/@inpulse/*/dist/**/*.js",
      "./node_modules/@inpulse-ds/*/dist/**/*.js",
    ],
  },
  darkMode: ["class", 'html[class~="dark"]'],
  theme: {
    extend: {},
  },
  plugins: [
    require("@xpd/tailwind-3dtransforms"),
    require("tailwindcss-animate"),
    require("tailwindcss-text-fill"),
    DS,
  ],
};
 
export default config;

Apply the theme

Many of our components borrow from the DS theme. If it is not applied, something basic like component colors may not be loaded correctly. See the Theme documentation for more information.

Ready

You can now start adding our components to your project.

Introduction Accordion