ui-library

A component library based on Shadcn and tailwind for all things lagoon related:

Installation 💾

Install it in a React project with a single npm/yarn command:

npm install github:uselagoon/ui-library#main tailwindcss @tailwindcss/postcss postcss

yarn add github:uselagoon/ui-library#main tailwindcss @tailwindcss/postcss postcss

Alternatively, add the following to your package.json and run npm i / yarn command:

   "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "@tailwindcss/postcss": "^4.1.8",
    "tailwindcss": "^4.1.10",
    "ui-library": "github:uselagoon/ui-library#main",
  }

Make sure to add generated dist styles from the ui-library like so, preferably in the root layout of your project:

import '@uselagoon/ui-library/dist/ui-library.css';

Usage 🔨

Using a component from the library:

import '@uselagoon/ui-library/dist/ui-library.css';
import { Button, SwitchWithDescription } from '@uselagoon/ui-library';


export default () => (
  <>
    <Button variant="ghost" disabled>A spooky disabled button</Button>
    <SwitchWithDescription
      description="This is a switch description."
      id="first"
      label="Switch Text"
    />
  </>

Vite config ⚙︎

The ui-library is bootstrapped with Vite and TS. To modify the configuration, edit vite.config.ts in the root directory; To modify TypeScript rules, refer to tsconfig.app.json

Linting and bundling

Linting 🧶

The linter is configured for both JS and TypeScript files. It runs during the build step but can also be ran during development by npm run lint.

To adhere to formatting rules, run npm run format.

To configure the linter config, refer to eslint.config.js at the root of the project.

Bundling 📦

After making changes to the source files, make sure to run npm run bundle command which empties the dist folder and generates updated code for components.

Viewing storybook 👀

• Clone this repo
• Run npm i && npm run storybook
• Visit http://localhost:6006/

Development guide 🏗️

Clone the repo locally:

  git clone https://github.com/uselagoon/ui-library .
  npm install
  npm run storybook

It is recommended to build components in isolation with the help of storybook (currently V 9.0).

Open your browser and visit http://localhost:6006.

The project structure is as follows:

├── src │ ├── components # React source code and demos (which then get bundled) │ ├── hooks # Custom hooks │ ├── providers # Custom theme and NextLink providers │ ├── stories # Storybook stories │ ├── index.css # Autogenerated tailwind css file │ └── index.ts # Entrypoint for your exported components (that your project then imports) ├── eslint.config.js # Eslint config ├── vite.config.ts # Vite bundler config └── package.json

Given that there's a storybook instance running, navigate to the src directory and modify/create new components with their respective stories.tsx files.

To add a new component from Shadcn, refer to this guide

Modify and customize anything with Tailwind and/or custom css files if needed.

Then run the lint and format scripts, then ultimately, the bundle script and you're ready to go!

npm run lint
npm run format
npm run bundle

Contributing 🤝

PRs and issues are welcome, we invite contributions from everyone.

This guide could come in handy: GitHub contribution guide