CodedDesign

A cartoon React design system you can install. See it running, then copy it into another app.

bash

npm install @kenselasie/codeddesign

tsx

import "@kenselasie/codeddesign/styles.css";
import { Button } from "@kenselasie/codeddesign";

Savings targets

Sample

Active milestones for North studio. Figures are demonstration data.

Retirement

$420,000

65% · $273,000 saved

Real estate

$85,000

32% · $27,200 saved

Emergency

$12,000

88% · $10,560 saved

$1,211.29

Claimable balance. Once a bank is connected, amounts over $10 go out on the 15th.

Recipes

Copy a screen, then open the full examples.

Sign-in

tsx

import { Form, TextField, Button } from "@kenselasie/codeddesign";

<Form onSubmit={signIn}>
  <TextField label="Work email" type="email" />
  <Button variant="primary">Sign in</Button>
</Form>

Data table

tsx

import { DataTable } from "@kenselasie/codeddesign";

<DataTable
  rows={studios}
  columns={[
    { key: "name", header: "Name" },
    { key: "owner", header: "Owner" },
  ]}
/>