Sure, I've updated the documentation based on the new changes:
HextaUI is a user interface library that offers contemporary components, making it effortless to integrate into your projects. With the HextaUI CLI, you can quickly install and utilize these components without any hassle.
To get started, simply run the following command:
npm install @hextastudio/ui@latestAfter installation, use the HextaUI CLI by running:
npx hexta-ui <command>-
npx hexta-ui add <component_name>: Add a component to your project. -
npx hexta-ui list: List all available components. -
npx hexta-ui help: Show the help message.
- To add a component, run:
npx hexta-ui add <component_name>Replace <component_name> with the name of the component you want to install (e.g., npx hexta-ui add button). You can use lowercase or uppercase for the component name.
- The CLI will download the selected component and place it in the
src/components/hexta-uidirectory of your project.
That's it! HextaUI makes it easy to enhance your user interface with modern, customizable components.
| Component | Description |
|---|---|
| AlertDialog | A modal that displays a message or requires user action. |
| Avatar | A circular image that represents a user. |
| Badges | A small icon that displays additional information. |
| Breadcrumb | A navigation trail that displays the user's location. |
| Button | A clickable component that performs an action. |
| Checkbox | A tick box that allows users to select multiple options. |
| Datepicker | A calendar that allows users to select a date. |
| DragAndDrop | A draggable component that allows users to move items. |
| FileUpload | A component that allows users to upload files. |
| Hero | A large, eye-catching section at the top of a page. |
| Input | A field that allows users to enter text. |
| Loader | A spinner that indicates a loading state. |
| Menu | A list of options that users can select from. |
| ProgressBar | A visual indicator of progress. |
| Select | A dropdown list that allows users to select an option. |
| Slider | A component that allows users to select a value within a range. |
| Stepper | A component that guides users through a series of steps. |
| Table | A grid that displays data in rows and columns. |
| Tabs | A navigation component that allows users to switch between different sections. |
| Toast | A temporary message that appears at the bottom of the screen. |
| Toggle | A switch that allows users to toggle between two states. |
| Tooltip | A small pop-up that displays additional information when users hover over an element. |
| Navbar | A navigation bar that contains links to different sections of a website. |
| Footer | A section at the bottom of a page that contains contact information and links. |
- Check out this awesome contribution guide for your First Contribution. | click here
Like it? Star the repo ⭐