# How to use UI package

## Getting started

Struct UI is a framework-agnostic component library built on Tailwind CSS.\
It provides prebuilt styles and utility classes that can be used in any setup. To get started, start with installing the UI package in your project:

```bash
npm install @structdk/ui
```

After installing, integrate the CSS into your project to directly utilize the prebuilt styles and components in your markup:

```typescript
import '@structdk/ui/dist/struct-ui.css';
```

You can use Struct UI in two main ways:

* **As a CSS library** (recommended for most users)
* **As a Tailwind source** (for deeper customization)

### 1. Install via npm (CSS library)

```bash
npm install @structdk/ui
# or
pnpm add @structdk/ui
```

After installation, the prebuilt CSS files are available in the package’s `dist` folder:

* `dist/struct-ui.css`
* `dist/struct-ui.min.css`

#### **Using a bundler (recommended):**

In modern setups (Vite, Webpack, etc.), you typically import the CSS in your main entry file:

```typescript
// main.js / main.ts / app.tsx, etc.
import '@structdk/ui/dist/struct-ui.css';
```

This ensures the styles are bundled together with your application and applied globally.

#### Using a `<link>` tag:

```html
<link
  rel="stylesheet"
  href="/node_modules/@structdk/ui/dist/struct-ui.min.css"
/>
```

### 2. Use as Tailwind source (advanced)

If you want to integrate Struct UI into your own Tailwind build (e.g. for customization or tree-shaking), import it into your Tailwind entry file:

```css
@import '@structdk/ui/dist/struct-ui.css';
```

## Basic usage

Once the CSS is loaded, you can build UI by combining:

* **Component classes** (e.g. `btn`, `card`, `input`, `badge`)
* **Variant classes** (e.g. `btn-primary`, `btn-outline-secondary`, `badge-success`)
* **Utility classes** (e.g. `flex`, `gap-4`, `space-y-4`, `w-full`)

Struct UI provides the styling while your application handles structure and behavior.

## Components overview

Struct UI includes a wide range of components for common UI patterns:

### Form and input **components**

Used for collecting and handling user input:

* `button`, `input`, `textarea`, `checkbox`, `radio`, `toggle`, `select`, `file-upload`, `datepicker`

### Layout and navigation

Used to structure and organize your interface:

* `navbar`, `sidebar`, `tabs`, `pagination`, `accordion`, `collapse`

### Feedback and state

Used to communicate system status and user feedback:

* `badge`, `toast`, `empty-state`, `progress`, `countdown`

### Data display

Used for presenting structured or visual data:

* `card`, `table`, `timeline`, `avatar`, `chat-bubble`, `carousel`

### Overlays

Used for layered or interactive UI elements:

* `modal`, `dropdown`

## Component examples

Struct UI is used by applying predefined classes to your HTML elements.

### Button

```html
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Outline</button>
<button class="btn btn-soft-primary btn-sm">Small</button>
```

### Card

```html
<div class="card p-4 space-y-2">
  <h2 class="text-lg font-semibold">Card title</h2>
  <p>Card content</p>
</div>
```

### Using with icons

```html
<button class="btn btn-primary">
  <span class="si-24 si-button-play"></span>
  Play
</button>
```

## Package

For info and the package can be found here:

<https://www.npmjs.com/package/@structdk/ui>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.struct.com/developer/app-integration/how-to-use-ui-package.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.