## 📦 Install
To install the Wix Design System, use one of the following commands:
```bash
npm install @wix/design-system
```
or
```bash
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.
```jsx
import { WixDesignSystemProvider, Button } from '@wix/design-system';
const App = () => (
);
```
## 💫 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.
```jsx
// 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](https://discord.com/channels/773211030314418196/1144282838502477945) or reach out in Slack `#wix-design-system`
## 📝 License
This project is offered under the [MIT License](https://opensource.org/license/mit).
