Comprehensive Styles with Modern CSS

Base styles and color palettes for any web project.

Overview

Install

If you are using a bundler, you can install the package from npm and import into your css,

npm i uico

@import "uico";

or copy and paste the stylesheet into your project (everything is in one CSS file).

TailwindCSS

Tailwind is not required to use uico. If you are using uico with TailwindCSS, this configuration configures the custom colors and deduplicates other values. Tailwind preflight is not needed.

Layers

uico uses css layers applied in the following order.

theme - css custom properties
base - base styles and components

Below is the default theme. The base OKLCH palette will be calculated with relative color syntax based on the color, lightness, and chroma values you provide with custom properties. You can use any color function, you do not have to use hexadecimal. uico will automatically apply a light or dark color scheme based on your theme.

You can use or override any of uico’s custom properties in your CSS. View the theme layer to see a full list of custom properties uico sets. Most of sizing values are based on TailwindCSS and Radix UI values.

Check out the OKLCH color generator or the pre-made palettes for inspiration.

Base

Base styles are added to the elements in your application. There are also classes to apply these styles to other elements if needed. For example, when you need to style a link as a button, apply the button class to it.

button, .button

a, .link

Here’s a link to the project’s GitHub repository.

.badge

Primary Secondary Accent Destructive Ghost Outline

input, .input

Text

Password

URL

File

Date

Date Time - Local

Month

Week

Time

Number

Tel

Color

Checkbox

Switch (safari)

Radio 1

Radio 2

Radio 3

Range

Text Area

Select

Select Multiple

.prose

Base styles for many common elements, mainly font styles, are included without any extra configuration. Apply the prose class to add spacing and other styles to make it easier to read.

Here’s a sample of what different elements look like with the prose class applied.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolores cupiditate facilis nemo pariatur quae delectus, earum dolore asperiores. Id ad excepturi iusto commodi at totam placeat quasi facere officia in.

Facilisi sed nunc et mi nascetur efficitur.
- Etiam id laoreet tempus
Imperdiet conubia viverra dignissim pulvinar semper.

Litora facilisi nam in posuere dictumst velit auctor tempus rutrum.
- Orci lacinia aliquam hendrerit lectus magnis.
- Cubilia malesuada mi imperdiet suscipit nisi efficitur risus.
Platea fringilla tempor risus, tellus porta laoreet fringilla.

Quis hendrerit netus nullam dui sagittis ultricies est duis.
Parturient fringilla viverra proin cras convallis velit.
Aptent ultrices felis finibus ante venenatis placerat.

Lorem `ipsum`

Lorem ipsum odor amet, consectetuer adipiscing elit. Efficitur magnis lorem morbi curae aenean vestibulum parturient non. Taciti at neque blandit aptent sollicitudin; dignissim senectus hendrerit. Cubilia malesuada mi imperdiet suscipit nisi efficitur risus. Orci lacinia aliquam hendrerit lectus magnis. Etiam id laoreet tempus cubilia pretium. Dis imperdiet lobortis diam aptent varius commodo mauris. Litora facilisi nam in posuere dictumst velit auctor tempus rutrum. Dapibus torquent eu phasellus parturient, rhoncus tempor in potenti.

Diam bibendum mus pellentesque cras curabitur facilisi;: Ullamcorper vivamus malesuada ut finibus parturient accumsan arcu lacinia consectetur. Faucibus interdum luctus conubia tempor pellentesque diam vivamus est. Pharetra vivamus taciti ex massa commodo pretium senectus? Porttitor elit et porttitor cursus enim aptent torquent sapien.
Morbi ligula volutpat erat mollis blandit proin purus.: Orci lacinia aliquam hendrerit lectus magnis.

Ullamcorper vivamus malesuada ut finibus parturient accumsan arcu lacinia consectetur. Faucibus interdum luctus conubia tempor pellentesque diam vivamus est. Pharetra vivamus taciti ex massa commodo pretium senectus? Porttitor elit et porttitor cursus enim aptent torquent sapien. Dictum varius finibus, parturient dolor eros etiam fringilla. Laoreet nunc eros venenatis, eget nec ligula donec. Morbi ligula volutpat erat mollis blandit proin purus.

Diam bibendum mus pellentesque cras curabitur facilisi; urna facilisis? Interdum venenatis finibus cubilia nisl pretium. Per nascetur scelerisque lacus rhoncus varius inceptos nullam!

Lorem	Ipsum	Dolor
sit	amet	consectetur
adipisicing	elit	Dolores
cupiditate	facilis	nemo

/* this sample uses the base colors to highlight codeblocks with shiki */
:root {
	--shiki-foreground: var(--base-100);
	--shiki-background: var(--base-900);
	--shiki-token-constant: var(--base-50);
	--shiki-token-string: var(--base-300);
	--shiki-token-comment: var(--base-400);
	--shiki-token-keyword: var(--base-400);
	--shiki-token-parameter: var(--base-300);
	--shiki-token-function: var(--base-300);
	--shiki-token-string-expression: var(--base-200);
	--shiki-token-punctuation: var(--base-500);
	--shiki-token-link: var(--base-300);
}

uico

Theme