Basic

Lqvrent UI

A powerful Angular component library that works with TailwindCSS, all components are open source and free to use.

Features

Written in TypeScript with complete defined types.
Supports OnPush mode for high performance.
Customizable design in both global and local scopes.
Powerful features easily usable in every components.
Every components are designed with Dark mode in mind.

Requirement

This component requires the Tailwind Typography Plugin to be installed.
Please refer to the Installation guide for instructions.

In your tailwind.config.js:

module.exports = {
  // ...
  plugins: [
    // ...
    require('@tailwindcss/typography'),
  ],
}

Description

This component is useful for writing blog articles, documentation, or automatically styling generated markdown.
For example, this documentation is entirely generated in markdown, allowing us to focus more on writing code than styling each page.

API

Supports global configuration

View the default configuration for this component. Learn more about global configuration.

import { LuiTypographyModule } from '@lqvrent-workspace/lqvrent-ui/typography';

<article lui-typography>
  <!-- Your content here -->
</article>

[lui-typography]

component

Standalone

Property	Description	Type	Default
`[luiGrayScale]`	Gray scale to be used by prose	`'gray' \| 'slate' \| 'zinc' \| 'neutral' \| 'stone'`	defined in config
`[luiFullWidth]`	Fit parent width (true) or use prose width (false)	`boolean`	defined in config

More examples

Inline typography

Typography supports link, code, and keyboard elements.

You can also highlight text, make it bold, italic, or ~~strikethrough~~.

Title

Lqvrent UI, a powerful Angular component library

Please don't use h5, h6.

From Tailwind Typography:
Please don't use h5 or h6 in your content, Medium only supports two heading levels for a reason, you animals. I honestly considered using a before pseudo-element to scream at you if you use an h5 or h6.

We don't style them at all out of the box because h4 elements are already so small that they are the same size as the body copy. What are we supposed to do with an h5, make it smaller than the body copy? No thanks.

Lists

Unordered list item 1
Unordered list item 2
Unordered list item 3

Ordered list item 1
Ordered list item 2
Ordered list item 3

Table

First Name	Last Name	Email
Carlyle	Baser	[email protected]
Brunhilda	Scola	[email protected]
Ermanno	Axby	[email protected]

Image

Blockquote

Someone famously said:

When I wrote this code, only God and I understood what I did. Now only God knows.

Code (pre)

const code = 'Hello, world!';

Divider

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac elit at erat eleifend aliquet vel id justo.

General

Layout

Navigation

Data Display

Data Entry

Feedback

Typography