@wix/design-system

A collection of React components that conform to Wix Style.

📦 Install

To install the Wix Design System, use one of the following commands:

npm install @wix/design-system

yarn add @wix/design-system

Browsers support

Google Chrome (version 92 and above)
Safari for Mac (version 14 and above)
Microsoft Edge (version 100 and above)
Firefox (version 91 and above)

Setting up your app

All @wix/design-system applications start with a WixDesignSystemProvider, which injects the MadeFor font and enables font smoothing.

import { WixDesignSystemProvider, Button } from '@wix/design-system';

const App = () => (
  <WixDesignSystemProvider>
    <Button>Hello World!</Button>
  </WixDesignSystemProvider>
);

💫 Testkits

All our components come with Testkits that assist users in testing them effectively.

A component's Testkit provides an interface to the component, enabling automated tests to access its functions without requiring detailed knowledge of the underlying technology.

// Example

// 1. Import
import { InputTestkit } from '@wix/design-system/dist/testkit';

// 2. Initialize
const inputDriver = InputTestkit({
  wrapper: document.body,
  dataHook: 'name-input',
});

// 3. Interact
it('test', async () => {
  await inputDriver.enterText('hello world');
  expect(await inputDriver.getText()).toBe('hello world');
});

All methods are documented in our Storybook components stories, and some can be viewed through the TypeScript interface.

Our Testkits currently support three major testing frameworks: @testing-library/react, puppeteer, and vanilla.

🙋 Support

Connect with our team and network with other app developers using the Wix Design System in our Discord channel or reach out in Slack #wix-design-system

📝 License

This project is offered under the MIT License.