SantyCSS SantyCSS v2.6.1

Flex Snippets

Flexbox layouts built with SantyCSS — copy and use instantly, no custom CSS needed.

A
B
C
Horizontal Row
Row 1
Row 2
Row 3
Flex Column (Stack)
⭐
Logo
Home About
Space Between
⭐
Hello World
Centered content
Centered (Both Axes)
React TypeScript Node.js Figma SantyCSS Next.js
Flex Wrap (Tag Cloud)
Sidebar
Main Content Area
Sidebar + Main

Grid Snippets

CSS grid layouts using SantyCSS make-grid with inline template columns.

⭐
Col 1
Col 2
Col 3
3-Column Equal Grid
⭐
Card
Card
Card
Card
Auto-fit Responsive
Sidebar
Main
Sidebar + Main Layout
Tall
Top
Bottom
Row Span Card

Button Snippets

Button variants using SantyCSS padding, border-radius, and color utilities.

⭐
Primary / Secondary / Ghost
Pill Buttons
Button with Icon

Badge & Tag Snippets

Status badges and category tags using SantyCSS padding + border-radius utilities.

⭐
Active Pending Error
Status Badges
React TypeScript Node.js Figma
Tech Stack Tags

Card Snippets

15 ready-to-use card layouts — click any card to open a live preview with code.

⭐

Revenue

$24,560

↑ +12.4%
Stat Card
Sponsor
B

Your Brand!

Promote your product in this space.

Sponsor Card
⭐

Standard

$2.99/mo

✓ Amazing Benefits ✓ 40% Discount
Pricing Card

Cookie Notice 🍪

We use cookies to ensure that we give you the best experience on our website.

Cookie Notice
⭐
Preview

Title

Hover over the image to see the effect

Image Hover Overlay
Preview

How to build better UI with SantyCSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

J
John · Jan 12, 2024
Blog Post Card
Preview

Card Title

Short description text goes here.

Feature Card
⭐

Premium

$29.99/mo

Lorem ipsum dolor sit amet, consectetur.

Dark Pricing Card

Free Plan

$0/mo

✓ Access to all features
✓ Unlimited storage
✓ No ads

Premium

$9/mo

✓ Everything in Free
✓ Priority support
✓ Custom domain
Pricing Tiers
⭐
J

John Doe

Programmer

🐦
💼
📸
Profile Card
HOT

Featured Item

Maecenas a risus non magna porta non posuere quis diam. Nullam vehicula.

Ribbon Card
S

About Me

Maecenas a risus non magna porta non posuere quis diam. Nullam vehicula vehicula arcu.

Design Code
About Me Card
J

John Doe

Frontend Developer

🐦
📷
💼
Dark Profile Card
Preview Development

Building scalable apps with modern CSS

J
John Doe
2 days ago
Article + Author Card
Preview

Card Title

Lorem ipsum dolor sit amet dummy text here.

Horizontal Card

Typography Snippets

Text size, weight, and color using set-text-* and color utilities.

⭐

Heading XL

Heading L

Body text 15px

Caption / helper text

Heading Scale

Form Snippets

Input fields and form layouts with SantyCSS border, padding, and corner utilities.

⭐
Text Input + Label
Two-Column Form Row

Navbar Snippets

Sticky top navigation bars using SantyCSS flex, spacing, and position utilities.

⭐
Logo.
Sticky Navbar
🎬 Explore Animations →
Code