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.
- .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.
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.
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;