Getting Started
Installation
Get Frame up and running in your project in under 2 minutes.
Requirements
- React 18.0 or later
- Node.js 18.0 or later
- TypeScript 5.0+ (recommended)
Install Frame
Install Frame using your preferred package manager:
npm
npm install framejs-ui framer-motionyarn
yarn add framejs-ui framer-motionpnpm
pnpm add framejs-ui framer-motionbun
bun add framejs-ui framer-motionSetup
1
Import Styles
Add Frame's base styles to your project. In Next.js, add this to your root layout:
layout.tsx
import 'framejs-ui/styles.css';
2
Add Provider (Optional)
Wrap your app with the FrameProvider for theme configuration and global settings:
layout.tsx
import { FrameProvider } from 'framejs-ui';export default function RootLayout({ children }) {return (<FrameProvider theme="dark">{children}</FrameProvider>);}
3
Start Using Components
Import and use any component in your React files:
page.tsx
import { Button } from 'framejs-ui';export default function Page() {return <Button>Hello Frame!</Button>;}