@ramme-io/ui 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +103 -31
  3. package/package.json +1 -1
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Excesspool Limited Liability Company
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,92 +1,164 @@
1
1
  # Ramme UI
2
2
 
3
- [![NPM Version](https://img.shields.io/npm/v/@ramme-io/ui.svg)](https://www.npmjs.com/package/@ramme-io/ui) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
3
+ [![NPM Version](https://img.shields.io/npm/v/@ramme-io/create-app.svg)](https://www.npmjs.com/package/@ramme-io/ui) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4
4
 
5
- Ramme UI is a designer-centric prototyping framework built to empower product designers and builders with limited coding experience to independently build, test, and validate high-fidelity, interactive prototypes. It is built on the belief that the future of product development belongs to the creator, and a strong framework is the key to bridging the gap between strategic vision and a tangible product.
5
+ **The structural frame for the modern web.**
6
6
 
7
- The strategic focus of Ramme is to make the common 80% of application development effortless, allowing you to focus on the unique 20% that delivers real value.
7
+ Ramme UI is a curated bundle of industry-standard libraries, accessible components, and architectural best practices designed for rapid prototyping.
8
+
9
+ It creates a "Golden Path" for product designers and engineers who need to validate ideas quickly without getting bogged down in configuration. By bundling the best open-source tools into a cohesive system, Ramme allows you to build high-fidelity, interactive prototypes that are production-ready from day one.
10
+
11
+ ---
12
+
13
+ ## The Architecture
14
+ Ramme (Danish for "Frame") is not about reinventing the wheel. It is about providing a solid steel frame so you can focus on the walls and windows.
15
+
16
+ We have orchestrated the most robust third-party libraries in the ecosystem into a single, opinionated toolkit:
17
+
18
+ * **Engine:** React 19+
19
+ * **Styling:** Tailwind CSS (configured for rapid iteration)
20
+ * **Primitives:** Radix UI (for unstyled, accessible interactive elements)
21
+ * **Motion:** Framer Motion (for high-fidelity interaction design)
22
+ * **Icons:** Lucide React
23
+
24
+ This is not a "walled garden." It is a standardized set of building materials that respects your need for speed and flexibility.
8
25
 
9
26
  ---
10
27
 
11
28
  ## Quick Start
12
29
 
13
- While you can install `@ramme-io/ui` in any React project, the recommended way to get started is with our official starter kit. This will create a new project with Ramme UI, Vite, React, and Tailwind CSS all pre-configured.
30
+ The fastest way to start building is to use our CLI tool, which scaffolds a Vite-powered application with the Ramme Design System pre-configured.
14
31
 
15
32
  Run the following command in your terminal:
16
33
 
17
- ```bash
18
- npm create @ramme-io/app@latest your-project-name
34
+ *(Replace `my-new-project` with your desired folder name).*
19
35
 
36
+ ```bash
37
+ npm create @ramme-io/app@latest my-new-project
20
38
  ```
21
39
 
40
+ This single command will:
41
+ 1. **Scaffold** a high-performance Vite project structure.
42
+ 2. **Install** React 19, TypeScript, and Tailwind CSS.
43
+ 3. **Configure** the `@ramme-io/ui` component library and design tokens.
44
+ 4. **Optimize** linting and build settings for immediate deployment.
45
+
22
46
  ---
23
47
 
24
- ## Local Development & Storybook
48
+ ## Launch Sequence
25
49
 
26
- If you want to contribute to the Ramme UI library itself, you can run our component workbench locally using Storybook.
50
+ Once the scaffolding is complete, initialize your local environment:
27
51
 
28
- **1. Install Dependencies:**
29
- First, clone this repository and install the required dependencies using `pnpm`.
52
+ **1. Enter the project directory**
53
+ ```bash
54
+ cd my-new-project
55
+ ```
30
56
 
57
+ **2. Install dependencies**
31
58
  ```bash
32
59
  pnpm install
60
+ # or npm install
61
+ ```
62
+
63
+ **3. Ignite the dev server**
64
+ ```bash
65
+ pnpm run dev
33
66
  ```
34
67
 
35
- **2. Run Storybook:**
36
- Next, run the Storybook command. This will start a local development server and open a new browser tab where you can view, test, and interact with all of the library's components in isolation.
68
+ Your prototype is now live at `http://localhost:5173`.
69
+
70
+ ---
71
+
72
+ ## The Tech Stack
73
+
74
+ This starter kit is not a proprietary framework; it is an opinionated orchestration of the best open-source tools available:
75
+
76
+ * **Vite:** Next-generation tooling for instant server start and lightning-fast HMR (Hot Module Replacement).
77
+ * **React:** The standard library for building composable user interfaces.
78
+ * **TypeScript:** Statically typed JavaScript for scalable, robust application logic.
79
+ * **Tailwind CSS:** A utility-first styling engine configured with Ramme design tokens.
80
+ * **@ramme-io/ui:** A pre-installed suite of accessible, unstyled primitives based on Radix UI.
81
+
82
+ ---
83
+
84
+ ## Manual Installation
85
+
86
+ If you are adding Ramme to an existing project, install the core package:
37
87
 
38
88
  ```bash
39
- pnpm run storybook
89
+ npm install @ramme-io/ui
90
+ # or
91
+ pnpm add @ramme-io/ui
40
92
  ```
41
93
 
42
94
  ---
43
95
 
44
- ## Basic Usage
96
+ ## Component Usage
45
97
 
46
- Here's a simple example of how to use a Ramme UI component in your project:
98
+ Ramme components are designed to be composable and intuitive.
47
99
 
48
100
  ```tsx
49
101
  import React from 'react';
50
102
  import { Button, Card, PageHeader } from '@ramme-io/ui';
103
+ import { ArrowRight } from 'lucide-react';
51
104
 
52
- function MyAwesomePage() {
105
+ function LandingPage() {
53
106
  return (
54
- <div>
107
+ <div className="p-8 max-w-4xl mx-auto">
55
108
  <PageHeader
56
- title="Welcome to Ramme"
57
- description="This is a page built with our new component library."
109
+ title="Prototype Faster."
110
+ description="Stop fighting with config files. Start designing in code."
58
111
  />
59
- <Card className="mt-8 p-4">
60
- <p className="mb-4">Here is some content inside a card.</p>
61
- <Button variant="primary" onClick={() => alert('Button clicked!')}>
62
- Get Started
112
+
113
+ <Card className="mt-8 p-6 border-neutral-200 shadow-sm">
114
+ <h3 className="text-lg font-medium mb-2">Ready to build?</h3>
115
+ <p className="text-neutral-600 mb-6">
116
+ This component is accessible, responsive, and themable by default.
117
+ </p>
118
+ <Button variant="default" onClick={() => console.log('Launch')}>
119
+ Initialize Project <ArrowRight className="ml-2 h-4 w-4" />
63
120
  </Button>
64
121
  </Card>
65
122
  </div>
66
123
  );
67
124
  }
68
125
 
69
- export default MyAwesomePage;
126
+ export default LandingPage;
70
127
  ```
71
128
 
72
129
  ---
73
130
 
74
- ## The Ramme Ecosystem
131
+ ## Local Development
132
+
133
+ If you want to contribute to the framework or customize the primitives, you can run our component workbench locally.
75
134
 
76
- The Ramme project is an integrated framework architected across three separate repositories to create a seamless experience from concept to creation.
135
+ 1. Install Dependencies:
77
136
 
78
- * **`@ramme-io/ui`** (This Repository): A public, open-source component library distributed as an NPM package. This is the visual foundation of the ecosystem.
137
+ ```bash
138
+ pnpm install
139
+ ```
140
+
141
+ 2. Run Storybook: This starts the local development environment where you can test components in isolation.
142
+
143
+ ```bash
144
+ pnpm run storybook
145
+ ```
146
+ ---
147
+
148
+ ## The Ramme Ecosystem
79
149
 
80
- * **`@ramme-io/create-app`**: A public, open-source starter kit that provides the ideal local environment for building with Ramme UI.
150
+ This tool is part of a suite of developer resources maintained by **Excesspool Limited Liability Company**:
81
151
 
82
- * **`ramme-app-builder`**: A private, hosted SaaS application featuring our AI Prototyping Assistant. It guides users through the strategic A.D.A.P.T. Framework to build applications from a solid strategic foundation.
152
+ * **`@ramme-io/ui`**: The core library of visual primitives.
153
+ * **`@ramme-io/create-app`** (This Repository): The CLI scaffolding tool.
83
154
 
84
155
  ---
85
156
 
86
157
  ## Contributing
87
158
 
88
- We welcome contributions from the community! If you'd like to contribute, please fork the repository and submit a pull request. For major changes, please open an issue first to discuss what you would like to change.
159
+ We welcome contributions from the community. Please fork the repository and submit a pull request. For major architectural changes, please open an issue first to discuss the proposed direction.
89
160
 
90
161
  ## License
91
162
 
92
- This project is licensed under the MIT License.
163
+ Copyright © 2025 Excesspool Limited Liability Company.
164
+ This project is licensed under the [MIT License](LICENSE).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ramme-io/ui",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "The structural component library for the Ramme Framework.",
5
5
  "private": false,
6
6
  "main": "./dist/index.umd.js",