How to use UI package

Overview and usage guide for the 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:

npm install @structdk/ui

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

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)

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:

// 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:

<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:

@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

<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

<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

<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