Core Concepts ​

Netzo provides a collection of building blocks for tailor-made for the Deno fresh framework (recommended). The goal is to provide everything related to UI when building custom frontends. This includes components, composables, modules and unocss-powered themes including colors, icons and typography.

• Headless components
• Built with Radix UI and UnoCSS
• Dark mode support
• Keyboard shortcuts
• Icons via CSS
• Fully typed

Motivation ​

The styles should be separate from implementation. One of the drawback of packaging components into a component library is that the style is coupled with the implementation.

netzo/components separates (unstyled) components from styles. The components are built using headless (unstyled) primitives from radix-ui and can be styled however you would like, though we recommend unocss. To ease styling, the UnoCSS presetNetzo can be used for beautiful and consistent defaults which you can still easily customize however you want.

Styles ​

You can choose to theme components however you would like. However, we strongly recommend using UnoCSS together with the netzo theme provided by presetNetzo.

Powered by UnoCSS, you can use Tailwind/Windi CSS utilities to quickly customize the look and feel of components. The presetNetzo includes component class names with beautiful and consistent defaults which you can still easily customize.

Theming ​

The netzo theme is based on the UnoCSS presetNetzo. You can find all the default values and available entries in netzo/modules/unocss/preset-netzo.ts. Note that the UserConfig object can be passed additional properties to extend the netzo theme globally.

import { defineNetzoConfig } from 'netzo/config.ts'
import { presetNetzo } from 'netzo/modules/unocss/preset-netzo.ts'

export default defineNetzoConfig({
  modules: {
    unocss: {
      presets: [presetNetzo()]
      // ...additional configuration
    }
  }
})

import { defineNetzoConfig } from 'netzo/config.ts'
import { presetNetzo } from 'netzo/modules/unocss/preset-netzo.ts'

export default defineNetzoConfig({
  modules: {
    unocss: {
      presets: [presetNetzo()]
      // ...additional configuration
    }
  }
})

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />
/// <reference lib="deno.unstable" />

import manifest from './fresh.gen.js'
import config from './netzo.config.js'
import { start } from '$fresh/server.ts'

await start(manifest, config)

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />
/// <reference lib="deno.unstable" />

import manifest from './fresh.gen.js'
import config from './netzo.config.js'
import { start } from '$fresh/server.ts'

await start(manifest, config)

#!/usr/bin/env -S deno run -A --watch=static/,routes/

import 'std/dotenv/load.ts'
import config from './netzo.config.js'
import dev from '$fresh/dev.ts'

await dev(import.meta.url, './main.ts', config)

#!/usr/bin/env -S deno run -A --watch=static/,routes/

import 'std/dotenv/load.ts'
import config from './netzo.config.js'
import dev from '$fresh/dev.ts'

await dev(import.meta.url, './main.ts', config)

Usage ​

The presetNetzo introduces extends the Tailwind/Windi CSS utility classes. For example, you can use the m-1 class to apply a margin of 1px to an element:

<div class="m-1">Hello</div>

<div class="m-1">Hello</div>

m-1 will be detected and the following CSS will be generated:

.m-1 { margin: 1px; }

.m-1 { margin: 1px; }

Credits ​

• shadcn/ui
• radix-ui
• unocss
• @tanstack/react-table
• vueuse
• cmdk