PettyUI/.firecrawl/kobalte-getting-started.md

Getting started

Installation

Install Kobalte by running either of the following:

npmyarnpnpm

Copybash
npm install @kobalte/core

Copybash
npm install @kobalte/core

Using the components

The example below demonstrate how to create a Popover component with Kobalte.

Learn more

index.tsxstyle.css

Copytsx
import { Popover } from "@kobalte/core/popover";
import { CrossIcon } from "some-icon-library";
import "./style.css";

function App() {
  <Popover>
    <Popover.Trigger class="popover__trigger">Learn more</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content class="popover__content">
        <Popover.Arrow />
        <div class="popover__header">
          <Popover.Title class="popover__title">About Kobalte</Popover.Title>
          <Popover.CloseButton class="popover__close-button">
            <CrossIcon />
          </Popover.CloseButton>
        </div>
        <Popover.Description class="popover__description">
          A UI toolkit for building accessible web apps and design systems with SolidJS.
        </Popover.Description>
      </Popover.Content>
    </Popover.Portal>
  </Popover>
}

Copytsx
import { Popover } from "@kobalte/core/popover";
import { CrossIcon } from "some-icon-library";
import "./style.css";

function App() {
  <Popover>
    <Popover.Trigger class="popover__trigger">Learn more</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content class="popover__content">
        <Popover.Arrow />
        <div class="popover__header">
          <Popover.Title class="popover__title">About Kobalte</Popover.Title>
          <Popover.CloseButton class="popover__close-button">
            <CrossIcon />
          </Popover.CloseButton>
        </div>
        <Popover.Description class="popover__description">
          A UI toolkit for building accessible web apps and design systems with SolidJS.
        </Popover.Description>
      </Popover.Content>
    </Popover.Portal>
  </Popover>
}

In a few lines of code, we've implemented a fully accessible Popover component that :

• Adheres to WAI-ARIA Dialog design pattern.
• Can be controlled or uncontrolled.
• Optionally render a pointing arrow.
• Has focus fully managed and customizable.

Previous←IntroductionNextStyling→