typography-packgs
v1.0.2
Published
its a typography library
Downloads
60
Readme
Typography-packgs
This package combines TypeScript and CSS used to create various text components using the styled-components library. These components are useful for creating custom styles for different types of text.
Installation
npm install typography-packgs
Package purpose
This package is for creating ready-to-use components for different texts. It is mainly used in user interface (UI) projects to present text in a more aesthetic and functional way.
How to use?
import {
Display1,
H1,
Paragraph,
ButtonDefault,
InputDefault ,
Subtext
} from 'typography-packgs';
const MyPage = () => {
return (
<div>
<Display1 color="primary" align="center">
Welcome to My Website
</Display1>
<H1 color="secondary" align="left" subColor="gradient-1">
This is a Subheading
</H1>
<Subtext>
This is a paragraph tag
</Subtext>
<Paragraph color="black">
This is a sample paragraph. It provides additional information to the readers.
</Paragraph>
<ButtonDefault color="white">
Click Me!
</ButtonDefault>
<InputDefault color="black" placeholder="Type here..." />
</div>
);
};
Custom Colors
You can customize the colors used in the components by providing your own color values using the mergeColors
function. This function takes an object with your custom colors and merges them with the default colors.
import { mergeColors } from 'typography-packgs';
const userColors = {
"primary-500": "#ff5733",
"secondary-500": "#33c4ff",
...
};
const colors = mergeColors(userColors);
License
This project is licensed under the MIT License.