typography

A minimal CSS typography with an optional Typography component for React applications.

View on GitHub

Typography

A minimal CSS typography with an optional Typography component for React applications.

Features:

Installation

npm install @madooei/typography

Peer Dependencies: If you are going to use the Typography component, make sure to install React and React DOM as peer dependencies:

npm install react react-dom

Styling

The package provides a CSS file that you can import into your project.

Add to your main CSS file:

@import "@madooei/typography/styles.css";

Or, add to your entry JavaScript file:

import "@madooei/typography/styles.css";

You can then use the typography class to apply the typography styles to a specific element.

Customization

You can customize the styles by overriding the CSS variables. Here is an example to map the typography styles to the Shadcn UI theme.

@import "@madooei/typography/styles.css";
/* Make sure index.css (your main CSS file) is imported before this file */
.typography {
  --typography-text-color: var(--foreground) !important;
  --typography-text-muted: var(--muted-foreground) !important;
  --typography-border-color: var(--border) !important;
  --typography-background-muted: var(--muted) !important;
  --typography-background-color: var(--background) !important;
  --typography-link-color: var(--primary) !important;
  --typography-highlight-background: var(--secondary) !important;
  --typography-highlight-text: var(--secondary-foreground) !important;
  --typography-background-card: var(--card) !important;
  --typography-background-card-text: var(--card-foreground) !important;
  --typography-font-sans: var(--font-sans) !important;
  --typography-font-serif: var(--font-serif) !important;
  --typography-font-mono: var(--font-mono) !important;
}

[!IMPORTANT] Don’t forget to add the !important flag to the CSS variables to override the default styles.

Typography Component

The package provides a Typography component that you can use to apply the typography styles to a specific element.

import { Typography } from "@madooei/typography";
import "@madooei/typography/styles.css";

const TypographyPage: React.FC = () => {
  return <Typography>{/* Your content */}</Typography>;
};

export default TypographyPage;

Props

The Typography component accepts the following props:

<Typography as="article">Content</Typography>
<Typography as="main">Content</Typography>
<Typography as="section">Content</Typography>
<Typography as="aside">Content</Typography>

// Default behavior as a div
<Typography>Content</Typography>

Cloning the Repository

To make your workflow more organized, it’s a good idea to clone this repository into a directory named typography-workspace. This helps differentiate the workspace from the typography located in the packages directory.

git clone https://github.com/madooei/typography typography-workspace

cd typography-workspace

Repository Structure

How to Use This Repo

Using a VSCode Multi-root Workspace

With Visual Studio Code, you can enhance your development experience by using a multi-root workspace to access packages, examples, and playgrounds simultaneously. This approach is more efficient than opening the root directory, or each package or example separately.

To set up a multi-root workspace:

  1. Open Visual Studio Code.
  2. Navigate to File > Open Workspace from File....
  3. Select the typography.code-workspace file located at the root of the repository. This action will open all specified folders in one workspace.

The typography.code-workspace file can be customized to include different folders or settings. Here’s a typical configuration:

{
  "folders": [
    {
      "path": "packages/typography"
    },
    {
      "path": "examples/react-basic"
    }
  ],
  "settings": {
    // Add any workspace-specific settings here, for example:
    "git.openRepositoryInParentFolders": "always"
  }
}

Developing the Package

Change to the package directory and install dependencies:

cd packages/typography
npm install

Package Management

When you are ready to publish your package:

npm run release

This single command will:

[!TIP] For detailed information about package publishing, versioning, and local development workflows, see the NPM Package Management Guide.