create-kvy

KVY Frontend template

• Next.js
• Typescript
• ArkUI w ParkUI
• PandaCSS (CSS-in-JS)

How to

Extend theme

Read more: https://panda-css.com/docs/theming/tokens & https://panda-css.com/docs/customization/theme

Dark mode: https://panda-css.com/docs/guides/multiple-themes

Typography

Text styles (font-size, font-weight, line-height, letter-spacing) for specific tags (h1, h2, p, etc.)

All typography components are located in src/ui/components/typography, includes:

• Heading - h1, h2, h3, h4, h5, h6
• Text: p, span, div, label
• Link: a
• Code: code

Heading and Text components have as prop, which is used to render specific tag and apply text styles. For example:

<Heading as="h1">Heading 1</Heading>

This will render h1 tag with h1 text styles (which are defined in src/ui/components/typography/Heading/recipes.ts) You can customize text styles for specific tags by update recipes.ts file.

The same for Text component:

<Text as="p">Paragraph</Text>

Extend a recipes:

Example for button component:

• Create a file recipes.ts in src/ui/components/Button

import {RecipeConfig, RecipeVariantRecord} from '@/styled-system/types'

export const buttonStyle: Record<string, Partial<RecipeConfig<RecipeVariantRecord>>> = {
    button: {
        // write your recipe here
    },
}

• Import your recipe in panda.config.ts

import { defineConfig } from '@pandacss/dev'
import { buttonStyle } from '@/web/components/Button/recipes'

export default defineConfig({
  // Whether to use css reset
  preflight: true,
  presets: ['@pandacss/preset-base', '@park-web/panda-preset'],
  // Where to look for your css declarations
  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],

  // Files to exclude
  exclude: [],

  // Useful for theme customization
  theme: {
    extend: {
      recipes: {
        ...buttonStyle
      },
    },
  },

  // The output directory for your css system
  outdir: './src/styled-system',
  jsxFramework: 'react',
})

Using icon

We using @iconify/react package to render icons. The reason is that this package allows us to use any icon library ( Material, FontAwesome, etc.) and any icon set (Solid, Regular, etc.).

You can find all icons here: https://icon-sets.iconify.design/

Example:

import {Icon} from '@iconify/react'

const MyComponent = () => {
    return (
        <div>
            <Icon icon="mdi:home"/>
        </div>
    )
}