## Example
| | URL |
| :---: | :----- |
|  | [Storybook webpage of Design Componets](https://storybook.amnis.dev) |
## Motivation
There's a lot to consider when designing a web application, and even more with accessibility and user experience in mind.
Complying to accessibility standards is complex, redundant, and sometimes confusing for common interfaces. Much like having to manage your memory in some low-level languages, it can be extraordinarily difficult to master proper implementation and catch issues when they inevitably arise.
This design system focuses on delivering modern methods that abstract and bundle accessibility and user experience implementations (provided by the [WCAG 2 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)) for desktop and mobile environments: easing the efforts to a better web for all internet users.
This library is inspired by qualities from both the [U.S. Web Design System](https://github.com/uswds/uswds) and [MUI Core](https://github.com/mui/material-ui).
This library also aims help with legal compliance of many [governmental policies](https://www.w3.org/WAI/policies/) for the public and private sectors. You should always provide your own testing to ensure you meet your specific requirements.
# Alpha Stage
This library currently in the alpha stages of development. There are still features to create and refine; however, you can still download and use the package to provide feedback by [writing GitHub issues](https://github.com/amnis-dev/amnis-design/issues/new).
## Installation
Amnis Design is available as an [npm package](https://www.npmjs.com/package/@amnis/design).
```sh
# NPM
npm install @amnis/design
# Yarn
npm add @amnis/design
```
You can optionally install individual parts of the design system. Useful if you only desire specific features.
```sh
# NPM
npm install @amnis/hooks @amnis/style @amnis/icons @amnis/layout @amnis/display @amnis/entry
# Yarn
npm add @amnis/hooks @amnis/style @amnis/icons @amnis/layout @amnis/display @amnis/entry
```
## Getting Started with Amnis
Below is a basic example of rendering a `Button` component:
```jsx
import * as React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@amnis/design/Button';
const App = () => {
return (
);
}
ReactDOM.createRoot(document.querySelector('#app')).render();
```
Check it out in an interactive sandbox:
[](https://codesandbox.io/s/amnis-design-basic-button-08tb3x)
## Contributing
This is a growing project that you can add and improve upon! I'm welcoming to new PRs. Contrubuting is not just code eiter. If you identify an improvement/bug, [write a new GitHub issue](https://github.com/amnis-dev/amnis-design/issues/new) so I'm made aware and can resolve it.
For code contributions, see the **[contributing documentation](CONTRIBUTING.md)**.
---
_Source: https://npm.io/package/@amnis/layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
