npm package: @styleframe/pro
Description: <div align="center">   <img src="https://www.styleframe.dev/_vercel/image?url=%2Flogotype-light.svg&w=1536&q=100" alt="Styleframe" width="320" height="120">
Author: Alex Grozav
Latest version: 2.2.0

<div align="center">
  <img src="https://www.styleframe.dev/_vercel/image?url=%2Flogotype-light.svg&w=1536&q=100" alt="Styleframe" width="320" height="120">

**Premium Design System Features for styleframe**

Build beautiful, fluid responsive design systems with mathematical precision. Premium composables and advanced features built on styleframe's type-safe API.

[![npm version](https://img.shields.io/npm/v/@styleframe/pro.svg)](https://www.npmjs.com/package/@styleframe/pro)
[![License](https://img.shields.io/badge/License-Commercial-blue.svg)](https://styleframe.dev/license)
[![Discord](https://img.shields.io/discord/1395724958919032943?label=Discord&logo=discord)](https://discord.gg/KCVwuGz44M)

[Homepage](https://styleframe.dev) · [Documentation](https://styleframe.dev/docs) · [License](https://styleframe.dev/license)

</div>

---

# styleframe Pro

**Premium composables and advanced features for professional design systems.**

Styleframe Pro eliminates the complexity of traditional responsive design with fluid scaling, mathematical precision, and production-ready tools. Build faster, ship better.

## ✨ Premium Features

- **🌊 Fluid Responsive Design** - Create designs that scale smoothly across all viewport sizes using mathematical precision. No more breakpoints.
- **💎 Premium Composables** - Advanced design system tools built on styleframe's type-safe API. Production-ready, fully tested.
- **∞ Unlimited Projects** - Use styleframe Pro on unlimited personal and commercial projects. Build websites, apps, and client work.
- **🛡️ Commercial License** - Covers client projects, SaaS applications, and commercial websites. Redistribution requires a builder license. [Learn more](https://www.styleframe.dev/license)
- **⚡ Performance Optimized** - Smaller CSS bundles mean faster page loads. All composables are optimized for best performance.
- **📖 Complete Documentation** - In-depth guides, examples, and best practices. Get up and running in minutes.

## 🚀 Quick Start

### Pre-requisites

Styleframe Pro requires the core `styleframe` package:

```bash
# npm
npm install styleframe

# pnpm
pnpm add styleframe

# yarn
yarn add styleframe

# bun
bun add styleframe
```

### Installation

```bash
# npm
npm install @styleframe/pro

# pnpm
pnpm add @styleframe/pro

# yarn
yarn add @styleframe/pro

# bun
bun add @styleframe/pro
```

### License Activation

Styleframe Pro is **free in development mode** - try it without a license key!

**Development environments** (local development) can use styleframe Pro free of charge.

1. Activate your license key by [logging into your account](https://app.styleframe.dev) and submitting it into the form. You can find your license key in your email receipt or in your account dashboard.

2. Set your license key as an environment variable:

```bash
# Set your license key
export STYLEFRAME_KEY=your_license_key_here
```

Note: styleframe Pro may display watermarks or console warnings when used in production without a valid license key.

## 📚 What's Included

Starting with **fluid responsive design** — the foundation of modern, scalable design systems — with many more premium composables on the way:

- **Fluid Design System** - Based on Utopia's mathematical principles
- **Fluid Clamp** - Smooth scaling between min/max values
- **Fluid Spacing** - Typography and layout that adapt perfectly
- More premium features coming soon!

## 📖 Documentation

- **[Getting Started](https://styleframe.dev/docs/getting-started/introduction)** - Learn the basics
- **[Fluid Design](https://styleframe.dev/docs/design-tokens/fluid-design)** - Complete guide to fluid responsive design
- **[Fluid Clamp](https://styleframe.dev/docs/design-tokens/fluid-design/clamp)** - Learn about fluid scaling
- **[API Reference](https://styleframe.dev/docs/api/overview)** - Complete API documentation
- **[Pro Features](https://styleframe.dev/pro)** - Learn about all Pro features

## 🤝 Community

- **[Discord](https://discord.gg/KCVwuGz44M)** - Chat with the community
- **[GitHub Issues](https://github.com/styleframe-dev/styleframe/issues)** - Report bugs or request features
- **[Discussions](https://github.com/styleframe-dev/styleframe/discussions)** - Ask questions and share ideas

## 📋 License

Styleframe Pro requires a license for production use. [View license terms →](https://styleframe.dev/license)

**Free in Development** - Try styleframe Pro for free in development mode, no credit card required. Upgrade when ready to deploy.

**Commercial Use** - Your license covers:
- Unlimited personal and commercial projects
- Client work and custom websites
- SaaS applications
- Open source projects

**One License, Unlimited Projects** - Build as many sites as you want without purchasing additional licenses.

[Purchase another license →](https://styleframe.dev/pricing) | [Contact us about Builder License →](mailto:support@styleframe.dev)

---

<div align="center">
  <sub>Built with ❤️ by <a href="https://github.com/styleframe-dev">styleframe</a></sub>
</div>