Fluent.css logotype Fluent.css

Theme

GitHub CDN LLMs.txt

Fluent.css - An LLM first UI Library

A modern CSS framework that combines Fluent Design with Tailwind utility classes. Can be used independently or with Tailwind.

LLMs.txt Usage

For AI assistants and code generation tools, reference our LLMs.txt file for proper usage patterns and best practices.

Import

Standalone: 
<link rel="stylesheet" href="https://esm.sh/gh/aipx-proto/fluent-css@main/build/fluent.css" />
With Tailwind: 
<!-- 1. Tailwind first -->
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<!-- 2. Fluent.css MUST come after Tailwind -->
<link rel="stylesheet" href="https://esm.sh/gh/aipx-proto/fluent-css@main/build/fluent.css" />

Typography

Display / 7xl Large Title / 5xl Title 1 / 4xl Title 2 / 3xl Title 3 / 2xl Subtitle 1 / xl Subtitle 2 / lg Body 1 / md / base Caption 1 / sm Caption 2 / xs
Font Family Sans Font Family Mono
Font Weight Regular Font Weight Bold

Color

Text Heading: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Text Body: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Text Muted: Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Background Card Background Panel Background Page
Border Outline

Layout

Radius none Radius sm Radius md Radius lg Radius xl Radius full
Shadow
2xs (0) Shadow
xs (2) Shadow
sm (4) Shadow
md (8) Shadow
lg (16) Shadow
xl (28) Shadow
2xl (64)

Button

Icon Only
Anchor Button

Control Group

Input

Input Group

🔍

Select

Textarea

Radio

Checkbox

Switch

Slider

Progress

Value 33/100
Indeterminate
Spinner

Fieldset

Fieldset Legend

This is a fieldset with a legend and some content.


Dialog

Dialog Title

This is a sample dialog window with some content. Dialogs are modal overlays that require user interaction.

Popover

Popover Title

This is a Popover using the new popover API

This is a tooltip using the new popover API (and javascript)

Popover Position

Above start
Above
Above end
Before top
Before
Before bottom
After top
After
After bottom
Below start
Below
Below end

Accordion

Accordion Item 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur cursus, nisl erat dictum enim, nec facilisis enim erat nec urna.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Pellentesque euismod nisi
Accordion Item 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur cursus, nisl erat dictum enim, nec facilisis enim erat nec urna.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Pellentesque euismod nisi
Accordion Item Open

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur cursus, nisl erat dictum enim, nec facilisis enim erat nec urna.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Pellentesque euismod nisi
Accordion Marker End

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu consectetur cursus, nisl erat dictum enim, nec facilisis enim erat nec urna.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Pellentesque euismod nisi

Tabs

First Tab Content

This is the content of the first tab.

Fourth Tab Nested

This is the content of the fourth tab.

Fifth Tab Nested

This is the content of the fifth tab.

Sixth Tab Nested

This is the content of the sixth tab.

Second Tab Content

This is the content of the second tab.

Seventh Tab Nested

This is the content of the seventh tab.

Eighth Tab Nested

This is the content of the eighth tab.

Third Tab Content

This is the content of the third tab.

Table

Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3

HTML Elements

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph with bold text and italic text. Here's some highlighted text and deleted text.

Fluid flow is a fascinating phenomenon that occurs in nature and engineering. When fluids move, they can exhibit either laminar flow, where layers of fluid slide smoothly past one another, or turbulent flow, where chaotic eddies and vortices form. The transition between these states depends on factors like velocity, viscosity, and the geometry of the containing vessel.

The behavior of fluids is governed by fundamental principles like conservation of mass, momentum, and energy. As fluids encounter obstacles or changes in their path, they adapt by speeding up, slowing down, or changing direction. This dynamic nature of fluid flow enables everything from blood circulation in our bodies to the lift generated by airplane wings, making fluid mechanics one of the most important areas of physics and engineering.

This is a blockquote. It can contain multiple paragraphs and is typically used for longer quotations.

Here's some inline code and a keyboard input example.

// This is a code block
function example() {
    console.log("Hello, World!");
}

Here's a link and an WHO abbreviation.

Lists

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  1. First item
  2. Second item
  3. Third item
  4. Fourth item
HTML
HyperText Markup Language
CSS
Cascading Style Sheets