open-index/open-npm huggingface dataset:
npm package: @newsh/ui
Description: Newsh specific components and a pre-configured tailwind-config.
Latest version: 0.0.27

# @newsh/ui

Newsh specific components and a pre-configured tailwind-config.

## Install

```bash
npm i @newsh/ui --save
```

### Preparation:

Add this into your `tailwind.config.js`:

```ts
module.exports = {
    presets: [require('@newsh/ui/tailwind.config')],
    // Your extra additions here...
};
```

This will track the following files by default:

```ts
content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html',
    './index.html',
    'node_modules/@newsh/ui/dist/**/*.js',
];
```

If you have a custom setup, then you will need to append `'node_modules/@newsh/ui/dist/**/*.js',`
to your content list in order for newsh/ui to work.

### Fonts

You also have to include the Google fonts scripts inside your `<head>`-tag.

```html
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
    rel="stylesheet"
/>
```

## Usage

### Button example

```jsx
import { Button } from '@newsh/ui';

<Button variant="outline">Click me</Button>;
```

### Typography example

```jsx
<div className="text-heading-1">This will be styled as a large heading.</div>
```

See `tailwind.config.js` for all typography and colors.

## Storybook Development

```bash
npm install
npm run start
```

## Release

```bash
npm run release
```