A highly opinionated, zero-configuration linter and formatter

Ultracite is a highly opinionated preset for Biome, designed to help you and your AI models write consistent and type-safe code without the hassle of configuration.

Read the docs

$ ultracite fix

Ultracite v6.3.11 fix
Found 121 errors.
✓ Finished in 121ms on 196 files.

Here are the issues we couldn't fix automatically:

apps/docs/app/og/[...slug]/route.tsx:39:8 suppressions/unused
Suppression comment has no effect. Remove the suppression or make sure you are suppressing the correct rule.

       38 │     <div style={{ fontFamily: "Geist" }} tw="flex h-full w-full bg-black">
   >   39 │       {/** biome-ignore lint/performance/noImgElement: "Required for Satori" */}
          │        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
       40 │       <img
       41 │         alt="Vercel OpenGraph Background"

────────────────────────────────────────────────────────────

apps/registry/app/[component]/route.ts:226:76 lint/complexity/noExcessiveCognitiveComplexity
Excessive complexity of 95 detected (max: 15).

      225 │ 
   >  226 │ export const GET = async (_request: NextRequest, { params }: RequestProps) => {
          │                                                                            ^^
      227 │   const { component } = await params;
      228 │   const parsedComponent = component.replace(".json", "");

    i Please refactor this function to reduce its complexity score from 95 to the max allowed complexity 15.

────────────────────────────────────────────────────────────

packages/elements/__tests__/chain-of-thought.test.tsx:23:69 lint/suspicious/noEmptyBlockStatements
Unexpected empty block.

       22 │     // Suppress console.error for this test
   >   23 │     const spy = vi.spyOn(console, "error").mockImplementation(() => {});
          │                                                                     ^^
       24 │ 
       25 │     expect(() =>

    i Empty blocks are usually the result of an incomplete refactoring. Remove the empty block or add a comment inside it if it is intentional.

Used by these organizations and thousands of open source projects.

Why choose Ultracite?

Ultracite is specifically designed to be easy to setup and use. Here's how it compares to other toolchains.

ESLint + Prettier + Stylelint

The traditional JavaScript toolchain.

Thousands of available rules

Hundreds of lines of config

10+ dependencies

4+ config files

Slow performance

Setup in minutes

Ultracite

Zero-config Biome preset with AI integration.

Hundreds of available rules

2 lines of config

2 dependencies

1 config file

Lightning fast performance

Agent Rules

Editor Configuration

Third-party integrations

MCP Server

Setup in seconds

Framework presets

Biome

Fast Rust-based formatter and linter.

Hundreds of available rules

Hundreds of lines of config

1 dependency

1 config file

Lightning fast performance

Setup in minutes

Zero-config by design

Hundreds of rules for your framework to optimize your JavaScript / TypeScript code, while still allowing you to customize when needed.

{  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",  "extends": ["ultracite/core", "ultracite/react", "ultracite/next"]}

Designed for humans and AI

Ensure consistent code style and quality across all team members and AI models, eliminating debates over formatting and reducing code review friction.

Agent Integration

Add formatting rules for AI agents and run Ultracite in agent loops.

Editor configuration

Automatically generate editor-specific rule files to work with Ultracite.

Configurable spec

Zero configuration Biome configuration out of the box.

.cursor

hooks.json

.rules

ultracite.mdc

.vscode

settings.json

index.tsx

layout.tsx

utils.ts

globals.css

biome.jsonc

import React from 'react';interface User {  id: number;  name: string;  email: string;}const UserCard: React.FC<{ user: User }> = ({ user }) => {  return (    <div className="p-4 border rounded-lg shadow-sm">      <h3 className="text-lg font-semibold">{user.name}</h3>      <p className="text-gray-600">{user.email}</p>    </div>  );};export default UserCard;

Problems

index.tsx

/index.tsx

React is imported but not used

It is not necessary to wrap the return statement in a div.

Generate me a new UserCard component.

Sure! I'll generate a new UserCard component for you.

Using Ultracite

I found several issues with the code. Here's a list of suggestions:

React is imported but not used. This is a common pattern in React codebases, but it's not necessary. You can destructure the import to use the React object.
It is not necessary to wrap the return statement in a div. You can return the JSX directly.
Extract types into a type definition rather than providing them inline. This will make the code more readable and maintainable.

MCP Support

Lint and format code without needing to run Ultracite locally.

Output panel

Biome uses the VS Code output panel to show problems.