Arctic Design Kit

Installation Guide

Integrate the @arctic-kit/snow library into your project by following these steps. This guide covers installation via both yarn and npm, configuring styles, setting up fonts, and using a component.

1. Install

Choose your preferred package manager to install the library along with the dependent libraries.

Using Yarn:

yarn add @arctic-kit/snow @floating-ui/react @pigment-css/react framer-motion

Using NPM:

npm install @arctic-kit/snow @floating-ui/react @pigment-css/react framer-motion

2. Fonts Setup

To ensure the components render correctly, include the necessary font files in your project. Instead of using <link> tags, we'll use the @fontsource package to import the fonts directly into your styles:

Install Fontsource Package:

Using Yarn:

yarn add @fontsource/inter

Using NPM:

npm install @fontsource/inter

Import Fonts in Your Styles:

In your project's main stylesheet or root file (like main.ts for Vite or layout.tsx for Next.js), add the following imports:
```
import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css';
import '@fontsource/inter/700.css';
```

3. Configuration

For Vite:

Install @pigment-css/vite-plugin as a development dependency:
```
yarn add -D @pigment-css/vite-plugin
```
Then in your vite.config.ts, set up the following configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { extendTheme, pigment } from '@pigment-css/vite-plugin';
import { createColorSchemes } from '@arctic-kit/snow';

const theme = extendTheme(createColorSchemes());

export default defineConfig({
  plugins: [
    pigment({
      theme,
    }),
    react(),
  ],
});

In your root file (e.g., main.ts), add:

import '@pigment-css/react/styles.css';
import '@arctic-kit/snow/style.css';

For Next.js (App Router):

Install the required dependencies:
```
yarn add @pigment-css/nextjs-plugin
```
In your next.config.mjs, configure the following:

import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';
import { createColorSchemes } from '@arctic-kit/snow';

const theme = extendTheme(createColorSchemes());

export default withPigment({...nextConfig}, {
    theme,
  });

In your root layout file (e.g., layout.tsx), add:

import '@pigment-css/react/styles.css';
import '@arctic-kit/snow/style.css';

4. Using a Component

Once installed and configured, you can start using components from the library. Here's an example of how to use the Button component:

import { Button } from '@arctic-kit/snow';

function App() {
  return <Button>Click Me</Button>;
}

export default App;

By following these steps, you should have @arctic-kit/snow seamlessly integrated into your Next.js or Vite project. For more detailed information and advanced configurations, refer to the official documentation.

Overview Foundations