@cr38te/ui

Shared UI component library by CR38TE. Currently includes the grid system used across all CR38TE projects.

Installation

npm install @cr38te/ui

Peer dependencies — make sure these are installed in your project:

npm install styled-components react react-dom

Setup

The grid reads values from a styled-components ThemeProvider. Your theme must match this shape:

import { ThemeProvider } from "styled-components";

const theme = {
  colors: {
    basic: {
      light: "#ffffff",
      dark: "#000000",
      grey: "#888888",
      darkGrey: "#444444",
      lightGrey: "#cccccc",
    },
    primary: {
      darkGreen: "#1a3a2a",
      lightGreen: "#4caf50",
      // ...your brand colors
    },
  },
  spacing: {
    desktop: {
      l:   "48px",
      m:   "32px",
      s:   "24px",
      xs:  "16px",
      xss: "8px",
      none: "0px",
    },
  },
  justifyContent: {
    start:        "flex-start",
    center:       "center",
    end:          "flex-end",
    spaceBetween: "space-between",
    spaceAround:  "space-around",
    spaceEvenly:  "space-evenly",
  },
  alignItems: {
    start:        "flex-start",
    center:       "center",
    end:          "flex-end",
    spaceBetween: "space-between",
    stretch:      "stretch",
    baseLine:     "baseline",
  },
};

export default function App({ children }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

Grid System

The grid is a 12-column responsive layout system that adapts across 7 breakpoints.

Breakpoints

| Key | Max width | |-------|-----------| | xxl | 1480px | | xl | 1280px | | lg | 1140px | | md | 1024px | | sm | 810px | | xs | 640px | | xxs | 480px |

Columns per breakpoint

| Breakpoint | Columns | |------------|---------| | Default | 12 | | xxl | 12 | | xl | 12 | | lg | 10 | | md | 8 | | sm | 6 | | xs | 4 | | xxs | 2 |

Components

Container

The root grid wrapper. Renders a 12-column CSS grid.

import { Container } from "@cr38te/ui";

<Container>
  {/* Column components go here */}
</Container>

Props

| Prop | Type | Default | Description | |---------|-----------------------------|---------|------------------------------------------| | width | "full" | string | — | "full" makes it 100% width, otherwise calc(100% - 144px) | | gap | SpacingKey | "24px"| Gap between columns (uses theme spacing) | | style | React.CSSProperties | — | Inline styles |

Column

A single grid column. Spans are set per breakpoint.

import { Container, Column } from "@cr38te/ui";

<Container>
  <Column span={6}>Left half</Column>
  <Column span={6}>Right half</Column>
</Container>

If no span is set, columns divide the remaining space equally.

<Container>
  <Column>Auto width</Column>
  <Column>Auto width</Column>
  <Column>Auto width</Column>
</Container>

Props

| Prop | Type | Default | Description | |-----------------|-----------------------|---------------|------------------------------------------| | span | number | auto | Column span (1–12) | | xxlSpan | number | falls back to span | Span at ≤1480px | | xlSpan | number | falls back to span | Span at ≤1280px | | lgSpan | number | falls back to span | Span at ≤1140px | | mdSpan | number | falls back to span | Span at ≤1024px | | smSpan | number | falls back to span | Span at ≤810px | | xsSpan | number | falls back to span | Span at ≤640px | | xxsSpan | number | falls back to span | Span at ≤480px | | gap | SpacingKey | "xs" | Gap between children | | flexDirection | string | "row" | Flex direction of column content | | justifyContent| JustifyContentKey | "start" | Justify content of column | | alignItems | AlignItemsKey | "center" | Align items of column | | className | string | — | CSS class name |

SubColumn

A nested grid inside a Column. Useful for splitting a column into sub-sections.

import { Container, Column, SubColumn } from "@cr38te/ui";

<Container>
  <Column span={12}>
    <SubColumn container="1 / 7">Left section</SubColumn>
    <SubColumn container="7 / 13">Right section</SubColumn>
  </Column>
</Container>

Props

| Prop | Type | Default | Description | |------------------|---------------------|----------|---------------------------------------------| | container | string | "auto" | CSS grid-column value (e.g. "1 / 7") | | xxlContainer | string | falls back to container | At ≤1480px | | xlContainer | string | falls back to container | At ≤1280px | | lgContainer | string | falls back to container | At ≤1140px | | mdContainer | string | falls back to container | At ≤1024px | | smContainer | string | falls back to container | At ≤810px | | xsContainer | string | falls back to container | At ≤640px | | xxsContainer | string | falls back to container | At ≤480px | | gap | SpacingKey | "xs" | Gap between children | | justifyContent | JustifyContentKey | — | Justify content | | alignItems | AlignItemsKey | "center" | Align items |

Wrapper

A full-width section wrapper with optional background color from the theme palette.

import { Wrapper } from "@cr38te/ui";

<Wrapper palette="basic" bgColor="light">
  {/* content */}
</Wrapper>

<Wrapper palette="primary" bgColor="darkGreen">
  {/* content */}
</Wrapper>

<Wrapper>
  {/* no background */}
</Wrapper>

Props

| Prop | Type | Description | |-----------|-----------------------------------|------------------------------------| | palette | "basic" | "primary" | Which color palette to use | | bgColor | ColorBasic | ColorPrimary | Color key from the theme palette |

Full Example

Next.js App Router: any file that uses grid components must have 'use client' at the top.

'use client';
import { Wrapper, Container, Column, SubColumn } from "@cr38te/ui";

export default function HeroSection() {
  return (
    <Wrapper palette="basic" bgColor="light">
      <Container gap="m">

        {/* Two equal columns */}
        <Column span={6} mdSpan={8} smSpan={12}>
          <h1>Title</h1>
          <p>Description text</p>
        </Column>

        <Column span={6} mdSpan={8} smSpan={12}>
          <img src="/hero.png" alt="Hero" />
        </Column>

        {/* Full width row with sub-columns */}
        <Column span={12}>
          <SubColumn container="1 / 5" smContainer="1 / 13">
            Feature A
          </SubColumn>
          <SubColumn container="5 / 9" smContainer="1 / 13">
            Feature B
          </SubColumn>
          <SubColumn container="9 / 13" smContainer="1 / 13">
            Feature C
          </SubColumn>
        </Column>

      </Container>
    </Wrapper>
  );
}

SpacingKey values

| Key | Suggested value | |-------|-----------------| | l | 48px | | m | 32px | | s | 24px | | xs | 16px | | xss | 8px | | none| 0px |

Actual values come from theme.spacing.desktop in your ThemeProvider.

Publishing updates

Bump the version in package.json, rebuild, and publish:

npm run build
npm publish --access public