Fidely UI v1 beta is now available!. 🚀

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, designed to help you build fast, consistent, and beautiful interfaces.
Follow the steps below to get started.

Framework Support

Fidely UI currently 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, make sure you have Panda CSS set up in your project.
Follow the official Panda CSS installation guide for your react framework:

👉 Panda CSS Installation Guide

2 Install Ark UI

Ark UI is a headless component library that forms the foundation for most components.

# npm
npm install @ark-ui/react
# pnpm
pnpm add @ark-ui/react
# yarn
yarn add @ark-ui/react

3. Install Fidely UI

Once Panda CSS and Ark UI are installed, add Fidely UI and its peer dependencies using your preferred package manager:

# 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

After installation, update your panda.config.ts file to include the Fidely UI preset. This preset automatically adds design tokens, colors, and component recipes optimized for Fidely UI.

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

export default defineConfig({
  presets: [
    fidelyPreset({
      accentColor: neutral,
      grayColor: neutral,
      rounded: 'sm',
    }),
  ],

  // 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: {},
  },
})

Note after updating your config make sure you run panda codegen e.g (npm panda codegen) with your package manager.

Note: make sure you Configure your entry css

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

5. Try Fidely UI in action

Now that you’ve set everything up, create a new React component and try using a Fidely UI component!

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

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

You should now see your first Fidely UI button rendered beautifully 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 →

On this page