Installation

Package installation

To integrate the @iyk/ui design system into your project, start by installing the @iyk/ui package into your project: 

pnpm install @iyk/ui

Configure Tailwind CSS

Once the package is installed, you'll need to configure Tailwind CSS in your project. Create or update your tailwind.config.js file with the following contents: 

import config from "@iyk/ui/tailwind/config"

export default {
  presets: [config],
  content: [
    "./src/**/*.{astro,ts,tsx}",
    "../../packages/icons/src/**/*.{ts,tsx}",
    "../../packages/ui/src/**/*.{ts,tsx}",
  ],
}

Add Design System Styles

In your site's CSS file, add the following imports to apply the default design system styles: 

@import "@iyk/ui/styles/tailwind.css";
@import "@iyk/ui/styles/base.css";
@import "@iyk/ui/styles/fonts.css";

Configure Theme

You'll need to explicitly set the theme in your project. In the main html tag, add a className attribute to define the theme. The supported themes are light and dark. 

<html className="light">
<html className="dark">

Use Favicon and Apple Touch Icons

Import our favicon and apple touch icon assets as URLs and use them in your app: 

import AppleTouchIconPngUrl from "@iyk/ui/assets/apple-touch-icon.png?url"
import FaviconSvgUrl from "@iyk/ui/assets/favicon.svg?url"

Here is how one might use it within a React app: 

import AppleTouchIconPngUrl from "@iyk/ui/assets/apple-touch-icon.png?url"
import FaviconSvgUrl from "@iyk/ui/assets/favicon.svg?url"

export default () => (
  <>
    <link rel="apple-touch-icon" href={AppleTouchIconPngUrl} />
    <link rel="icon" type="image/svg+xml" href={FaviconSvgUrl} />
  </>
)

Add Favicon.ico Endpoint

Create a favicon.ico endpoint in your app to ensure compatibility with browsers that request the favicon directly from the root path: 

import FaviconIco from "@iyk/ui/assets/favicon.ico?file"

export const GET = FaviconIco.response

Note: To use the ?file query parameter, you'll need to add the file plugin to your Vite configuration: 

import { default as file } from "@iyk/ui/vite/file-plugin"

export default defineConfig({
  vite: {
    plugins: [file()],
  },
})

Add Web App Manifest

Create a site.webmanifest endpoint in your app to enable Progressive Web App (PWA) functionality. Import our web app manifest icons and use them in your manifest configuration: 

import WebAppManifest192Png from "@iyk/ui/assets/web-app-manifest-192x192.png?url"
import WebAppManifest512Png from "@iyk/ui/assets/web-app-manifest-512x512.png?url"

export const loader = () => {
  return new Response(
    JSON.stringify({
      name: "Your App Name",
      short_name: "App",
      icons: [
        {
          src: WebAppManifest192Png,
          sizes: "192x192",
          type: "image/png",
          purpose: "maskable",
        },
        {
          src: WebAppManifest512Png,
          sizes: "512x512",
          type: "image/png",
          purpose: "maskable",
        },
      ],
      theme_color: "#000000",
      background_color: "#000000",
      display: "standalone",
    }),
    {
      headers: { "Content-Type": "application/manifest+json" },
    },
  )
}

Then, add the manifest link to your app's head section: 

<link rel="manifest" href="/manifest.webmanifest" />