Skip to main content

Getting Started

Spin up a React App with the Fedi UI Library and TailwindCSS theme.

Creating a React App​

Create a new react app with any of the following. Select "Yes" for the ones that have an option for TailwindCSS.

  1. Create Next App 
    npx create-next-app@latest
  2. Create React App 
    npx create-react-app my-app
  3. Vite 
    npm create vite@latest

After creating the app, navigate into the project directory.

cd my-app

UI Library Setup​

1. Install the UI Library​

Install the package from the command line

npm install @fedibtc/ui

2. Import Styles​

Import the required index.css file into your app's layout.

import "@fedibtc/ui/dist/index.css";

3. Start Building​

Start using the components in your app.

import { Button, Text } from "@fedibtc/ui";

export default function App() {
  return (
    <main>
      <Button>Click me</Button>
      <Text variant="h1" weight="bolder">
        Hi there!
      </Text>
    </main>
  );
}

Tailwind Theme Setup​

Use the @fedibtc/tailwind-theme plugin to start using themed TailwindCSS classes.

1. Set up TailwindCSS​

Install and set up Tailwind CSS with PostCSS and Autoprefixer if you haven't already.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Install the Plugin​

Install the plugin from the command line

npm install @fedibtc/tailwind-theme

3. Add it to tailwind.config.js​

Import and add the plugin to the plugins entry in tailwind.config.js

// tailwind.config.js
module.exports = {
+  plugins: [require("@fedibtc/tailwind-theme")]
}

Next Steps​

You're ready to start building your Fedi Mod! Hit Next to start learning about all the Fedi UI Components.