Shipwright Component Library

Welcome to the Shipwright Component Library! This library provides a collection of reusable and customizable UI components that can easily integrate into your web projects. Whether you're building a website, or web application, our components are designed to save you time and effort by providing the base for a consistent and flexible user interface.

At Headway, we believe in the power of design systems and have developed this component library as part of our Shipwright design system. We hope that our library will allow you to create amazing digital experiences and help your project Make Waves!

Contents

• Shipwright Resources
• What's Inside
• Get Started
• Navigation
• Explore with Storybook
• Using Components
• Contact Us

Shipwright Resources for Designers

This component library is built as part of the Shipwright design system. Get the most out of this library by checking out these Shipwright resources:

• Design Systems in Figma Course
• Get the Shipwright UI Kit for Figma
• View these components in Storybook

What's Inside

Our component library is built using cutting-edge technologies, including Next.js, Material-UI, Typescript, and Storybook. We've also included the popular Feather Icons library to help you add beautiful icons to your web projects.

• Next.js provides server-side rendering and static site generation, making it a great choice for building modern web applications.
• TypeScript adds strong typing and static analysis to your code, providing a safer and more maintainable development experience.
• Material-UI offers a set of ready-made, customizable components that follow Google's Material Design guidelines, making it easy to create a beautiful and cohesive user interface.
• Storybook enables you to build, test, and showcase your components in isolation, making it easier to develop and debug your components.
• Feather Icons is a collection of open-source icons that are designed to be lightweight and customizable.

Get Started

To get started with the Shipwright Component Library, simply clone the repository and run npm install from the root directory. From there, you can explore the library's components and customize them to fit your project's unique needs.

Navigation

Components

The components are located in the component directory and have been organized according to atomic design principles. You can find atom-level components in the components/atoms directory, molecule-level components in the components/molecules directory, and so on.

Stories

The stories for the components can be found in the stories directory. The subdirectories within the stories directory are organized following the atomic design principles. For example, you can find stories for the atom components in the stories/atoms directory, while the stories for the molecule components can be found in the stories/molecules directory, and so on.

Mui Theme

The Material-UI Theme is located in the styles/mui directory. Color values can be found in colors.json, shadow values in shadows.json, typography values in typography.json, and miscellaneous values in misc.json. These files are imported into muiTheme.js, which creates and exports the theme for use in components.

Storybook Configuration

The Storybook configuration files are located in the .storybook directory. These files provide essential configuration options for the Storybook instance, including addons, webpack settings, and more.

Explore with Storybook

Get to know our components even better with Storybook. To start a local Storybook instance, run npm run storybook from this project's root directory. Once it's up and running, you can view the component library at http://localhost:6006/. You can also view a hosted instance of these components here.

Storybook organizes and displays component stories based on the atomic design principles used in this library. You'll find atom component stories in the Atoms tab, molecule component stories in the Molecules tab, and so on.

Take your time and explore the possibilities of our Shipwright Component Library. Happy coding!

Using Components

Integrating our Shipwright Component Library into your application is a breeze. To get started, simply import the desired component and call it as needed. Here's an example of how to use the Button component:

import React from 'react';
import Button from 'pathToComponents/components/atoms/Button';

const MyComponent = () => {
  return (
    <Button variant="contained" size="md">
      Click me!
    </Button>
  );
};

export default MyComponent;

Contact Us

Our team at Headway is excited to support you with any questions or feedback regarding the Shipwright Component Library. Please do not hesitate to reach out to us using any of the methods listed below:

• Visit our website: https://www.headway.io/
• Connect with us on LinkedIn: https://www.linkedin.com/company/headwayio
• Follow us on Twitter: https://twitter.com/headwayio
• Subscribe to our YouTube channel: https://www.youtube.com/@headwayio

Thank you for choosing the Shipwright Component Library. We look forward to hearing from you soon!