Primitives

Card

Flexible card primitive with two variants: default for content, bracket for showcases. Only variants, no new components.

Bracket Variant

Minimal cards with corner brackets. Terminal-inspired aesthetic for feature showcases.

With Action Link

AUTHENTICATION
Secure by default.
Session-based auth with social logins, magic links, and role-based access out of the box.
View docs
PAYMENTS
Get paid globally.
Subscriptions, one-time payments, and usage-based billing with zero config.
Integrate
DATABASE
Query anything.
Postgres with Drizzle ORM. Type-safe queries out of the box.
Explore

Without Action (Info Only)

TYPESCRIPT
Type-safe.
End-to-end type safety from database to frontend.
PERFORMANCE
Blazing fast.
Optimized for speed with edge functions and caching.
DEVELOPER UX
Joy to build.
Intuitive APIs and great documentation.

With Custom Content (Icons List)

FEATURES
Everything included.
All the tools you need to build modern applications.
authentication
database
real-time
STACK
Modern tools.
Built with the latest and greatest technologies.
next.jsv15
reactv19
tailwindv4

With Decorative Circle

STORAGE
Files made simple.
Upload, store, and serve files with built-in CDN and image optimization.
Learn more
ANALYTICS
Know your users.
Privacy-first analytics with real-time insights and custom events.
View demo

Usage

import { Card, CardTitle, CardDescription } from "@syner/ui/components/card";
import { ArrowRight } from "lucide-react";

<Card variant="bracket">
  <div className="space-y-3">
    <CardDescription className="text-[8px] uppercase tracking-[0.2em]">
      LABEL
    </CardDescription>
    <CardTitle className="text-[20px] font-bold tracking-tight leading-tight">
      Title text
    </CardTitle>
    <CardDescription className="text-[9px] leading-relaxed max-w-[280px]">
      Description text
    </CardDescription>
  </div>
  <a href="/path" className="text-[9px] font-medium flex items-center gap-1.5">
    Action <ArrowRight size={10} />
  </a>
</Card>

Standard Variant

Traditional shadcn/ui card for content blocks, forms, and dashboard widgets.

With Header, Content, Footer

Settings
Manage your account settings and preferences

Your content goes here. This is the standard card variant with rounded corners, background fill, and subtle shadow.

Recent Activity
Your latest actions
  • • Deployed to production
  • • Updated environment variables
  • • Added team member

With Action in Header

Configuration
Manage system configuration

Configuration content here. The action button is aligned to the right in the header.

Status
System health
All systems operational

Content Only (No Header)

Clean code

Well structured

Fast builds

Optimized output

Secure

Best practices

Usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@syner/ui/components/card";

<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
  </CardHeader>
  <CardContent>
    Your content here
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>