Getting Started

Add SoftUI to your project in seconds. No build tools required.

Install

npm install softui-css
# or
yarn add softui-css
# or
pnpm add softui-css
# or
bun add softui-css

CDN

Drop these two lines into your <head> and you're ready to go:

<link rel="stylesheet" href="https://unpkg.com/softui-css/dist/softui.min.css">
<script src="https://unpkg.com/softui-css/dist/softui.min.js"></script>

Quick Start

Here's a minimal HTML page with a neumorphic button and card:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/softui-css/dist/softui.min.css">
</head>
<body class="sui-d-flex sui-justify-center sui-align-center sui-min-vh-100">

  <div class="sui-card sui-raised sui-p-5 sui-text-center">
    <h3>Hello SoftUI</h3>
    <p class="sui-text-muted sui-mt-2 sui-mb-3">
      A neumorphic card with a soft raised shadow.
    </p>
    <button class="sui-btn sui-btn-primary">Get Started</button>
  </div>

  <script src="https://unpkg.com/softui-css/dist/softui.min.js"></script>
</body>
</html>

Dark Mode

Add data-theme="dark" to your <html> element. Every component adapts automatically.

<html data-theme="dark">

Customization

SoftUI is built on CSS custom properties. Override them anywhere to match your brand:

:root {
  --sui-primary: #7C5CFC;
  --sui-radius: 12px;
  --sui-shadow-raised: 6px 6px 12px rgba(0,0,0,0.15),
                       -6px -6px 12px rgba(255,255,255,0.05);
}
Explore Components

Delete this item?

This action cannot be undone. This will permanently delete the item and remove all associated data.