New UI

Discover New UI, a modern semantic framework for crafting beautiful, accessible websites and apps with stunning, ready-to-deploy templates.

Lines

Sections

Want your own llms.txt file?

Generate a professional, AI-friendly file for your website in minutes!

Generate Yours Today

Visit Website View Raw File

llms.txt Preview

View Full File

# About New UI
New UI is a modern, semantic UI framework for building beautiful, accessible sites and apps.

## Templates
Beautifully crafted, production-ready, and easy to deploy templates.

- [Templates](https://new-ui.com/templates) — Beautifully crafted, production-ready, and easy to deploy templates.
- [Blog lite](https://new-ui.com/templates/blog-lite) — A simple, minimal blog template for Astro.
- [Coming soon page](https://new-ui.com/templates/coming-soon) — A simple coming soon page for better pre-launch conversions.
- [Directory](https://new-ui.com/templates/directory) — Build your directory site. Fast & easy.
- [Documentation](https://developers.cloudflare.com/agents/index.md) — A fast, focused documentation site template.
- [Job listing](https://new-ui.com/templates/job-listing) — Launch your job listing site in minutes.
- [Journal](https://new-ui.com/templates/journal) — An Astro blog template.
- [Spec](https://new-ui.com/templates/spec) — A simple template for publishing better spec pages.
- [Writer](https://new-ui.com/templates/writer) — A minimal blog template for developers and writers.


## Getting Started 
- [Installation](https://new-ui.com/docs/getting-started/installation) — A quick guide to getting started with New UI.


## Foundations
- [Colors](https://new-ui.com/docs/foundations/colors) — New UI color system.
- [Effects](https://new-ui.com/docs/foundations/effects) — New UI layering, elevations and effects styles.
- [Spacings](https://new-ui.com/docs/foundations/spacings) — New UI spacings.
- [Typography](https://new-ui.com/docs/foundations/typography) — New UI modular typographic scale.
- [Reset](https://new-ui.com/docs/foundations/reset) — Modern SCSS, CSS reset.

## Theming
- [Configuration](https://new-ui.com/docs/theming/configuration) — Default themes to quickly change the look and feel of your app.


## Installation
To set up the project, open your terminal and run the following command:

```
npm i -D @new-ui/foundations
```

#### Import
Import the New UI foundations by adding the following line at the top of your SCSS file:

```scss
@use '@new-ui/foundations';     // Use `@import` for CSS
```

#### Set the theme

Set the theme by adding the `data-new-ui-theme` attribute to your HTML wrapper element, for example:

```html
<html data-new-ui-theme="light">
```

|---
| Available themes | Value
|-|:-|:-
| Light (Default) | `light`
| Light warm | `light--warm`
| Light cold | `light--cold`
| Dark  (Default) | `dark`
| Dark warm | `dark--warm`
| Dark cold | `dark--cold`
|---


#### Usage guide
- All classes associated with the New UI are prefixed with a global namespace followed by a hyphen: `nu-`
- In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing using BEM syntax.
    - `c-` for UI components.
    - `l-` for layout-related styles.
    - `u-` for utilities.
    - `is-` and has- for specific states.
    - `js-` for targeting JavaScript-specific functionality.

---

Ready to create yours?

Generate a professional llms.txt file for your website in minutes with our AI-powered tool.

Generate Your llms.txt File