Xenia.UI

This library contains a simple UI framework for Blazor. It is based on the Xenia UI guidelines. The library is still in development and is not yet ready for production use since many components are still missing.

Building

Prerequisites

• .NET Core SDK 8.0 later
• Node.js, make sure to install the LTS version

Run npm install to install all dependencies. Now you can run npm run build:css to build the CSS files.

How to use

Make sure to include the CSS files in your index.html or equivalent

<link href="_content/Xenia.Components/style.auto.css" rel="stylesheet"/>
<link href="_content/Xenia.Components/fonts.css" rel="stylesheet"/>

style.auto.css - Used in combination with the tailwind setting dark: media which will respect the users choice.

style.css - Used in combination with manual setting of dark-mode, consult https://tailwindcss.com/docs/dark-mode.

Using Tailwind classes in your webapp

If you want to use tailwind classes in your project use the tailwind preset npm package @xenodata/blazor-components.

Your tailwind.config.js file might look something like this:

import {DefaultTheme} from "@xenodata/blazor-components";

/** @type {import('tailwindcss').Config} */
const config = {
    content: ["./**/*.{html,razor,cs}"],
    theme: DefaultTheme
}

module.exports = config;