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 '@/ui/components/Button/recipes'

export default defineConfig({
    // Whether to use css reset
    preflight: true,
    presets: ['@pandacss/preset-base', '@park-ui/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>
    )
}