Skip to content
ADYSRE
New: gradient and palette generators

Every block, colour and tool your team needs in one calm workspace

ADYSRE brings your components, icons, colours, surfaces, templates and tools into one workspace, so your team can move from idea to production without switching apps.

Explore componentsOpen the playgroundOpen the workspace
No card required to browseTrusted by 18,000+ builders worldwide

Website Intelligence

Know exactly what is wrong with any website

Point it at any public URL and get one report across SEO, security, HTML, assets and best practices, backed by 52 rule-based checks. Performance and Core Web Vitals arrive with the browser engine.

11
Analyses per scan
52
Rule-based checks
4
Export formats
  • Performance
  • SEO
  • Accessibility
  • Best practices
  • Security
  • Core Web Vitals
  • Technology detection
  • Asset optimization
  • HTML structure
  • AI recommendations
  • Historical comparison
Explore the platform

One workspace, every building block

Each module is ready to browse, copy and drop into your product. Open any of them from the side menu once you are in.

Components

Copy-paste UI blocks in HTML, Tailwind, React and Next.js, typed and ready for production.

Icons

A tuned icon set with adjustable weight, live preview and one-click copy in your format.

Colors & Surfaces

Palettes, gradients, patterns and textures, all token-driven and ready to export.

Templates

Full page and flow templates that assemble the modules into finished screens.

Image & Utility Tools

Compress, convert, resize, remove backgrounds and read codes, entirely in your browser.

Design Playground

Design pages, dashboards and graphics on an infinite canvas. No code.

Business Rules

Business Rules Engine

One rule, three ways at once. The JSON tree is the only source of truth; the sentence and the verdict are generated from it, right here on this page, by the same packages you would install.

order-approval.rule.json0.97 ms

The rule

01
{
  "schemaVersion": 1,
  "id": "r_6",
  "name": "Large orders from new customers need approval",
  "description": "Anything over 1,000 from a new customer, or backdated, is held for a human.",
  "kind": "validation",
  "status": "draft",
  "version": 1,
  "priority": 0,
  "enabled": true,
  "tags": [
    "orders",
    "approval"
  ],
  "when": {
    "kind": "group",
    "id": "g_5",
    "combinator": "all",
    "children": [
      {
        "kind": "condition",
        "id": "c_1",
        "left": {
          "source": "field",
          "path": "order.total"
        },
        "operator": "greaterThan",
        "args": [
          {
            "source": "literal",
            "value": 1000
          }
        ]
      },
      {
        "kind": "group",
        "id": "g_4",
        "combinator": "any",
        "children": [
          {
            "kind": "condition",
            "id": "c_2",
            "left": {
              "source": "field",
              "path": "customer.tier"
            },
            "operator": "equals",
            "args": [
              {
                "source": "literal",
                "value": "new"
              }
            ]
          },
          {
            "kind": "condition",
            "id": "c_3",
            "left": {
              "source": "field",
              "path": "order.placedAt"
            },
            "operator": "before",
            "args": [
              {
                "args": [],
                "source": "function",
                "name": "today"
              }
            ]
          }
        ]
      }
    ]
  },
  "then": [
    {
      "id": "a_hold",
      "type": "requireApproval"
    }
  ],
  "otherwise": [
    {
      "id": "a_auto",
      "type": "autoApprove"
    }
  ],
  "metadata": {
    "createdAt": "2026-07-26T00:00:00.000Z",
    "updatedAt": "2026-07-26T00:00:00.000Z"
  }
}
@adysre/rules-corestringifyRule()

In plain English

02

Large orders from new customers need approval

When all of these are true:

Order total is greater than 1,000

any of these are true:

Tier is "new"

Placed at is before today

Then require approval

Otherwise auto approve

@adysre/rules-rendererdescribeRule()

Run against an order

03
The order it ran against
Order total2400
Placed at"2026-07-26"
Tier"new"
Matched

How it decided

  • greaterThanmatched
  • equalsmatched
  • groupmatched
  • groupmatched
Action appliedrequireApproval
@adysre/rules-coreevaluateRule()
Operators
27
Functions
23
Rule kinds
7
Open the rules engine

API Studio

An API client that lives inside your stack

Collections, environments, auth and assertions, self-hosted next to everything else you build here. Requests run on your own server, so nothing you send is anybody else's to keep.

POSTCreate orderProduction
POST{{baseUrl}}/v1/ordersSend
Params2Headers3BodyAuthTests3

Body

{
  "customerId": "{{customerId}}",
  "items": [
    { "sku": "ADY-2410", "quantity": 2 }
  ],
  "currency": "EUR"
}
201 CreatedTime 128 msSize 412 B
{
  "id": "ord_7Kd91",
  "status": "confirmed",
  "total": 148.5,
  "currency": "EUR",
  "items": [
    { "sku": "ADY-2410", "quantity": 2 }
  ],
  "createdAt": "2026-07-27T09:14:02.881Z"
}

Assertions3/3

  • status equals 201passed
  • responseTime lessThan 500passed
  • jsonPath $.status equals confirmedpassed
HTTP methods
9
Auth schemes
9
Body types
6
Assertion operators
11
  • Collections and folders
  • Environments and variables
  • Auth built in
  • Request history
  • Assertions and tests
  • Self-hosted
Open API Studio

Open source

Ship it from npm, not from a copy-paste

Every block, icon, gradient, pattern and texture on this site is one install away: typed, tree-shakeable, and yours to use in any React or Next.js project.

adysrev0.2.0MIT licensed
npm install adysre

Wire up the styles once

One import brings the design tokens and tells Tailwind to scan the package. Not using Tailwind? Import the pre-compiled stylesheet instead.

app/globals.css
@import "tailwindcss";
@import "adysre/styles.css";

Then import anything

Each area has its own entry point, so a button never drags the whole catalogue into your bundle.

app/page.tsx
import { Button } from 'adysre';
import { ArrowUpRight } from 'adysre/icons';
import { GradientSurface } from 'adysre/gradients';
import { AboutStats } from 'adysre/blocks';

export default function Page() {
  return (
    <GradientSurface gradient="warm-flame" className="rounded-2xl p-10">
      <AboutStats
        title="Where we are after six years"
        stats={[
          { label: 'People', value: '12' },
          { label: 'Projects shipped', value: '148' },
        ]}
      />
      <Button>
        Read the docs <ArrowUpRight size={16} />
      </Button>
    </GradientSurface>
  );
}

What you get

View on npmBrowse the catalogue

From blank canvas to shipped, in three steps

The same loop for every module, so the whole team moves the same way.

1

Browse

Search across every module and preview each result live before you commit.

2

Tailor

Adjust colour, weight and framework, then copy output that matches your tokens.

3

Ship

Paste it into your product and keep moving, with no cleanup and no lock-in.

See it work before you commit

Live previews built from the same design tokens your product uses.

Gradient

Paste-ready CSS backgrounds

Palette

Token-ready colour sets

Icons

Adjustable, copy in one click

Patterns

CSS backgrounds, no image files

Textures

Grain and surface finishes

Components

Typed and production ready

Growing every week

0+
Components
0+
Icons
0+
Colors
0+
Gradients
0+
Patterns
0+
Textures
0+
Teams building

Templates

Complete sites, not just sections

31 full templates. Every page designed together, every section yours to edit. Preview one live, clone it with a prompt, or download a runnable project.

Browse all 31 templates

Included with every plan, at no extra cost.

FAQ

Questions, answered

Everything else you might want to know before you start.

Still have a question? We're happy to help you get started.

Contact us
What is ADYSRE?

A single workspace for design and build resources: components, icons, palettes, gradients and templates, ready to copy into your product.

Which frameworks do you support?

Components ship as HTML, CSS, Tailwind, React, Next.js and TypeScript, so you can drop them into most modern stacks.

When do templates arrive?

Templates are in active development. Open the templates page to preview what is coming and be first to know when it ships.

Is there a free tier?

Yes. You can browse and use a generous free selection with no card. One payment unlocks everything, including what we add later.

Can my whole team use it?

Yes. Team access shares one workspace across your organisation, with the same modules for everyone.

Ready to build with less friction?

Open the workspace and browse every module in the side menu. No setup, no cleanup.

Open the workspaceSee pricing