Getting Started

Pink Design is Appwrite's open-source design system for building consistent and reusable user interfaces. Follow the steps below to start building with Pink Design.

CDN

  1. Include the CSS library in your project

    Copy the following code into the <head> section of your HTML file.

    <link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink" />
    <!-- optionally, add icons -->
    <link rel="stylesheet" href="https://unpkg.com/@appwrite.io/pink-icons" />

NPM

  1. Install the CSS library

    Run the following command to install Pink Design as an NPM package.

    npm install @appwrite.io/pink

  2. Include the library in your project

    After installing Pink Design as a package, it will be added to the node_modules directory of your project. Include Pink Design as CSS library by importing it in your JavaScript files.

    import "@appwrite.io/pink";
    // optionally, add icons
    import "@appwrite.io/pink-icons";