getting-started.md

Getting Started

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Ariakit System

🚀 Installation

npm

npm install @adaptui/react reakit

Yarn

yarn add @adaptui/react reakit

Make sure react react-dom is installed.

Usage

Code below will render an Accordion

See Accordion docs for more info.

import * as React from "react";

import {
  Accordion,
  AccordionDisclosure,
  AccordionPanel,
  useAccordionState,
} from "@adaptui/react";

export const AccordionBasic = props => {
  const state = useAccordionState(props);

  return (
    <Accordion state={state}>
      <h2>
        <AccordionDisclosure id="Trigger 1">Trigger 1</AccordionDisclosure>
      </h2>
      <AccordionPanel id="Panel 1">Panel 1</AccordionPanel>
      <h2>
        <AccordionDisclosure id="Trigger 2">Trigger 2</AccordionDisclosure>
      </h2>
      <AccordionPanel id="Panel 2">Panel 2</AccordionPanel>
    </Accordion>
  );
};

export default AccordionBasic;

Component Docs

• Accordion
• Breadcrumbs
• Calendar
• RangeCalendar
• DateField
• DatePicker
• DateRangePicker
• TimeField
• Drawer
• Disclosure
• Link
• Meter
• Number field
• Pagination
• Progress
• Slider
• Toast

Next | Core Principles →