HIG is Autodesk's unified design system, so we can build better products faster.

Add a component to your app:

yarn add @hig/button

Import and render the component:

import Button from '@hig/button';
import '@hig/button/build/index.css';

function MyComponent() {
  return <Button title="Hello, world!" />
}

Theme data is a representation of the HIG visual design language in the form of data. We publish the data in JSON and SCSS formats. This data can be used on any platform.

• @hig/theme-data - HIG design spec as data
• <ThemeContext> - A component to ease consumption of theme data from within React components.

• Typography - See <Typography> and <RichText>
• Layout - See <Spacer>
• Icons - See <Icon> to easily render icons in React and the @hig/icons package for svg data

Each HIG pattern is implemented as a set of React components. Each pattern is published to NPM individually under the @hig namespace.

• <Avatar> - A visual representation of a customer's identity
• <Banner> - An alert that requires a user action
• <Button> - Trigger actions or changes
• <Checkbox> - A control to select from non-exclusive options
• <Dropdown> - A menu to select one or many from a list
• <Flyout> - A lightweight popup container
• <Icon> - Represents a concept in graphical form
• <IconButton> - Action buttons that include an icon only
• <Modal> - An overlay that focuses the customer's attention
• <ProfileFlyout> - A flyout containing customer's name, email, and account info
• <ProgressBar> - An indication of content loading, presented horizontally
• <ProgressRing> - An indication of content loading, presented circularly
• <ProjectAccountSwitcher> - Switches the context to different projects or accounts
• <RadioButton> - A control to select one exclusively from a list
• <RichText> - Applies the HIG typography styles to whatever is passed to it
• <SideNav> - Provides high-level navigation
• <SkeletonItem> - A placeholder for loading content
• <Slider> - A control for selecting a single numeric value from a range
• <Spacer> - A square of empty space, meant to add space between other components
• <Table> - Represents tabular data in columns and rows
• <Tabs> - Keeps related content in a single container
• <TextArea> - A control to provide a large amount of freeform text
• <TextField> - A control to provide a small amount of freeform text
• <TextLink> - Directs visitors to another location
• <Timestamp> - Presents a date with humanized phrasing
• <Tooltip> - Provides context in a small popup container
• <TopNav> - Navigation across the top of the screen
• <Typography> - A set of components in many typographical variations

Read our contribution guidelines here: CONTRIBUTING.md