system-one-design

React design system components built from Figma System One Token Demo (Flowbite). Use these components in your app for consistent, design-token–driven UI.

Install

npm install system-one-design

Peer dependencies: react and react-dom (v17+). Install them if your project doesn’t already have them.

Usage

1. Import the component(s) and the package styles in your app (e.g. in your root layout or main.jsx):

import { Button, Input } from 'system-one-design';
import 'system-one-design/style.css';

function App() {
  return (
    <div>
      <Button>Click me</Button>
      <Input placeholder="Text label" />
    </div>
  );
}

2. Use the stylesheet once per app (e.g. in your entry file or root layout). The CSS is required for components to look correct.

Components

• Button – Primary button (blue, rounded). Supports children, onClick, type, disabled, className, and other native button props.
• Input – Text input with rounded corners and light gray border. Supports placeholder, value, onChange, type, disabled, className, id, name, and other native input props.

Development

• npm run build – Build the library into dist/
• npm run dev – Run the local demo app (Vite dev server)
• npm run preview – Preview the demo app production build

Publishing

Before publishing to npm:

1. Set name, version, description, author, and optionally repository in package.json.
2. Run npm run build. prepublishOnly runs this automatically on npm publish.
3. Publish: npm publish (or npm publish --access public for a scoped package like @yourscope/system-one-design).

Only the dist folder is included in the published package (files in package.json).