Prepared Docs

This guide will help you quickly set up and start using the system in your projects.

Installation

To install the design library, use the following command:

pnpm add @prepared911/ui-core

Configuring your App

To properly configure your app you will need to adjust a few things:

Global Styles

In a global styles file, import a few files to gain access to themes and variables:

Theme Support

You will then need to wrap your App Root with the ThemeProvider for proper styles:

REM Normalization

In order to make REMs more accessible, the Core styles for thise theme sets REM scaling to a 10 multipler. 1rem === 10px instead of the standard 16px.

1rem equals 10px
1.5rem equals 15px
30rem equals 300px

When working with spacing and typography, keep this scale in mind for consistency when working outside of the UI library.

Using Components

The library is built on Radix UI, ensuring accessibility and composability. To use a component, import it as follows:

Introduction

Releases

This guide will help you quickly set up and start using the system in your projects.

Installation

To install the design library, use the following command:

pnpm add @prepared911/ui-core

Configuring your App

To properly configure your app you will need to adjust a few things:

Global Styles

In a global styles file, import a few files to gain access to themes and variables:

Theme Support

You will then need to wrap your App Root with the ThemeProvider for proper styles:

REM Normalization

In order to make REMs more accessible, the Core styles for thise theme sets REM scaling to a 10 multipler. 1rem === 10px instead of the standard 16px.