From 5e1e37f0bdb9bed7cd7aa94b114531869d6ddb2c Mon Sep 17 00:00:00 2001
From: Youngteac Hong <susukang98@gmail.com>
Date: Tue, 6 Aug 2024 14:49:46 +0900
Subject: [PATCH] Update README.md in @yorkie-ui/core (#147)

---
 packages/core/README.md | 46 +++++++++++++++++++++--------------------
 1 file changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/core/README.md b/packages/core/README.md
index e1cdc89..7c292db 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -1,30 +1,32 @@
-# React + TypeScript + Vite
+# @yorkie-ui/core
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+`@yorkie-ui/core` is a component library for React. It provides a basic set of styles and components that can be used to build [homepage and dashboard](https://yorkie.dev) of Yorkie.
 
-Currently, two official plugins are available:
+## Installation
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+```bash
+npm install @yorkie-ui/core
+```
 
-## Expanding the ESLint configuration
+## Usage
 
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+Import the styles and components you need from `@yorkie-ui/core`:
 
-- Configure the top-level `parserOptions` property like this:
+```tsx
+// import the styles
+import '@yorkie-ui/core/dist/styles.css';
 
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json', './tsconfig.app.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
+// import button component
+import { Button } from '@yorkie-ui/core';
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+const App = () => (
+  <Button
+    variant="outline"
+    onClick={() => {
+      console.log('click!');
+    }}
+  >
+    Click me
+  </Button>
+);
+```