{"id":13807311,"url":"https://github.com/getspacetime/makani","last_synced_at":"2025-05-14T00:31:09.386Z","repository":{"id":36982000,"uuid":"496819077","full_name":"getspacetime/makani","owner":"getspacetime","description":"Collection of UI components built specifically for .NET MAUI Blazor","archived":true,"fork":false,"pushed_at":"2023-10-11T14:35:28.000Z","size":46391,"stargazers_count":60,"open_issues_count":28,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-04-22T00:04:13.269Z","etag":null,"topics":["blazor","blazor-components","blazor-server","blazor-ui-components","blazor-webassembly","component-library","components","csharp","dotnet","maui-blazor","tailwindcss","wasm"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/getspacetime.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"getspacetime","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2022-05-27T01:02:39.000Z","updated_at":"2024-08-11T13:08:20.000Z","dependencies_parsed_at":"2024-04-10T01:49:18.220Z","dependency_job_id":"f711621a-33a1-411e-ab2a-aaf76db489d4","html_url":"https://github.com/getspacetime/makani","commit_stats":{"total_commits":162,"total_committers":3,"mean_commits":54.0,"dds":"0.11111111111111116","last_synced_commit":"c7c374c7660e81ecc17e864d4d4e9f3255744302"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getspacetime%2Fmakani","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getspacetime%2Fmakani/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getspacetime%2Fmakani/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/getspacetime%2Fmakani/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/getspacetime","download_url":"https://codeload.github.com/getspacetime/makani/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254046265,"owners_count":22005566,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blazor","blazor-components","blazor-server","blazor-ui-components","blazor-webassembly","component-library","components","csharp","dotnet","maui-blazor","tailwindcss","wasm"],"created_at":"2024-08-04T01:01:23.935Z","updated_at":"2025-05-14T00:31:04.363Z","avatar_url":"https://github.com/getspacetime.png","language":"HTML","funding_links":["https://github.com/sponsors/getspacetime"],"categories":["Libraries \u0026 Extensions"],"sub_categories":["Component bundles"],"readme":"[![Build](https://github.com/getspacetime/makani/actions/workflows/build.yml/badge.svg)](https://github.com/getspacetime/makani/actions/workflows/build.yml?style=flat-square)\n[![nuget](https://img.shields.io/nuget/dt/makani?style=flat-square)](https://www.nuget.org/packages/Makani)\n[![nuget](https://img.shields.io/nuget/vpre/makani?style=flat-square)](https://www.nuget.org/packages/Makani/)\n[![GitHub stars](https://img.shields.io/github/stars/getspacetime/makani?style=flat-square)](https://github.com/getspacetime/makani/stargazers)\n[![last commit](https://img.shields.io/github/last-commit/getspacetime/makani?style=flat-square)](https://github.com/getspacetime/makani/commits/main)\n[![Discord](https://img.shields.io/discord/984241021225414787?style=flat-square)](https://discord.gg/PeBbYy6WKq)\n\n# 🏖️ makani\nHeadless UI Components for Blazor.\n\n\u003e **Note**\n\u003e This repository is now archived. All future development will take place in [Pure Blazor Components](https://github.com/pureblazor/components).\n\n1. [Why Makani](#why-makani)\n2. Getting Started\n    - [Quick Start](#quick-start)\n    - [Using Syntax Highlighting](#using-syntax-highlighting)\n3. [Contributing](#contributing)\n4. [Live Documentation](https://getspacetime.github.io/makani/)\n5. [Roadmap \u0026 Components](https://github.com/getspacetime/makani/wiki/Roadmap-\u0026-Components)\n\n\n## Why Makani?\nMakani 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. \n\nThe main focus of the Makani library is to provide a powerful set of components that work flawlessly with .NET MAUI Blazor.\n\n## 🏗️ Design Principles\n- Built first and foremost for .NET MAUI Blazor\n- Components should be easy to customize\n- Components should be composable, extensible, and performant\n- Always listen to the community\n\n\u003e ⚠️ **This library is currently under active development.** You may experience bugs, breaking changes, or missing functionality.\n\n## 🚀 Getting Started\n\n### Quick Start\n\n**1. Install via NuGet**\n\n```\ndotnet add package Makani\n```\n\n**2. Update your `_Imports.razor`**\n\n```razor\n@using Makani\n```\n\n**3. Add Makani**\n```csharp\nbuilder.Services.AddMakani();\n```\n\n**4. Add Static Assets**\n```html\n\u003chead\u003e\n    \u003clink href=\"_content/Makani/dist/makani.css\" rel=\"stylesheet\" /\u003e\n\u003c/head\u003e\n```\n\n**5. Build away!**\n```razor\n\u003cMkButton Color=\"MkColor.Primary\"\u003eHello world!\u003c/MkButton\u003e\n```\n\n### Using Syntax Highlighting\nThe syntax highlighting component is an optional feature. If you don't need this feature, skip this section and avoid loading the additional resources.\n\nMakani is using [Prism](https://prismjs.com/) for syntax highlighting, so if you need this component, a few more steps are needed. \n\nIn your `index.html`, add **only one** of the following themes to the `\u003chead\u003e...\u003c/head\u003e` section:\n```html\n\u003c!-- vscode-dark-plus is the one used in the Makani docs --\u003e\n\u003clink href=\"_content/Makani/css/vscode-dark-plus.css\" rel=\"stylesheet\" /\u003e\n\n\u003c!--\u003clink href=\"_content/Makani/css/atom-dark.css\" rel=\"stylesheet\" /\u003e\n\u003clink href=\"_content/Makani/css/coy.css\" rel=\"stylesheet\" /\u003e\n\u003clink href=\"_content/Makani/css/okaidia.css\" rel=\"stylesheet\" /\u003e\n\u003clink href=\"_content/Makani/css/tomorrow-night.css\" rel=\"stylesheet\" /\u003e--\u003e\n```\n\nAdd the following JS to the end of the `\u003cbody\u003e...\u003c/body\u003e` section:\n```html\n\u003cscript src=\"_content/Makani/prism.js\"\u003e\u003c/script\u003e\n```\n\n### Further Customization with Tailwind\n\nAt the core of this library is the ability to customize components using Tailwind CSS. For further customization, extra steps are required:\n\n1. Install the Tailwind CLI\n\nIn the `wwwroot` of your application, follow the [Tailwind CLI installation](https://tailwindcss.com/docs/installation)\n\n2. Configure `.razor` and your `index.html` files in `tailwind.config.js`\n\n**Example**\n```js\nmodule.exports = {\n  content: [\"../**/*.razor\", \"../*.razor\", \"index.html\"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}\n```\n\n3. Update your `.csproj` file to run the Tailwind CLI\n\n**Example**\n```\n\u003cTarget Name=\"NpmInstall\" BeforeTargets=\"BeforeBuild\"\u003e\n    \u003cExec WorkingDirectory=\"wwwroot\" Command=\"npm install\" /\u003e\n\u003c/Target\u003e\n\n\u003cTarget Name=\"Tailwind\" DependsOnTargets=\"NpmInstall\" BeforeTargets=\"Build\"\u003e\n    \u003cExec WorkingDirectory=\"wwwroot\" Command=\"npx tailwindcss -i app.css -o ./dist/styles.css\" /\u003e\n\u003c/Target\u003e\n```\n\n4. Add the CSS to your `index.html`\n\n```html\n\u003chead\u003e\n    \u003clink href=\"dist/styles.css\" rel=\"stylesheet\" /\u003e\n\u003c/head\u003e\n```\n\n## Performance / Benchmarks\nProviding a **lightweight** and **performant** component library is a major goal of this project.\n\n| Area | Target | Actual | Passing\n| --- | --- | --- | --- |\n| DLL Size | 200kb | 26.4kb | ✔️ |\n| JS Bundle Size | 10kb | 392b | ✔️ |\n| CSS Bundle Size | 50kb | 4.6kb | ✔️ |\n| Time to Interactive | 1s | 0.6s | ✔️ |\n| Total Blocking Time | 200ms | 140ms | ✔️ |\n| Cumulative Layout Shift | 0 | 0 | ✔️ |\n| First Contentful Paint | 0.5s | 0.3s | ✔️ |\n| RAM Usage | TBD | | |\n| CPU Usage | TBD | | |\n| First Input Delay | TBD | | |\n\n_The targets specified are only initial estimates and are open to change over time based on a reasonable standard._\n\n**Sources**\n- https://blog.openreplay.com/top-metrics-you-need-to-understand-when-measuring-front-end-performance\n- https://developer.mozilla.org/en-US/docs/Learn/Performance/Measuring_performance\n\n## Accessibility\nA UI component library isn't helpful if it isn't useful to **everyone**.\n\nTBD\n\n## Contributing\n\nWe encourage you to contribute! People of all ages / occupations / experience are welcome. \n\nPlease read the [Contribution Guidelines](https://github.com/getspacetime/makani/blob/main/CONTRIBUTING.md) for how to proceed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetspacetime%2Fmakani","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgetspacetime%2Fmakani","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgetspacetime%2Fmakani/lists"}