Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/getspacetime/makani
Collection of UI components built specifically for .NET MAUI Blazor
https://github.com/getspacetime/makani
blazor blazor-components blazor-server blazor-ui-components blazor-webassembly component-library components csharp dotnet maui-blazor tailwindcss wasm
Last synced: 3 months ago
JSON representation
Collection of UI components built specifically for .NET MAUI Blazor
- Host: GitHub
- URL: https://github.com/getspacetime/makani
- Owner: getspacetime
- License: mit
- Archived: true
- Created: 2022-05-27T01:02:39.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-11T14:35:28.000Z (about 1 year ago)
- Last Synced: 2024-08-02T17:13:04.504Z (3 months ago)
- Topics: blazor, blazor-components, blazor-server, blazor-ui-components, blazor-webassembly, component-library, components, csharp, dotnet, maui-blazor, tailwindcss, wasm
- Language: HTML
- Homepage:
- Size: 44.2 MB
- Stars: 61
- Watchers: 6
- Forks: 5
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-blazor - Makani -   Lightweight, customizable, and performance oriented component library for Blazor and .NET MAUI Hybrid. Built with TailwindCSS. [Demo](https://getspacetime.github.io/makani/). (Libraries & Extensions / Component bundles)
README
[](https://github.com/getspacetime/makani/actions/workflows/build.yml?style=flat-square)
[](https://www.nuget.org/packages/Makani)
[](https://www.nuget.org/packages/Makani/)
[](https://github.com/getspacetime/makani/stargazers)
[](https://github.com/getspacetime/makani/commits/main)
[](https://discord.gg/PeBbYy6WKq)
# 🏖️ makani
Headless UI Components for Blazor.
> **Note**
> This repository is now archived. All future development will take place in [Pure Blazor Components](https://github.com/pureblazor/components).
1. [Why Makani](#why-makani)
2. Getting Started
- [Quick Start](#quick-start)
- [Using Syntax Highlighting](#using-syntax-highlighting)
3. [Contributing](#contributing)
4. [Live Documentation](https://getspacetime.github.io/makani/)
5. [Roadmap & Components](https://github.com/getspacetime/makani/wiki/Roadmap-&-Components)
## Why Makani?
Makani was born based on the need for lightweight, performant, and customizable UI components for .NET MAUI Blazor. Makani is built on the wonderful CSS framework, [Tailwind CSS](https://tailwindcss.com/). While a simple theme will be included, the hope is that the community is able to customize the theme to fit their needs.
The main focus of the Makani library is to provide a powerful set of components that work flawlessly with .NET MAUI Blazor.
## 🏗️ Design Principles
- Built first and foremost for .NET MAUI Blazor
- Components should be easy to customize
- Components should be composable, extensible, and performant
- Always listen to the community
> ⚠️ **This library is currently under active development.** You may experience bugs, breaking changes, or missing functionality.
## 🚀 Getting Started
### Quick Start
**1. Install via NuGet**
```
dotnet add package Makani
```
**2. Update your `_Imports.razor`**
```razor
@using Makani
```
**3. Add Makani**
```csharp
builder.Services.AddMakani();
```
**4. Add Static Assets**
```html
```
**5. Build away!**
```razor
Hello world!
```
### Using Syntax Highlighting
The syntax highlighting component is an optional feature. If you don't need this feature, skip this section and avoid loading the additional resources.
Makani is using [Prism](https://prismjs.com/) for syntax highlighting, so if you need this component, a few more steps are needed.
In your `index.html`, add **only one** of the following themes to the `...` section:
```html
```
Add the following JS to the end of the `...` section:
```html
```
### Further Customization with Tailwind
At the core of this library is the ability to customize components using Tailwind CSS. For further customization, extra steps are required:
1. Install the Tailwind CLI
In the `wwwroot` of your application, follow the [Tailwind CLI installation](https://tailwindcss.com/docs/installation)
2. Configure `.razor` and your `index.html` files in `tailwind.config.js`
**Example**
```js
module.exports = {
content: ["../**/*.razor", "../*.razor", "index.html"],
theme: {
extend: {},
},
plugins: [],
}
```
3. Update your `.csproj` file to run the Tailwind CLI
**Example**
```
```
4. Add the CSS to your `index.html`
```html
```
## Performance / Benchmarks
Providing a **lightweight** and **performant** component library is a major goal of this project.
| Area | Target | Actual | Passing
| --- | --- | --- | --- |
| DLL Size | 200kb | 26.4kb | ✔️ |
| JS Bundle Size | 10kb | 392b | ✔️ |
| CSS Bundle Size | 50kb | 4.6kb | ✔️ |
| Time to Interactive | 1s | 0.6s | ✔️ |
| Total Blocking Time | 200ms | 140ms | ✔️ |
| Cumulative Layout Shift | 0 | 0 | ✔️ |
| First Contentful Paint | 0.5s | 0.3s | ✔️ |
| RAM Usage | TBD | | |
| CPU Usage | TBD | | |
| First Input Delay | TBD | | |
_The targets specified are only initial estimates and are open to change over time based on a reasonable standard._
**Sources**
- https://blog.openreplay.com/top-metrics-you-need-to-understand-when-measuring-front-end-performance
- https://developer.mozilla.org/en-US/docs/Learn/Performance/Measuring_performance
## Accessibility
A UI component library isn't helpful if it isn't useful to **everyone**.
TBD
## Contributing
We encourage you to contribute! People of all ages / occupations / experience are welcome.
Please read the [Contribution Guidelines](https://github.com/getspacetime/makani/blob/main/CONTRIBUTING.md) for how to proceed.