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 (optional)

Styles are optional — CyberDuck does not automatically inject styles when you import components. Import styles only if you want the theme and utilities applied.

Recommended (package export):

import 'cyberduck/css'

Direct CSS file (older setups):

import 'cyberduck/dist/cyberduck.css'

Compile and include SCSS in your app (for customization):

@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