Documentation
Table of Contents
Overview
Noya UI is a 🪐 Universal Component Kit, built to work with every major design system, color theme, and web framework. Whichever way you like to build web apps, Noya UI has you covered.
Each Noya UI component is like a template or blueprint -- a set of UI elements and styles that you can use to build your own UI. They're designed to be copied and pasted from this website into your own code, rather than installed as separate npm packages. This makes them easy to customize and refactor as much as you'd like to fit your needs.
We're always looking to expand our support for new libraries and frameworks, so if you don't see your favorite one listed here, please let us know!
Configuring Noya UI
Noya UI lets you mix-and-match your choice of frontend web technologies. You can choose between HTML or React or Vue, Tailwind or CSS or CSS Modules, and a variety of popular open source component libraries. If you're not sure which to use, this section will help you get started.
Plain HTML
Our "Plain HTML" option is a minimal set of plain HTML + CSS components (plus optionally Tailwind and/or React/Vue) designed to work completely standalone. Simply drop these into your project and you're ready to go!
A few components use Headless UI for interactivity (if you're using React):
npm install @headlessui/react
If you're not using React, however, you'll need to build the interactivity yourself.
Component libraries
If you're interested in using an open source design system library with more interactivity and accessibility built-in, we also support the following:
To install one of these libraries, follow the installation instructions for the latest version on its website. If you choose to use one of these component libraries, you'll also need to use React.
Each library and framework is a little different, both visually and in terms of writing idiomatic code. We aim to embrace these differences. For instance, Chakra UI and MUI have different button styles -- so depending on which design system library you pick, the buttons throughout the Noya UI Component Kit will look quite different. The code for these components will also look different, e.g. many Chakra components props support responsive styles, while Ant Design relies mainly on CSS for this purpose.
Web frameworks
We currently support plain HTML, React, and Vue. Plain HTML is often a good choice for simple websites, while React is a popular choice for building more complex web apps.
Styling options
We currently support:
- Plain CSS
- CSS Modules
- Tailwind CSS
If you're starting a new project, we recommend using Tailwind CSS for its power and simplicity. Tailwind is a great choice for building a modern, responsive web app quickly. If you're working on a project that already uses a different styling system, you can use one of the CSS options.
Both Tailwind and CSS Modules are supported out-of-the-box by Next.js, a popular React framework. To use them with other tools, you may need to install additional plugins or loaders.
Theming
Optional: Inter Font
We use the Inter font for most of our examples, which is free and open source. We also use font smoothing, which improves the visual appearance of most fonts on many devices. To add Inter and font smoothing to your project, you can use the following CSS:
/* Import the Inter font at the very top of your CSS file */
@import url('https://rsms.me/inter/inter.css');
:root {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-family: InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}Our MUI examples use the font Roboto, which is described in more detail in the MUI docs.
Styling "Plain HTML"
We recommend at least including the following to reset margins on paragraphs and headers (unless you're using Tailwind, which already resets these):
p, h1, h2, h3, h4, h5, h6 {
margin: 0;
}
Tailwind CSS
If you're using Tailwind, we use the default theme configuration so no further setup is needed.
Chakra UI
For Chakra UI, we override the default theme to use our own color palette. This is optional, but is needed if you want your UI to look exactly the same as it does on this website.
First, configure your theme here:
Next, create a file called theme.ts in your project with the following content:
Then, create a file called Provider.tsx (or choose a different name) in your project with the following content:
Lastly, import the Provider.tsx file in your app's entry point (e.g. index.tsx or App.tsx) and wrap your app component with the Provider component.
Ant Design
For Ant Design, we override the default theme to use our own color palette and font sizes. This is optional, but is needed if you want your UI to look exactly the same as it does on this website.
First, configure your theme here:
Next, create a file called theme.ts in your project with the following content:
Then, create a file called Provider.tsx (or choose a different name) in your project with the following content:
Lastly, import the Provider.tsx file in your app's entry point (e.g. index.tsx or App.tsx) and wrap your app component with the Provider component.
MUI (Material Design)
For MUI, we override the default theme to use our own color palette and font sizes. This is optional, but is needed if you want your UI to look exactly the same as it does on this website.
First, configure your theme here:
Next, create a file called theme.ts in your project with the following content:
Then, create a file called Provider.tsx (or choose a different name) in your project with the following content:
Lastly, import the Provider.tsx file in your app's entry point (e.g. index.tsx or App.tsx) and wrap your app component with the Provider component.
Radix Themes
If you've followed the instructions for setting up Radix Themes (on their website) then you likely already have a Theme component set up, in which case you just need to configure its props.
First, configure your theme here:
Next, if you already have a Theme component, copy the <Theme> props from the following code. If you don't already have a theme provider, create a file called Provider.tsx (or choose a different name) in your project with the following content:
Lastly, import the Provider.tsx file in your app's entry point (e.g. index.tsx or App.tsx) and wrap your app component with the Provider component.
Assets
We use a variety of image and icon assets in our examples:
- Icons: the inline SVGs we use come from the Heroicons set, which is an MIT licensed open source icon pack.
- Geometric patterns and gradients: These SVGs are generated by our own custom algorithms and are free to use in your projects per the same terms as our code snippets.
- Photos: Our photos are generated by AI algorithms. The people and places in these photos are not real. You may use these in your projects per the same terms as our code snippets. However, we may not support the same photo urls forever. If you want to use these photos in your project, we recommend downloading them and hosting them yourself.
See Noya UI License Agreement for the terms of use of our code snippets.