Prime.css

A minimalistic CSS/JS library that embraces simplicity and works directly with HTML elements.
No build tools, no complexity - just the essentials you need.

Why prime.css?

Look, we've all been there - drowning in a sea of dependencies,
fighting with build tools, and wondering why something so simple became so complex.
That's why I created prime.css. Think of it as htmx's companion.
While htmx handles your Ajax needs, prime.css takes care of everything else
you need for a clean, responsive UI - without the bloat.

Maintainer : Suraj

Credit : PrimeFlex CSS, SimpleCSS, Iconoir


Fork Me

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6


    

Get inspired with CSS

How to use CSS to add glam to your Website?



    

Links

One Two Three Four


    

Text Styles

Regular paragraph text with bold text and emphasized text.

Highlighted text and inline code

Deleted text and inserted text

Superscript® and Subscript H2O

Small text for footnotes or legal text

Ctrl + C for keyboard shortcuts




    

Blockquotes

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.

Said no one, ever.



    

Badge

Primary Secondary Warning Danger info Success


    

Buttons


GitHub Sponsors


    

Show Toast



    



    

Breadcrumbs




    

Navbar 1



    

Navbar 2



    

Navbar 3





    

PopOver-Menu




    

Unordered List



    

Ordered List

  1. First item
  2. Second item
  3. Third item


    

Cards

Basic Card

Simple card with some content.

Elevated Card

Card with shadow elevation.




    

Alerts

Info! This is an informational message.
Success! Operation completed successfully.
Warning! Please proceed with caution.


    

Validation states




    

Progress Indicators

70%
60%


    
    

Tables

Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5 Cell 6 Cell 7

Details / Summary

Expand for details

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, odio! Odio natus ullam ad quaerat, eaque necessitatibus, aliquid distinctio similique voluptatibus dicta consequuntur animi. Quaerat facilis quidem unde eos! Ipsa.



    

Address

Written by Jon Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA


    

Horizontal rules

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Forms

This is help text.

This is help text.







    

Definition List

Term 1
Definition 1
Term 2
Definition 2




    


    

Code

Keyboard input: Cmd

Inline code: <div>code</div>

Sample output: This is sample output from a computer program.

Pre-formatted text

P R E F O R M A T T E D T E X T



    
    

More Form elements

Input fields

Select menus

Checkboxes

Nested label > input

Sibling input + label

Radio buttons

Nested label > input

Sibling input + label

Textareas

HTML5 inputs

Dialog

Dialog

Dialogs are a new HTML5 element that can be used to create modal dialogs or pop-up windows.




    

Image




    

Tabs

Tab 1
Tab 2
Tab 3

Content 1

This is the content for tab 1.

Content 2

This is the content for tab 2.

Content 3

This is the content for tab 3.