A production-grade, zero-configuration preset for

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

Read the docs

Terminal

$ bun x ultracite@latest init

● Detected lockfile, using bun
│
◇ Which formatters / linters do you want to use?
│ Biome
│
◇ Which frameworks are you using?
│ React, Next.js
│
◇ Which editors do you want to configure?
│ VSCode / Cursor / Windsurf
│
◇ Which agents do you want to enable?
│ Cursor, Claude Code
│
◇ Which agent hooks do you want to enable?
│ Cursor, Claude Code
│
◆ Would you like any of the following Git hooks?
│ ◻ Husky
│ ◻ Lefthook
│ ◻ Lint-staged
│ ◻ pre-commit (Python framework)

Trusted by top companies

And used by thousands of open source projects.

Zero-config by design

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

I'm usingwith

import { defineConfig } from "eslint/config";import core from "ultracite/eslint/core";import next from "ultracite/eslint/next";import react from "ultracite/eslint/react";import vitest from "ultracite/eslint/vitest";export default defineConfig([  {    extends: [      core,      next,      react,      vitest    ],  },]);

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.