New UI
New UI is a modern, semantic UI framework for building beautiful, accessible sites and apps.
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 — Beautifully crafted, production-ready, and easy to deploy templates.
- Blog lite — A simple, minimal blog template for Astro.
- Coming soon page — A simple coming soon page for better pre-launch conversions.
- Directory — Build your directory site. Fast & easy.
- Documentation — A fast, focused documentation site template.
- Job listing — Launch your job listing site in minutes.
- Journal — An Astro blog template.
- Spec — A simple template for publishing better spec pages.
- Writer — A minimal blog template for developers and writers.
Getting Started
- Installation — A quick guide to getting started with New UI.
Foundations
- Colors — New UI color system.
- Effects — New UI layering, elevations and effects styles.
- Spacings — New UI spacings.
- Typography — New UI modular typographic scale.
- Reset — Modern SCSS, CSS reset.
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:
@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 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.
llmtxt.app – AI SEO & Search Engine Optimization Directory