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:
Library/Application | Location |
---|---|
Demo application | apps\demo |
SKCom Styles (CSS) | packages\skcom-css |
ReSKCom (React) | packages\skcom-react |
ภาษาไทย (Thai): ในตอนนี้ยังไม่มีเอกสารในภาษาไทย แต่เราวางแผนที่จะจัดทำในอนาคต
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.
You can install ReSKCom in a React project with the following:
npm i @suankularb-components/react
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.
You can now use ReSKCom in your React project.
Run the following at the project root to start the development server.
npm run dev
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
.