Installation

Learn how to install and set up Fidely UI in your project.

Getting Started

Fidely UI is built on top of Panda CSS and Ark UI, providing fast, consistent, and beautiful interfaces.

Follow the steps below to get started.

Framework Support

Fidely UI supports the following React frameworks:

Next.js App Router
Next.js Pages Router
Vite (React)
React Router

❌ Gatsby is not supported yet.

1. Install Panda CSS

Before installing Fidely UI, ensure Panda CSS is set up. Follow the official Panda CSS guide for your framework:

👉 Panda CSS Installation Guide

2 Install Ark UI

Ark UI provides headless components that Fidely UI builds on.

# npm
npm install @ark-ui/react

# pnpm
pnpm add @ark-ui/react

# yarn
yarn add @ark-ui/react

3. Install Fidely UI

Install Fidely UI and its peer dependencies:

# npm
npm install @fidely-ui/react @fidely-ui/panda-preset @fidely-ui/styled-system

# pnpm
pnpm add @fidely-ui/react @fidely-ui/panda-preset @fidely-ui/styled-system

# yarn
yarn add @fidely-ui/react @fidely-ui/panda-preset @fidely-ui/styled-system

4. Configure Panda with Fidely UI Preset

Update your panda.config.ts file to include the Fidely preset:

import { defineConfig } from '@pandacss/dev'
import { fidelyPreset } from '@fidely-ui/panda-preset'

export default defineConfig({
  presets: [fidelyPreset()],

  // Whether to use css reset
  preflight: true,

  // Specify where Panda should look for your CSS declarations
  include: [
    './app/**/*.{js,jsx,ts,tsx}', // Replace with your app source directory
  ],

  importMap: '@fidely-ui/styled-system',
  // The output directory for your css system
  outdir: 'styled-system',
  jsxFramework: 'react',
  staticCss: {
    recipes: '*',
  },
  theme: {
    extend: {},
  },
  globalCss: {
    extend: {},
  },
})

After updating, run panda codegen (npx panda codegen) to generate your styled system.

To remove the default Panda CSS colors (50–950) and use Fidely UI colors (1/12–alpha12), add the following plugin to your Panda config.

// panda.config.ts
 plugins: [
    {
      name: 'panda-headless-colors',
      hooks: {
        'preset:resolved': ({ utils, preset, name }) => {
          if (name === '@pandacss/preset-panda') {
            return utils.omit(preset, ['theme.tokens.colors', 'theme.semanticTokens.colors'])
          }
          return preset
        }
      },
    },
  ],

5. Configure your Entry CSS

@layer reset, base, tokens, recipes, utilities;

6. Try Fidely UI Components

Create a new component and test a Fidely UI button:

import { Button } from '@fidely-ui/react'

export default function Index() {
  return <Button variant="solid">Fidely UI Button</Button>
}

You should now see your first Fidely UI button rendered in your app. 🎉

Quick Starter Repo (Ready-to-run)

You can try Fidely UI instantly with this GitHub example:

👉 Fidely UI example

⭐ Star Fidely UI on GitHub →