Ultracite

Docs Presets Integrations Migrations Upgrade

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.

npx ultracite@latest init

Read the docs

Used by these organizations and hundreds 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"]
}

👆 Yes this is literally all you need.

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.

AI Editor Rules

Synchronized rule files for VS Code, Cursor, Windsurf and Zed keeps your AI responses consistent with your coding style.

Configurable spec

Extend the Ultracite spec to your liking.

Output panel

Biome uses the VS Code output panel to show problems.

.cursor

.rules

ultracite.mdc

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;

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

Biome (Ultracite)

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

Run external code through the Ultracite MCP server to lint without needing to install it locally, or connect it to an Agent for consistent code quality in background jobs.

Format on save

Format your code on save with Ultracite.