A collection of assets and guidelines for building consistent user experiences across OVHcloud products.

Quick links

• Storybook (current version)
• All ODS versions
• What's new
• Changelog
• Global Documentation 🔗

Requirements (only for contributing)

• Node.js with version ">= 18.17"
• Yarn with version ">= 2.4"

Installation

All the OVHcloud Design System packages are available on NPM.

yarn add @ovhcloud/ods-components @ovhcloud/ods-theme-blue-jeans

or

npm install --save @ovhcloud/ods-components @ovhcloud/ods-theme-blue-jeans

Usage

To start using ODS, you'll need to import the components.

Add a dependency to either:

• @ovhcloud/ods-components to import all components
• @ovhcloud/ods-components-<component> to import a specific component

Components can be imported using one of:

import { Osds<Component> } from '@ovhcloud/ods-component-<component>'
import { Osds<Component> } from '@ovhcloud/ods-component-<component>/react'
import { Osds<Component> } from '@ovhcloud/ods-component-<component>/vue'

You can import enums directly from the component:

import { ODS_%COMPONENT%_SIZE, ODS_%COMPONENT%_SIZES } from '@ovhcloud/ods-component-<component>'

Same goes for interfaces:

import type { Ods<Component>Attribute } from '@ovhcloud/ods-component-<component>'

Then, in your view, you can start using ODS components. For instance:

<osds-button>
  My Button
</osds-button>

For more detail, see our global Get Started guide

Contribute

You've developed a new cool feature ? Fixed an annoying bug ? We'd be happy to hear from you !

Please read Get Started guide for contributing and CONTRIBUTING.md 😃

Migration

Please read Migration pages to help you to manage the migration guides between each version of ODS.

Related links

• Contribute: https://github.com/ovh/design-system/blob/master/CONTRIBUTING.md
• Migrate from one version to another: https://github.com/ovh/design-system/blob/master/MIGRATION.md
• Troubleshoot dev issues: https://github.com/ovh/design-system/blob/master/TROUBLESHOOTING.md
• Report bugs: https://github.com/ovh/design-system/issues
• Get latest version: https://github.com/ovh/ods

License

Copyright 2023 OVH SAS

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.