@xapplaxy/xy-ui

A Svelte 5 UI component library built on bits-ui and Tailwind CSS. It provides form controls, layout primitives, and action controls for building xapps.

Installation

npm install @xapplaxy/xy-ui

Peer dependencies

Install these in your app (they are shared with your project):

npm install svelte bits-ui @internationalized/date

clsx, tailwind-merge, and @lucide/svelte are bundled as regular dependencies and installed automatically.

Setup

This library is styled with Tailwind CSS (v4) and ships a theme/config file. Import it once in your app's global stylesheet (e.g. src/app.css):

@import '@xapplaxy/xy-ui/tailwindconfig.css';

This defines the design tokens (colors, shadows, radii) used by every component, including the .dark theme variables.

Usage

Import components from the package root:

<script>
  import { XyButton, XyCard, XySelect } from '@xapplaxy/xy-ui';
</script>

<XyCard>
  <XyButton>Click me</XyButton>
</XyCard>

Or import individual components via their subpath (better tree-shaking):

<script>
  import XyButton from '@xapplaxy/xy-ui/XyButton.svelte';
</script>

Components

UI — XyAccordion, XyAccordionItem, XyAccordionContent, XyButton, XyLabel, XyCheckbox, XyCheckboxGroup, XyRadioGroup, XyRadioItem, XySelect, XyTooltip, XyToggle, XySlider, XySection, XyDatePicker, XyCard

Layout — Xapp, XappContainer, XappWrapper, XappControls

Controls — ActionControls, CopyControlButton, CopyLinkControlButton, ClearControlButton, GameControlButton, PinControlButton, RefreshControlButton, ResetControlButton, CustomControlButton

Development

npm run dev       # run the showcase app
npm run package   # build the publishable library into dist/ + run publint
npm run check     # type-check
npm run test      # unit + e2e tests

License

MIT