# Installation

## Table of Contents

- [Adding a component](#adding-a-component)
  - [Using the CLI](#using-the-cli)
  - [components.json](#componentsjson)
  - [Manually](#manually)
- [Notes](#notes)

The components are built with React, TypeScript, Tailwind CSS, and mainly with Motion (formerly Framer Motion).
In order to use the components, you need to install the following dependencies:

```bash
tailwindcss@latest motion
```

Or follow the [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation) to setup Tailwind CSS in your project.

Some components uses other libraries too, in each case, you can find the installation instructions in the component's documentation.

## Adding a component

You have two options to add a component to your project:

1. Using the CLI
2. Manually

### Using the CLI

If your project does not already have a `components.json`, initialize shadcn first:

```bash
shadcn@latest init
```

Then add the `@fancy` registry to the existing `registries` field in your `components.json`:

### components.json

```json
{
  // ...
  "registries": {
    "@fancy": "https://fancycomponents.dev/r/{name}.json"
  }
}
```

To add a component using the CLI, you need to run the following command in your terminal:

```bash
npx shadcn add @fancy/component-name
```

This will add the component source code and its dependencies in your project. You can then import the component in your code and start using it. 

**Important note:** as of now, additional dependencies aren't installed automatically, they just get added to the `package.json` file. You need to run `npm install` or the equivalent command in your preferred package manager to install them.

The appropriate link is available in the "Installation" section of each component's documentation page.

### Manually

Go to any of the components you want to use and copy the source code(s) from the "Installation" section. Make sure to update your imports accordingly. 

## Notes

If you prefer javascript instead of typescript, you can easily convert the code with a tool like [this](https://transform.tools/typescript-to-javascript).

---

*This documentation is also available in [interactive format](https://fancycomponents.dev/docs/components/installation).*