@newsh/ui
v0.0.27
Published
Newsh specific components and a pre-configured tailwind-config.
Downloads
8
Keywords
Readme
@newsh/ui
Newsh specific components and a pre-configured tailwind-config.
Install
npm i @newsh/ui --savePreparation:
Add this into your tailwind.config.js:
module.exports = {
presets: [require('@newsh/ui/tailwind.config')],
// Your extra additions here...
};This will track the following files by default:
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.
<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
import { Button } from '@newsh/ui';
<Button variant="outline">Click me</Button>;Typography example
<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
npm install
npm run startRelease
npm run release