@iqss/dataverse-design-system

Dataverse Design System - React Components

The Dataverse Design System is an open-source project that provides a comprehensive collection of reusable React components for building user interfaces. This package serves as a library of UI components specifically designed for use in the Dataverse Frontend.

Features

• Ready-to-use React components: The package offers React components that follow the Dataverse design guidelines. These components enable developers to quickly and easily create consistent and visually appealing user interfaces.

• Consistent design and styling: The components in the Dataverse Design System adhere to a cohesive design language, ensuring a consistent and harmonious look and feel throughout the application. The styling follows best practices and can be easily customized to match your project's branding requirements.

• Modular and extensible: The design system's components are built with modularity and extensibility in mind. Each component is self-contained, allowing for easy integration into new or existing projects. Developers can leverage the components as building blocks, combining them to create complex interfaces while maintaining a clean and scalable codebase.

• Responsive and accessible: The components are designed to be responsive and accessible, ensuring that the user interface functions well on various devices and is inclusive for all users. They comply with web accessibility standards, making it easier to create inclusive and usable experiences for individuals with disabilities.

• Documentation and examples in Storybook: The Dataverse Design System package includes documentation, providing usage guidelines and examples for each component in the integrated Storybook.

Installation

You can install the Dataverse Design System package via npm:

npm install @iqss/dataverse-design-system

Usage

To use the components from the Dataverse Design System in your React application, import the desired components and start building your UI:

import { Container, Row, Col, Form } from '@iqss/dataverse-design-system'

function App() {
  return (
    <Container>
      <Row>
        <Col>
          <h1>Hello Dataverse!</h1>
          <Form>
            <Form.Group controlId="username">
              <Form.Group.Label>Username</Form.Group.Label>
              <Form.Group.Input type="text" placeholder="Username" />
            </Form.Group>
            <Form.Group controlId="basic-form-password">
              <Form.Group.Label>Password</Form.Group.Label>
              <Form.Group.Input type="password" placeholder="Password" />
            </Form.Group>
          </Form>
        </Col>
      </Row>
    </Container>
  )
}

export default App

For detailed usage instructions and available customization options, refer to the Storybook provided with the package.