@papyrus-ui/components NPM

@papyrus-ui/components

The UI kit with fundamental React components based on the Papyrus UI design system.

Getting Started:

Install via npm or yarn:

npm install @papyrus-ui/components @papyrus-ui/styles @vanilla-extract/css
// or
yarn add @papyrus-ui/components @papyrus-ui/styles @vanilla-extract/css

Setting up styles and themes:

Import styles and themes into the entry component of your application.

import { lightTheme } from '@papyrus-ui/styles';

import '@papyrus-ui/styles/css/styles.css';
import '@papyrus-ui/components/css/components.css';

function App() {
  return (
    <html className={lightTheme}>
      {/* Your application content */}
    </html>
  );
}

If you have a client-side rendered app where direct access to the HTML document is limited, use ThemeProvider to dynamically apply the theme class.

import { lightTheme } from '@papyrus-ui/styles';
import { ThemeProvider } from '@papyrus-ui/components';

import '@papyrus-ui/styles/css/styles.css';
import '@papyrus-ui/components/css/components.css';

function App() {
  return (
    <ThemeProvider theme={lightTheme}>
      {/* Your application content */}
    </ThemeProvider>
  );
}

Using components across your application:
Import components and integrate them into your app.
```
import { Button } from '@papyrus-ui/components';

function Example() {
  return <Button>Click Me!</Button>;
}
```
Customize and extend components as needed to suit your application's requirements.

Contributing

We welcome contributions to enhance Papyrus UI. To contribute, fork the repository, make your changes, and submit a pull request. If you encounter issues or have suggestions, please open an issue on GitHub.

@floating-ui/react @react-hook/debounce @vanilla-extract/recipes classnames lodash react-icons react-number-format react-transition-group

11 months ago

11 months ago

12 months ago

1 year ago

1 year ago