How New UI prepared their website for AI search
Discover New UI, a modern semantic framework for crafting beautiful, accessible websites and apps with stunning, ready-to-deploy templates.
Readers can learn how to effectively utilize New UI's semantic framework to create accessible and production-ready websites. This implementation focuses on delivering beautifully crafted templates, providing a solid foundation for developers aiming to enhance user experience and site performance.
Key Insights
Focused approach
A streamlined 5-section structure keeps things simple and scannable.
Optimal length
At 76 lines, this file balances detail with AI context window efficiency.
Two-file approach
Uses both llms.txt and llms-full.txt for different AI use cases.
llms.txt Preview
First 76 lines of 76 total
# 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.
---New UI is set up. Is yours?
Check your AI readiness in 30 seconds. See who AI recommends in your space. Free score, free account for the fixes.
1000+ sites already set up
New UI is ready for AI. Are you?
Check your AI readiness score in 30 seconds. Free score, free account for the fixes. Then generate your own llms.txt and start tracking your visibility.