Numerous Philanthropic Misanthropes

    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    Built With Stencil

    Ionic Site Shared

    This repo is the implementation of Ionic's Design System. The design system iteslf is on Figma. More reading on Design Systems and our implementation can be found on Notion. This repo is based on stencil-app-starter.


    The need for documentation is known. We are currently working with the capacitor team to aid in documenting functional components.

    Components vs Design System

    This shared repo contains components that implement our design system. Things like buttons, cards, headings, form fields... It also contains resused components unrelated to our design system. Things like Prismic/Disqus integration tools, additional reading links, ads... Multiple Ionic sites use these components, but they are not part of the formal design system. These components are in src/components while Design System components are in src/ds/components.

    NPM Link

    Until this repo is more mature, it may be useful to work in this repo while actively working on sites that use these components themselves. The NPM Link command lets you link dependencies in your package.json to another project on your computer instead of grabbing it from npm. For example to link this repo with the capacitor-site project, assuming this repo is the same parent director as the capacitor-site you would run this from the capacitor-site root folder:

    # starting out in the root of this project 
    npm link ../ionic-site-shared

    Getting Started

    To start building a new web component using Stencil, clone this repo to a new directory:

    git clone my-component
    cd my-component
    git remote rm origin

    and run:

    npm install
    npm start

    To build the component for production, run:

    npm run build

    To run the unit tests for the components, run:

    npm test

    Need help? Check out our docs here.

    Using this component

    Script tag

    • Publish to NPM
    • Put a script tag similar to this <script src=''></script> in the head of your index.html
    • Then you can use the element anywhere in your template, JSX, html etc

    Node Modules

    • Run npm install my-component --save
    • Put a script tag similar to this <script src='node_modules/my-component/dist/mycomponent.js'></script> in the head of your index.html
    • Then you can use the element anywhere in your template, JSX, html etc

    In a stencil-starter app

    • Run npm install my-component --save
    • Add an import to the npm packages import my-component;
    • Then you can use the element anywhere in your template, JSX, html etc




    npm i @ionic-internal/sites-shared

    DownloadsWeekly Downloads






    Unpacked Size

    11.7 MB

    Total Files


    Last publish


    • larsmikkelsen
    • jaredcbaum
    • kevinports
    • perrygovier
    • maxlynch