@createnew/ui-react

React UI components for the CreateNew Design System.

Installation

npm install @createnew/ui-react @createnew/tokens

Note: lucide-react is automatically included. You can also use any other icon library if preferred.

Quick Start

1. Import Tokens

import "@createnew/tokens/tokens.css";

2. Import Component Styles

import "@createnew/ui-react/styles.css";

3. Use Components

import { Button, TextField, Select } from "@createnew/ui-react";

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <TextField label="Name" placeholder="Enter your name" />
    </div>
  );
}

Available Components

Actions

• Button - Primary, secondary, outline, text variants with sizes (xs, sm, md, lg, icon)

Feedback

• Loader - Round rotating loader with tail and border variants, configurable color, text, centered, and fullscreen variations

Forms

• TextField - Text input with label and error support
• NumberField - Numeric input with increment and decrement controls
• Select - Dropdown select with label and error support
• Checkbox - Checkbox with label, sizes (sm, md), and error support
• Radio - Radio button with RadioGroup wrapper for grouped options

Overlays

• Dialog - Modal dialog built on Radix Primitives

Navigation

• TopNav - Top navigation component
• SubNav - Sub-navigation component
• Footer - Footer component

Component Examples

Button

import { Button } from "@createnew/ui-react";

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="text">Text</Button>

// Sizes
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

// With icons (using lucide-react or any icon library)
import { Pencil, Trash2 } from "lucide-react";

<Button leftIcon={<Pencil size={16} />}>Edit</Button>
<Button size="icon" icon={Pencil} aria-label="Edit" />
<Button rightIcon={<Trash2 size={16} />}>Delete</Button>

// States
<Button loading>Loading</Button>
<Button disabled>Disabled</Button>

TextField

import { TextField } from "@createnew/ui-react";

<TextField
  label="Email"
  type="email"
  placeholder="[email protected]"
  error="Please enter a valid email"
/>

<TextField
  label="Budget"
  inputAdornments={{ prefix: "€" }}
  defaultValue="20"
  inputMode="decimal"
/>

<TextField
  label="Discount"
  inputAdornments={{ suffix: "%" }}
  defaultValue="15"
  inputMode="decimal"
/>

NumberField

import { NumberField } from "@createnew/ui-react";

<NumberField
  label="Quantity"
  min={1}
  max={40}
  defaultValue={10}
  helperText="Enter value between 1 and 40"
/>

<NumberField
  label="Budget"
  min={0}
  step={0.5}
  inputAdornments={{ prefix: "€" }}
  defaultValue={20}
/>

Select

import { Select } from "@createnew/ui-react";

<Select
  label="Company size"
  placeholder="Select company size"
  options={[
    { value: "1-10", label: "1-10 employees" },
    { value: "11-50", label: "11-50 employees" },
  ]}
/>

Checkbox

import { Checkbox } from "@createnew/ui-react";

<Checkbox
  label="I agree to the terms"
  checked={checked}
  onCheckedChange={setChecked}
/>

<Checkbox
  label="Partially selected"
  indeterminate
  onCheckedChange={setChecked}
/>

Radio Group

import { Radio, RadioGroup } from "@createnew/ui-react";

<RadioGroup
  name="payment"
  label="Payment method"
  value={value}
  onChange={setValue}
>
  <Radio value="card" label="Credit Card" />
  <Radio value="paypal" label="PayPal" />
</RadioGroup>

Dialog

import { Dialog, Button } from "@createnew/ui-react";

<Dialog
  open={open}
  onOpenChange={setOpen}
  trigger={<Button>Open Dialog</Button>}
  title="Dialog Title"
>
  <p>Dialog content goes here</p>
</Dialog>

TypeScript Support

All components are fully typed with complete IDE autocomplete support.

import type { ButtonProps, TextFieldProps } from "@createnew/ui-react";

function MyButton(props: ButtonProps) {
  return <Button {...props} />;
}

Styling

All components use token-based styling with global classnames prefixed with cn-:

• .cn-button
• .cn-textfield__input
• .cn-select__field
• .cn-checkbox__input
• .cn-radio__input
• .cn-dialog__overlay

Styles are 100% token-based using CSS custom properties from @createnew/tokens.

Documentation

For comprehensive documentation, architecture details, and complete examples, see the main README.

Dependencies

The following are automatically installed with @createnew/ui-react:

• @createnew/tokens - Design tokens (required)
• @radix-ui/* - All Radix UI primitives (required for Dialog, Select, Popover, Tooltip, etc.)
• framer-motion - Animations (required for SubNav component)
• lucide-react - Icon library (included for convenience, but you can use any icon library)

Peer Dependencies

These must be installed separately:

• react ^18.0.0 (required)
• react-dom ^18.0.0 (required)

About Icons:

• lucide-react is automatically included and ready to use
• The library accepts any icon component as props (e.g., icon={Pencil} or leftIcon={<Icon />})
• You can use any icon library - components accept React components as props