🌌 Build with ease

Welcome to Meridian Design Systems, an open-source library aimed at streamlining the creative process for designers and developers. As a work in progress, The goal of Meridian to simplify the way developers create for personal and business projects.

Index

• 📘 Documentation
• ✅ Features
• 📦 Installation
• 💻 Usage
• 🗺 Road Map
• 📝 Contributing
• ⚖️ License

Documentation

Documentation for all components can be found here. Each component has a docs page that outlines prop usage.

Features

Growing Component Library: Meridian offers an expanding collection of pre-designed components, easing the design workflow and saving development time.

Customizable to Your Brand: Once the base components are set there will be a set of colors to use but you will able to customize it to your brand.

Responsive and Accessible: Ensuring inclusivity with designs that reach all users, regardless of their devices or abilities. There are A11Y tests to all components ensuring each version of the library is always up to industry standards.

Evolving with the Industry: One of the biggest focuses of the project is to evolve with the latest trends and practices, providing regular updates and hopefully with stakeholder support down the road.

Regression Testing: Each Pull request compares the previous design against the PR to ensure no UI regressions get shipped.

Installation

To install Meridian in your project, use of the installation methods in your terminal.

NPM

npm i @antman999/meridian-design-systems

YARN

yarn add @antman999/meridian-design-systems

PNPN

pnpn add @antman999/meridian-design-systems

Usage

Once installed you can start importing components from meridian into your application!

Example Usage

import { Button } from '@antman999/meridian-design-systems';

function App() {
  return (
    <div>
      <Button appearance='primary' onClick={() => alert('clicked')}>
        Button
      </Button>
    </div>
  );
}

export default App;

Roadmap

Version 1.0.0 will launch with core components that are tested and accesible.

Visit the figma design systems file to see all upcoming components and improvements before the official launch.

After version 1.0.0 the focus will be utility hooks, layouts, and out of the box theming for your application.

Contributing

I'm currently working on this as a way to understand the needs of developers and overall make it easier to use components. If you see something you'd like to improve please feel welcomed to open a PR.

License

MIT © Anthony Mendoza