Clay UI

repository·master·Indexed 42 days ago

A web implementation of the Lexicon Experience Language, providing a comprehensive set of CSS and React components built on top of Bootstrap for Liferay design systems. It includes a wide array of UI packages such as @clayui/form, @clayui/charts, @clayui/button, and @clayui/layout.

Tokens: 334.9K
Snippets: 965
Records: 1.2K
Agent score: 50%

What's inside Clay

What is @clayui/multi-step-nav?
master
The @clayui/multi-step-nav component is a determinate progress bar used for long processes that divide a main task into subtasks. It is commonly referred to as a 'wizard'.
Key features include:
- Helping users identify their current progress in a task.
- Allowing users to navigate forwards and backwards between steps.
https://github.com/liferay/clay/blob/master/packages/clay-multi-step-nav/README.md
Overview of Clay
master
Clay is Liferay's web implementation of the Lexicon Experience Language. It is built on top of Bootstrap and consists of HTML, CSS, and JavaScript components. The project is organized as a monorepo containing both CSS foundations and React components.
https://github.com/liferay/clay/blob/master/README.md
What is Clay CSS?
master
Clay is the web implementation of Liferay's Experience Language. It is a design system designed for building applications both inside and outside of Liferay. It focuses on being fluid, extensible, and providing a consistent, documented API for developers.
https://github.com/liferay/clay/blob/master/packages/clay-css/src/index.md
What is @clayui/toolbar?
master
The @clayui/toolbar component provides a horizontal bar used to group a set of actions that are related to a specific context.
https://github.com/liferay/clay/blob/master/packages/clay-toolbar/README.md
Overview of @clayui/link
master
The @clayui/link package provides a hyperlink component. A link is a clickable element (either text or an image) used to facilitate navigation within an application.
https://github.com/liferay/clay/blob/master/packages/clay-link/README.md
Overview of @clayui/card
master
The @clayui/card package provides Card components, which are a form of data visualization primarily used for displaying images and related content in a structured container.
https://github.com/liferay/clay/blob/master/packages/clay-card/README.md
Overview of @clayui/color-picker
master
The @clayui/color-picker component provides a comprehensive interface for color selection. Key features include:
- Predefined Palettes: Allows users to select colors from a set of ready-made options.
- Hexadecimal Input: Enables users to specify exact colors using hex values.
- Color Sampling: Provides functionality to sample colors.
- Custom Variations: Allows users to explore different color values to create custom variations.
https://github.com/liferay/clay/blob/master/packages/clay-color-picker/README.md
What is @clayui/list?
master
The @clayui/list component provides a visual representation of a dataset. It is designed to organize groups of related content in a vertical layout.
https://github.com/liferay/clay/blob/master/packages/clay-list/README.md
Overview of @clayui/charts
master
The @clayui/charts package is a React wrapper around the Billboard.js library. It provides React components for rendering charts and includes several additional chart types beyond the standard Billboard.js offerings.
https://github.com/liferay/clay/blob/master/packages/clay-charts/README.md
Overview of @clayui/pagination
master
The @clayui/pagination package provides a component for horizontal navigation between different chunks (pages) of a dataset.
https://github.com/liferay/clay/blob/master/packages/clay-pagination/README.md
What is @clayui/modal?
master
The @clayui/modal component provides a secondary window used to communicate information or provide actions within the same process, overlaying the main application content.
https://github.com/liferay/clay/blob/master/packages/clay-modal/README.md
Use @clayui/charts for React-based charts
master
The @clayui/charts package provides a React wrapper around the Billboard.js library. It includes standard charts and some additional specialized chart types.
Note: This package is slated for deprecation. For future projects, it is recommended to use the upcoming wrapper around Recharts.
```
npm install @clayui/charts
```
https://github.com/liferay/clay/blob/master/packages/clay-charts/docs/charts.mdx