HIG is Autodesk's unified design system, so we can build better products faster.
Add a component to your app:
yarn add @hig/buttonImport 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/iconspackage 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