Suankularb Components

SK Components is a design system consisting of tokens and components created with the goal of a consistent and harmonious experience across all Suankularb features and applications.

This repository is a monorepo consisting of the SKCom libraries and a demo application. You can find those in the directories listed below:

Table of Contents

• Resources
• Using SKCom
• Developing SKCom

Resources

ภาษาไทย (Thai): ในตอนนี้ยังไม่มีเอกสารในภาษาไทย แต่เราวางแผนที่จะจัดทำในอนาคต

• The full documentation on design and implementation for SKCom.
• The full API reference for ReSKCom.
• Interact with the examples from the documentation with the demo app.

Using SKCom

Note: SKCom Styles is not designed to be installed in apps. Below is how you can use ReSKCom in a React project.

Tip: If you’re using the Suankularb Next.js Template, ReSKCom is already installed and set up.

Installation

You can install ReSKCom in a React project with the following:

npm i @suankularb-components/react

Set up

ReSKCom comes with no palette by default. To use the default palette, wrap your app with the ThemeProvider component. Ensure the component wraps all parts of the app that uses SKCom.

In a Next.js app, wrap <Component {...pageProps} /> with ThemeProvider, like so:

import { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

If you wish to create your own palette, study the _palette.scss file and declare variables in the same manner in a CSS file, then import it to your app.

Complete

You can now use ReSKCom in your React project.

Developing SKCom

Run the following at the project root to start the development server.

npm run dev

Learn more.

The Demo Application

After starting the development server, you can access the demo application locally. Go to http://localhost:3000/.

You can interact with the examples in the documentation here, or dive deeper into how the examples are created by studying apps\demo.