Weave is Autodesk's unified design system, so we can build better products faster.
Add a component to your app:
yarn add @weave-design/buttonImport and render the component:
import Button from '@weave-design/button';
function MyComponent() {
return <Button title="Hello, world!" />
}Theme data is a representation of the Weave visual design language in the form of data. With @weave-design/theme-data, we publish the data in ECMAScript module, JSON, and SCSS formats. This data includes 8 themes that can be used on any platform. There are four color schemes including...
- Light gray
- Dark gray
- Dark blue
...with two densities–high and low–for each scheme. See how to provide a theme to components.
@weave-design/theme-data- Weave 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>and<Surface> - Icons - See
<Icons>to easily render icons in React and the@weave-design/iconspackage for svg data
Each Weave pattern is implemented as a set of React components. Each pattern is published to NPM individually under the @weave-design namespace.
<Accordion>- Make content-heavy pages appear less so by vertically stacking items in lists that users can expand or contract<Avatar>- A visual representation of a customer's identity<AvatarBundle>- Indicate a group of people who are associated with a task or information.<Badge>- Visual indicators that communicate status and draw attention to an object.<Banner>- An alert that requires a user action<Button>- Trigger actions or changes<Checkbox>- A control to select from non-exclusive options<Divider>- Separate content inline or in a stack.<Dropdown>- A menu to select one or many from a list<Flyout>- A lightweight popup container<Icons>- Represents a concept in graphical form<IconButton>- Action buttons that include an icon only<Label>- A caption for an item in a user interface<Menu>- Display a list of choices through interaction with a button, icon or other controls<Modal>- An overlay that focuses the customer's attention<NotificationsFlyout>- A less intrusive way of announcing an event of potential interest to the user<NotificationsToast>- Floating message boxes that appear<NumericInput>- For numerical values that allows freehand text entries or toggling values up and down<ProgressBar>- An indication of content loading, presented horizontally<ProgressRing>- An indication of content loading, presented circularly<RadioButton>- A control to select one exclusively from a list<RichText>- Applies the HIG typography styles to whatever is passed to it<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<Surface>- A themable container with the appropriate background color for the current theme<Table>- A collection of data in rows and columns<Tabs>- Keeps related content in a single container<Tag>- Compact elements that can be used to represent small blocks of information<TextArea>- A control to provide a large amount of freeform text<TextLink>- Directs visitors to another location<Thumbnail>- Visual anchors and identifiers for objects<Tile>- A themable container that display information related to a single subject or destination<Timestamp>- Presents a date with humanized phrasing<Toggle>- A control for a single action with a clear on/off or start/stop.<Tooltip>- Provides context in a small popup container<TreeView>- A way to view and manipulate a list of data<Typography>- A set of components in many typographical variations
Read our contribution guidelines here: CONTRIBUTING.md