Konsta UI Dashboard (React)

Quickly build a responsive dashboard using Konsta UI and Tailwind CSS.

---

🧱 Install dependencies

npm i -S react@^18.3.1
npm i -S react-dom@^18.3.1
npm i -S konsta@^3.1.3
npm i -S tailwindcss@^3.4.3

---

🎨 Tailwind + Konsta config

tailwind.config.js

const konstaConfig = require('konsta/config');
module.exports = konstaConfig({
  safelist: [
    'text-2xl',
    'text-3xl',
    'grow',
    'sm:flex-1',
    'md:flex',
    {
      pattern: /bg-(red|green|blue)-(100|200|300|400|500)/,
      variants: ['lg', 'hover', 'focus', 'lg:hover'],
    },
  ],
});

input.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Generate config files:

const config = loadBlock('konstaConfig');
const basecss = loadBlock('inputcss');
_fs.writeFileSync(`${__dirname}/tailwind.config.js`, config);
_fs.writeFileSync(`${__dirname}/input.css`, basecss);

Build output CSS:

npx tailwindcss -i ./input.css -o ./output.css

➡️ In Znote settings, add external CSS: Name: konsta URL: output.css

---

🧾 Docs

• Konsta UI Components
• Tailwind CSS Docs

---

🚀 App using Konsta

import React from 'react';
import ReactDOM from 'react-dom';
import {
  App, Page, Navbar, Block, BlockTitle,
  Card, Badge, List, ListItem
} from 'konsta/react';

const MyApp = () => (
  <App theme="ios">
    <Page>
      <Navbar title="My Dashboard" />

      <BlockTitle>Statistics</BlockTitle>
      <Block className="sm:flex-1 md:flex gap-4">
        <Card className="grow" raised header="Earning" footer={<Badge>+15% this month</Badge>}>
          <span className="text-3xl font-bold text-black">$414.33</span>
        </Card>
        <Card className="grow" raised header="Customers 🧑‍💻" footer={<Badge>10 this month</Badge>}>
          <span className="text-3xl font-bold text-black">86</span>
        </Card>
      </Block>

      <BlockTitle>Recent invoices</BlockTitle>
      <List strong outline inset>
        <ListItem
          title="John Philips"
          after={
            <>
              <Badge colors={{ bg: 'bg-green-500' }}>Paid</Badge>
              <span className="text-md font-bold text-black">$289.99</span>
            </>
          }
        />
        <ListItem
          title="Anna Georges"
          after={
            <>
              <Badge colors={{ bg: 'bg-red-500' }}>Late</Badge>
              <span className="text-md font-bold text-black">$124.34</span>
            </>
          }
        />
      </List>
    </Page>
  </App>
);

ReactDOM.render(<MyApp />, htmlEl);