CyberDuck

CyberDuck is a small React component library and theme (Cyberpunk yellow) built on Bootstrap and MUI styles.

Installation

If you are developing locally you can install from the repository directory:

npm pack
npm install /path/to/cyberduck-0.0.0.tgz

Install directly from the repository

If you don't want to publish to the npm registry you can install the package directly from the Git repository:

npm install git+https://git.maze.io/maze/cyberduck.git
# or a specific branch or tag
npm install git+https://git.maze.io/maze/cyberduck.git#main

Note: when installing from a git repository, npm will clone the source. For consumers to get built artifacts (the dist bundle and compiled types) the repository must either include the dist output or provide a prepare/build step that runs on install. If you prefer not to publish, using npm pack from the repo owner (tarball) ensures the built dist is included.

Including styles

CyberDuck emits a single bundled stylesheet. Preferred import options:

Import the packaged CSS via the package export (recommended):

import 'cyberduck/css'

Import the compiled CSS file directly (older setups):

import 'cyberduck/dist/cyberduck.css'

If you want to include and compile the SCSS source in your app (allows customization), import the SCSS entry:

@use 'cyberduck/styles/cyberduck.scss' as *;

Or in a JS/TS entry that supports Sass imports:

import 'cyberduck/styles/cyberduck.scss'

Using the `Layout` component

CyberDuck exports a small set of layout components. Example usage of the Layout component together with Navbar and Footer:

import React from 'react'
import { Layout, Navbar, Footer } from 'cyberduck'
import 'cyberduck/css'

function App() {
	return (
		<Layout>
			<Navbar />
			<main className="container py-4">
				<h1>Hello from CyberDuck</h1>
				<p>Use the provided layout primitives and styles as building blocks.</p>
			</main>
			<Footer />
		</Layout>
	)
}

export default App

You can also import specific components via subpath imports if you prefer:

import { Navbar } from 'cyberduck'
// or
import { Navbar } from 'cyberduck/Navbar'

Peer dependencies

react and react-dom (install in your project)
bootstrap (CSS utilities used by components)
react-router / react-router-dom (if you use routing components)

Publishing

The package repository is: git+https://git.maze.io/maze/cyberduck.git. The package exposes main, module, and TypeScript types fields and emits declaration files in dist/types.

Contributing

See the repository for contributing guidelines and style rules.

2.7 KiB Raw Blame History