Popularity
8.3
Growing
Activity
9.3
Growing
3,511
63
245

Monthly Downloads: 0
Programming language: JavaScript
Tags: UI Frameworks     Responsive     Ant-design    
Latest version: v1.63.0

gestalt alternatives and similar libraries

Based on the "ant-design" category

Do you think we are missing an alternative of gestalt or a related project?

Add another 'ant-design' Library

README

Gestalt

NPM Version

Gestalt is a set of React UI components that enforces Pinterest’s design language. We use it to streamline communication between designers and developers by enforcing a bunch of fundamental UI components. This common set of components helps raise the bar for UX & accessibility across Pinterest.

View the full docs or Check out the Gestalt playground

Install

npm i gestalt --save or yarn add gestalt

Usage

Gestalt exports each component as ES6 modules and a single, precompiled CSS file:

import { Text } from 'gestalt';
import 'gestalt/dist/gestalt.css';

That syntax is Webpack specific (and will work with Create React App), but you can use Gestalt anywhere that supports ES6 module bundling and global CSS.

Development

Gestalt is a multi-project monorepo. The docs and components are all organized as separate packages that share similar tooling.

Install project dependencies and run tests:

yarn
yarn test

Build and watch Gestalt & run the docs server:

yarn start

Visit http://localhost:3000/ and click on a component to view the docs.

Codemods

When a release will cause breaking changes — in usage or in typing — we provide a codemod to ease the upgrade process. Codemods are organized by release in /packages/gestalt-codemods.

Usage:

Clone the Gestalt repo locally if you haven't already. Run the relevant codemod(s) in the relevant directory of your repo (not the Gestalt repo): anywhere the component to be updated is used. Example usage for a codebase using Flow:

yarn codemod --parser=flow -t={relative/path/to/codemod} relative/path/to/your/code

For a dry run to see what the changes will be, add the -d (dry run) and -p (print output) flags (pipe stdout to a file for easier inspection if you like).

Releasing

Every commit to master performs a release. As a reviewer, ensure the correct label is attached to every PR. Please follow semantic versioning.

  • patch release: documentation updates / spelling mistakes in code / internal scripts
  • minor release: add component / add component props / API change with codemod
  • major release: backwards incompatible API change without codemod

Example PR title: Avatar: Add outline prop

Typescript Support

Install the DefinitelyTyped definitions.

Install

npm i --save @types/gestalt

or

yarn add @types/gestalt